Claude Code や Codex が作ったものを実際に見る：スマホからのポートアクセスと VNC

2026-07-23

スマホから Claude Code や Codex を動かすこと自体は、もう難しくありません。SSH で繋ぎ、実行を tmux に置き、終わったら通知を受け取る。ターミナルだけでは今も解決しないのが、結果の確認です。エージェントはレイアウトを直したと報告し、diff はもっともらしく、ビルドは緑。でも「見た目が正しいか」は別の問題で、PC ならブラウザやシミュレータをちらっと見るところを、素の SSH クライアントには見るものがなく、モデルの言葉を信じるしかありません。

ServerCC には「見る」ための道具が2つあり、どちらもすでに張ってある SSH 接続の上で動きます。ポートアクセスは、サーバーでリッスン中の HTTP サービスを SSH トンネル経由でアプリ内ブラウザに開きます。VNC は、そのマシンの画面そのものを見せてくれます。この2つで、エージェントの成果物はほぼカバーできます。

ポートアクセス：デプロイせずに 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 へ。ターミナルとデスクトップは同じアプリの中なので、このループはスーパーのレジ待ちの間に一周できます。

例：何も公開せずに Web 開発を進める

もう一つのよくあるケース。Claude が Web UI を作っていて、dev サーバーは :5173、開発マシンの localhost にバインドされている。何もデプロイしておらず、自分に送れるステージング URL も存在しない。ポートアクセスを開くと、一覧にはもう node · 5173 が並んでいます。タップすれば、トンネル越しにサイトがアプリ内ブラウザに描画されます。

ここでのモバイルブレークポイントの確認は、仕組みからして正直です — 本物のスマホ幅のビューポートと本物のタッチターゲットで見ているのであって、狭く縮めたデスクトップウィンドウではありません。次にページ表示をデスクトップサイトに切り替え、横向きにしてワイドレイアウトを確認。エージェントが次の変更を入れたら、再読み込み。サイトは終始プライベートのままで、ネットワークに触れたのは SSH 接続だけです。

どちらをいつ使うか

ブラウザで描画できるものはポートアクセスで — テキストは鮮明、スクロールはネイティブ、モバイル確認も本物です。それ以外のすべて — シミュレータ、ネイティブアプリ、devtools、画面の上にしか存在しないもの — は VNC で。詳細はドキュメントのポートアクセスと VNC リモートデスクトップへ。ワークフローをゼロから組むなら Claude Code を iPhone でからどうぞ。