/sim-preview

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 が使えるデバッグモードで起動される。

シミュレーターがまだ起動していない場合は、先にブートする:

# 利用可能なiPhoneシミュレーターを確認
xcrun simctl list devices available | grep iPhone

# 起動（UDIDを指定）
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 のビルド方法（初回のみ）

バイナリが存在しない場合のビルド手順:

# Theos（未インストールの場合）
git clone --recursive https://github.com/theos/theos.git ~/theos

# TrollVNC クローン
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

# noVNC webclients（オプション）
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` で確認