plan-viewer の構築

スマホから Claude Code を音声操作して開発してるけど、 Claude が提案するplan（設計書）が、ターミナル（黒い画面）上のテキストだと小さくて読みにくい。

しかも技術用語だらけで意味がわからない。今までは毎回「HTMLで説明ページ作って → surge（外部の公開サービス）にアップして」と手動で頼んでいたけど、毎回5ステップの手作業が必要で面倒だった。

🏗️ 何をしたのか

1 ローカルHTTPサーバー

Mac の中にウェブサーバー（サイトを見せるためのプログラム）を常駐させた。 surge という外部サービスへのアップロードが不要になり、 Mac に保存した瞬間にスマホで見える。 tailscale（自分のデバイスだけを繋ぐプライベートネットワーク）経由だから 外部には一切公開されない。

2 自動ゲート（hook）

Claude が「plan完成！承認して」と言おうとした時に、「待って、先にHTMLを作りなさい」と自動で止める仕組み。 HTMLが作られるまで先に進めないから、作り忘れが構造的に不可能。

3 運用ルール + スキル

Claude への指示書にルールを追加し、HTML生成用のスキル（手順書）も作成。 Zenn（技術記事サイト）のダークテーマデザインを採用して、 読みやすさ最優先のHTMLを毎回自動生成する。

📊 作ったファイル一覧

plan-viewer/	HTMLの置き場所。ここに保存すればスマホで見える
plan-html-gate.sh	自動ゲート。HTML未生成ならplan承認をブロック
LaunchAgent	Mac起動時にHTTPサーバーを自動で立ち上げる設定
SKILL.md	HTML生成のデザインルール・テンプレート定義
settings.json	hook（自動ゲート）の登録
CLAUDE.md	plan-viewer運用ルールの定義

💡 ポイント

🔒 セキュリティ: tailscale ネットワーク内だけで見える。インターネットには公開されない。surge（外部サービス）を使わなくなったのでより安全に。

📱 使い方: スマホで http://100.67.41.1:8765/ をブックマークするだけ。以降はブックマーク1タップで最新のplanが読める。

🔄 汎用性: plan 以外にも「スマホで確認してもらいたいもの」は何でもここに置ける。設計図、進捗レポートなど。

📋 plan-viewer の構築