Simulator Preview (Expo Device Hub)
MacのiOSシミュレーターを Expo Device Hub → Tailscale Serve (HTTPS) → スマホのブラウザ で配信する。Expoプロジェクトは不要。Flutterアプリをそのまま確認・操作できる。
既定はH.264・30fps・最大1000px・2.5Mbps。Device Hub 0.10.1でccpocketの配信を確認し、ユーザーから旧VNC方式より快適との評価を得た設定。TrollVNC / noVNCを既定に戻さない。
1. シミュレーターとアプリ
bashxcrun simctl list devices booted
対象アプリが既に動いていれば再利用する。起動が必要な場合やhot reloadには mobile-automation を使う。テスト用Bridgeが必要なら8766を使い、本番8765を停止・再起動しない。
前提はMac + Xcode、Node.js/npm、MacとスマホのTailscale接続。CoreSimulatorへのアクセスがサンドボックスで拒否された場合は、シミュレーターの故障と判断せず適切な実行権限で再確認する。
2. Device Hubを起動
既存のDevice HubとTailscale Serveの状態を確認し、目的の配信が動いていれば再利用する。
bashlsof -nP -iTCP:3400 -sTCP:LISTEN tailscale serve status
新規起動には以下を使う。スクリプトはDevice Hubのみを起動し、アプリ起動やTailscale設定は別に行う。
bashbash .claude/skills/sim-preview/scripts/sim-preview.sh
- ローカル待受は
127.0.0.1:3400。npm経由で検証済みバージョンを取得し、リポジトリの依存関係は変更しない。 - 長時間実行できるツールセッションで起動し、停止用のセッションID / PIDとログを控える。
- 3400が使用中ならプロセスを勝手に停止せず、既存配信を確認するか
SIM_PREVIEW_PORT=3401などの空きポートを選ぶ。起動ログの実際のポートを確認する。 - 更新時は対象バージョンの
--helpを確認する。配信設定の変更はブラウザの「Stream options」からも試せる。
3. Tailscale内限定のHTTPSを設定
リモートのH.264 / WebRTCにはHTTPSが必要。 http://<Tailscale IP>:3400 ではMJPEGへフォールバックする。localhostでH.264が動くだけではスマホ向け検証の完了にならない。
tailscale serve status に今回のHubを指す設定があれば再利用する。未設定なら、起動ログのポートに合わせて設定する。
bashtailscale serve --bg --https=443 http://127.0.0.1:3400
- 443に別サービスの設定がある場合は上書きせず、未使用のHTTPSポート（例:
--https=8443）を選ぶ。 - Serveが未有効なら、CLIが出力した有効化URLを案内する。ログインが必要ならユーザーに操作を依頼し、完了後に上記コマンドを再実行する。有効化だけでは転送設定が作成されないことがある。
- 出力された
https://<MacのDNS名>.ts.net[:port]/を使う。ホスト名を固定値で書かない。 tailscaleがPATHにない環境では/Applications/Tailscale.app/Contents/MacOS/Tailscaleを確認する。- インターネット公開の
tailscale funnelは使用しない。
4. 配信確認とユーザーへの案内
実際のHTTPS URLをブラウザで開き、以下を確認する。
- 対象シミュレーターが
Liveになり、ccpocketの映像が表示される。 - 「Stream options」でHTTP codecが H.264、Video FPSが 30 FPS、Max sizeが 1000 px、Video bitrateが 2.5 Mbps になっている（意図して調整した場合はその値）。
スマホのTailscaleをONにして開くHTTPSリンクを案内する。ユーザーにタップ・スクロール・文字入力の体感を試してもらい、Mac側の表示確認とスマホ側の確認結果を区別して報告する。遅延が残る場合は同画面で解像度やビットレートを調整して比較する。
初回のページ遷移がタイムアウトしても、再度画面状態を確認すると Live になっている場合がある。MJPEGになる場合はHTTPS URLとコーデック設定を確認する。
5. 継続・終了
プレビュー依頼中はDevice HubとHTTPS転送を残す。コード変更後のhot reloadはFlutter側で行い、配信画面で結果を確認する。
停止を依頼されたら、自分が起動したHubのセッションまたはPIDだけを停止する。今回追加したServe設定も不要になった場合のみ、対象HTTPSポートの転送を解除する。
bash# 今回443に追加した転送を終了する場合。別ポートなら置き換える。 tailscale serve --https=443 off
既存の共有設定を巻き込む tailscale serve reset やプロセス名による一括killは使わない。
参照
- Expo Device Hub: standalone起動と配信方式。
- 起動オプション:
npm exec --yes --package=expo-device-hub@0.10.1 -- expo-device-hub --help
