実現できること

🏠 家での開発シーン

リビングのソファで

50インチテレビにClaude Codeとの会話履歴がすべて表示
ソファでくつろぎながら、スマホで音声入力
「このAPIのエラーハンドリングを改善して」
大画面で生成されたコード全体を楽に確認

ベッドで寝転がりながら

スマホでClaude Codeにアクセス
「明日実装する認証機能の設計を考えて」
リラックスした状態でアイデアを練る
大きな文字で見やすく表示

🚄 外出先での継続作業

電車の中で

スマホを開くと家での会話の続きがそのまま表示
「さっきの認証機能、JWTで実装して」
移動時間を有効活用

カフェで

朝ベッドで考えた設計の続きを実装
「エラーレスポンスの仕様も追加して」
途切れることのない思考の流れ

🔄 家に帰ったら

50インチテレビに外出先での作業がすべて反映済み
小さなスマホ画面では見づらかったコード全体を大画面で確認
「ここの部分をリファクタリングして」と続きを指示

何がすごいのか

✨ Claude Codeとの「会話」が途切れない

家で始めた議論を外出先で継続
電車で思いついたアイデアを家で実装
コンテキストを失うことが一切ない

📱📺 シーンに応じた画面サイズの使い分け

家: 50インチで全体俯瞰、詳細確認
外出先: スマホで継続作業、アイデア実装
ベッド: リラックスして設計思考

🗣️ 音声入力による自然な対話

タイピングせずに思考をそのまま伝達
くつろいだ姿勢でのプログラミング
「コーディング」から「対話」へのパラダイムシフト

実際の使用例：ある日の開発フロー

🌅 朝（ベッドで）7:00

スマホで音声入力：
「今日実装する認証システムの設計を考えて。
JWTを使って、リフレッシュトークンも実装したい」

→ Claude Codeが設計案を提示
→ 会話履歴に保存される

🚄 通勤中（電車で）8:30

スマホでアクセス：
→ 朝の会話の続きが表示される

音声入力：
「さっきの設計で、JWTの実装コードを書いて」

→ 移動時間でコード生成完了

🏠 帰宅後（リビングで）19:00

50インチテレビで確認：
→ 朝から夜までの全会話履歴と生成コードが表示
→ 大画面でコード全体を俯瞰

音声入力：
「エラーハンドリングを追加して、テストコードも書いて」

→ 大画面で詳細確認しながら開発継続

🛏️ 就寝前（ベッドで）23:00

スマホで最終確認：
「明日はフロントエンド側の実装だね。
Reactでの認証フローを考えてみて」

→ 翌日の準備完了

システムアーキテクチャ

アーキテクチャのポイント

マルチポート設計

ポート25492: 大画面表示用（標準フォント）
ポート25493: モバイル表示用（大フォント、狭幅）

セッション永続化

tmuxによる24時間セッション維持
接続断時の自動復旧機能

リアルタイム同期

WebSocketによる双方向通信
全デバイス間での即座の同期

セットアップ手順

1. VPS環境準備

# Ubuntu 22.04での実装例
sudo apt update
sudo apt install -y ttyd tmux

# ファイアウォール設定
sudo ufw allow 22
sudo ufw allow 25492  # TV用
sudo ufw allow 25493  # スマホ用
sudo ufw enable

2. サービス設定

大画面ディスプレイ用

sudo tee /etc/systemd/system/ttyd-display.service > /dev/null <<EOF
[Unit]
Description=ttyd for Large Display
After=network.target

[Service]
Type=simple
User=$USER
ExecStartPre=/bin/bash -c 'tmux kill-session -t claude 2>/dev/null || tmux new-session -d -s claude'
ExecStart=/usr/bin/ttyd -p 25492 -W tmux attach-session -t claude
Restart=always

[Install]
WantedBy=multi-user.target
EOF

モバイルデバイス用

sudo tee /etc/systemd/system/ttyd-mobile.service > /dev/null <<EOF
[Unit]
Description=ttyd for Mobile
After=network.target

[Service]
Type=simple
User=$USER
ExecStart=/usr/bin/ttyd -p 25493 -W -t fontSize=24 -g 60x20 tmux attach-session -t claude
Restart=always

[Install]
WantedBy=multi-user.target
EOF

3. サービス起動

sudo systemctl daemon-reload
sudo systemctl enable --now ttyd-display ttyd-mobile

実際の使用ワークフロー

自宅での開発セッション

50インチTVでコード全体を表示
- http://VPS_IP:25492 にアクセス
- プロジェクト全体を俯瞰
- 複数ファイルを並列表示
スマホで音声入力
- http://VPS_IP:25493 にアクセス
- 音声認識で自然言語指示
- 「この関数をリファクタリングして」
- 「APIエンドポイントを追加」
リアルタイム同期
- スマホの入力が即座にTVに反映
- 大画面で結果を確認

外出先での継続作業

スマホで前回セッションに接続
- tmuxセッションが自動復元
- 前回の作業状態をそのまま継続
移動中の開発
- 電車内でのバグ修正
- カフェでの機能追加
- 音声入力によるハンズフリー操作

まとめ

本記事で紹介した環境により、以下を実現できました：

大画面による俯瞰的開発: システム全体の把握と設計品質向上
音声入力による効率化: 思考の流れを中断しない自然な指示
シームレスな作業継続: 場所とデバイスに依存しない開発環境

この開発スタイルは、AI支援プログラミングの新しい可能性を示していると考えています。