ブログ/ポートと VNC

Claude Code・Codex の成果をスマホで確認する：ポートアクセスと VNC

2026-07-23

ターミナルで見えるのはエージェントの報告です。レイアウトを直した、diff は問題ない、ビルドは通った。ページや画面そのものは見えません。PC ならブラウザやシミュレータを開いて確認するところを、この記事ではスマホから行う方法を紹介します。前提として、エージェントは tmux で動いていて、完了時に通知が届く状態とします。

ServerCC にはそのための機能が 2 つあり、どちらも既存の SSH 接続を使います。ポートアクセスは、サーバーでリッスン中の HTTP サービスを SSH トンネル経由でアプリ内ブラウザに開きます。VNC はそのマシンの画面を表示します。

ポートアクセス：デプロイせずに dev サーバーを開く

ポートアクセスは、サーバーがリッスンしている TCP ポートをプロセス名付きで一覧にします。5173 は node、8000 は python といった具合です。タップすると ServerCC が SSH ローカルフォワードを張り、アプリ内ブラウザでページを開きます。サービスはサーバーの localhost にバインドしたままで構いません。ファイアウォールの変更、リバースプロキシ、ngrok の URL は不要で、スマホからそのマシンに SSH できれば十分です。

このブラウザはレイアウト確認向けです。ページ表示でモバイルサイトとデスクトップサイトを切り替えられ、アプリの他の画面は縦向き専用ですが、ここでは横向きにできます。エージェントが変更を入れたら再読み込みで反映されます。専用の SSH 接続で動くので、重いページを読み込んでもターミナルセッションは止まりません。トンネルはプレーンな http:// のみ対応で、dev サーバーは通常これで配信しています。

VNC：Web ページ以外の成果物

URL を持たない成果物もあります。シミュレータ内の iOS アプリ、デスクトップアプリ、matplotlib のウィンドウ、devtools を開いたブラウザなど。これらは内蔵の VNC クライアントで確認します。macOS 画面共有（ARD）や標準的な VNC サーバーに、SSH トンネル、ダイレクト、Tailscale のいずれかで接続します。

ピンチで実ピクセルまで拡大でき、タップはクリックになります。キーボード上部のアクセサリ行で、タッチキーボードにないキーを補えます。Esc、Tab、矢印キー、ショートカット用に固定できる Ctrl / Shift / Alt / ⌘ です。画質は 2 モードあり、色深度と帯域を切り替えられるので、モバイル回線でも使えます。

例：iOS の変更をシミュレータで確認する

自宅の Mac で iOS アプリを開発していて、自分は外出中です。Claude Code が設定画面を作り直し、サマリーでは「すべて揃っています」と報告しています。ターミナルでリビルド、シミュレータへの再インストール、起動を頼むと、Mac 側で実行されるのは次のコマンドです：

xcodebuild -scheme MyApp \
  -destination 'platform=iOS Simulator,name=iPhone 16' build
xcrun simctl install booted path/to/MyApp.app
xcrun simctl launch booted com.example.myapp

それから VNC を開きます。Mac の画面が表示され、中央にシミュレータがあります。ナビゲーションバーを拡大して実ピクセルで余白を確認し、実機と同じようにタップしてフローを一通り操作し、検索フィールドに文字を入力してキーボード表示時のレイアウトを見ます。padding がずれた行があれば、ターミナルに戻って Claude にどの行かを伝え、リビルドを待ってから VNC に戻ります。ターミナルと VNC は同じアプリ内の画面です。

例：デプロイせずにローカルの Web UI を確認する

Claude が Web UI を作っていて、dev サーバーは :5173 で動き、開発マシンの localhost にバインドされています。何もデプロイしておらず、ステージング URL もありません。ポートアクセスを開くと、一覧に node · 5173 があります。タップすると、トンネル経由でサイトがアプリ内ブラウザに表示されます。

ページは実際のスマホ幅で表示され、タッチで操作できるので、モバイルのブレークポイントをそのまま確認できます。次にページ表示をデスクトップサイトに切り替え、横向きにしてワイドレイアウトを確認します。エージェントが次の変更を入れたら再読み込みします。サイトは外部に公開されず、通信はすべて SSH 接続を通ります。

どちらを使うか

ブラウザで表示できるものはポートアクセスを使います。テキストが鮮明で、スクロールもネイティブです。シミュレータ、ネイティブアプリ、devtools など画面上にしかないものは VNC を使います。詳細はドキュメントのポートアクセスと VNC リモートデスクトップにあります。ワークフロー全体の準備は Claude Code を iPhone でを参照してください。