| name | sim-preview |
| description | iOSシミュレーターでアプリをビルド・起動し、TrollVNC経由でiPhoneからリモートプレビューできるようにする。実装の確認をユーザーに依頼するとき、シミュレータープレビュー、VNCプレビュー、実機確認と言われたとき、UIの変更結果を見せたいときに使用する。 |
Simulator Preview (TrollVNC)
iOSシミュレーターでアプリを起動し、TrollVNC でリモートプレビュー環境を提供する。
ユーザーは iPhone の VNC Viewer アプリ（RealVNC Viewer 推奨）から Tailscale 経由で接続し、シミュレーター画面をリアルタイムで確認・操作できる。
ワークフロー概要
iPhone (ユーザー)
├── ccpocket で Claude Code に指示
├── RealVNC Viewer でシミュレーター画面を確認
└── 指示 → 変更 → hot reload → 目視確認 のループ
手順
1. アプリをビルド・起動
dart-mcp の launch_app でシミュレーターにアプリを起動する。
hot reload が使えるデバッグモードで起動される。
シミュレーターがまだ起動していない場合は、先にブートする:
xcrun simctl list devices available | grep iPhone
xcrun simctl boot <UDID>
起動済みのシミュレーターを確認:
xcrun simctl list devices booted
dart-mcp でアプリを起動:
- root: プロジェクトの
apps/mobile ディレクトリ
- device に booted なシミュレーターの UDID を指定
2. TrollVNC 起動（スクリプト）
bash .claude/skills/sim-preview/scripts/sim-preview.sh
スクリプトが以下を行う:
- シミュレーターの起動確認（未起動なら自動ブート）
- trollvncserver バイナリをシミュレーターに配置
- VNC サーバー起動（ポート 5901、スケール 0.75、ナチュラルスクロール、サーバーサイドカーソル）
- Tailscale IP を検出して接続情報を出力
出力例:
SIMULATOR: <UDID>
VNC_PORT: 5901
LOCAL_VNC: vnc://127.0.0.1:5901
TAILSCALE_VNC: vnc://<tailscale-ip>:5901
NOVNC_URL: http://<tailscale-ip>:5801/novnc/vnc_lite.html?...
3. ユーザーへの案内
スクリプト出力の TAILSCALE_VNC を使って、以下の情報をユーザーに伝える:
- VNC 接続先:
TAILSCALE_VNC のアドレスとポート
- 推奨アプリ: RealVNC Viewer（無料、スワイプ操作が自然）
- 操作方法:
- タップ: 1本指タップ
- スワイプ: 1本指ドラッグ
- ホームに戻る: マウスモードで2本指タップ（右クリック）
- スクロール: 2本指スクロール
- noVNC（ブラウザ）:
NOVNC_URL でも接続可能だが、アプリの方が操作性が良い
4. コード変更 → 確認ループ
コード変更後は dart-mcp の hot_reload でシミュレーターに即時反映される。
ユーザーは VNC Viewer で変化をリアルタイムに確認できる。
前提条件
~/bin/trollvncserver: TrollVNC シミュレーター用バイナリ（ビルド済み）- Tailscale: Mac と iPhone の両方で接続済み
- RealVNC Viewer: iPhone にインストール済み
TrollVNC のビルド方法（初回のみ）
バイナリが存在しない場合のビルド手順:
git clone --recursive https://github.com/theos/theos.git ~/theos
git clone --depth 1 https://github.com/OwnGoalStudio/TrollVNC.git /tmp/TrollVNC
cd /tmp/TrollVNC && THEOS=~/theos make THEOS_DEVICE_SIMULATOR=1
mkdir -p ~/bin
cp /tmp/TrollVNC/.theos/obj/iphone_simulator/debug/trollvncserver ~/bin/
chmod +x ~/bin/trollvncserver
mkdir -p ~/bin/trollvnc-webclients
cp -R /tmp/TrollVNC/layout/usr/share/trollvnc/webclients/* ~/bin/trollvnc-webclients/
トラブルシュート
- VNC 接続できない: macOS ファイアウォールで trollvncserver の接続を許可する
- 画面が映らない:
cat /tmp/trollvnc-sim-preview.log でログ確認
- 既存の VNC が残っている:
pkill -f trollvncserver で停止してから再実行
- シミュレーターが見つからない:
xcrun simctl list devices available で確認
