実現できること
🏠 家での開発シーン
リビングのソファで
- 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支援プログラミングの新しい可能性を示していると考えています。