Claude Code DesktopアプリプレビューでWebアプリを検証する

Claude Code DesktopのアプリプレビューはBrowserペインで動く

Claude Code DesktopのCodeタブは、コードを編集するたびに動作を自分で確認します。devサーバーを起動し、Browserペインでアプリを開き、スクリーンショットを撮ってDOM(ページの構造)を調べ、必要ならフォームに入力してボタンをクリックする。この一連の検証を、フロントエンドのWebアプリだけでなくバックエンドのAPIサーバーでも行います。APIエンドポイントを叩き、サーバーログを見て、見つかった問題をその場で直す動きまで組み込まれています。

多くの場合、ファイルを編集した時点でClaudeが自動的にサーバーを起動します。手動でプレビューを頼むこともでき、Browserペインからはサーバーの起動・停止、設定の編集、全サーバーの一括停止も操作できます。

プレビューできるもの — devサーバーだけでなく静的ファイルも

Browserペインが表示できるのはdevサーバーだけではありません。プロジェクト内の静的HTMLファイル、PDF、画像、動画も同じペインで開けます。チャット内でHTML・PDF・画像・動画のパスをクリックすると、そのままBrowserペインに表示されます。ログイン状態を保ったまま開発を続けたいときは、サーバードロップダウンでPersist sessions(セッションを保持)を選ぶと、サーバーを再起動してもCookieとlocalStorageが引き継がれ、開発中に毎回ログインし直す手間がなくなります。

Browserペインはタブ切り替え式のブラウザーでもあり、実行中のアプリの隣でドキュメントやIssueトラッカーを開いておけます。macOSはCmd+Shift+B、WindowsはCtrl+Shift+Bで呼び出せます。ここで使うブラウザープロファイルは普段使いのブラウザーとは別物で、保存済みのログインや履歴を持ちません。ログイン状態を引き継いでClaudeに操作させたい場合は、BrowserペインではなくClaude Chrome拡張機能でできることの対象になります。

外部サイトを開くときは個別に承認する

Browserペインでdevサーバー以外の外部サイトを開くと、Claudeが最初にそのページを操作する時点で承認カードが表示されます。選べるのはその場限りで許可する「Allow once」、その端末でそのサイトを常に許可するAlways allow(Settingsから取り消し可能)、拒否する「Deny」の3つです。承認はサイトごとに必要で、サブドメインが変わればそのつど別扱いになります。一方、ローカルのdevサーバーやプロジェクト内のファイルは承認の対象外なので、Auto-verifyはプロンプトなしで動き続けます。

承認済みのサイトであっても、Claudeは購入操作・アカウント作成・CAPTCHA突破を利用者の指示なしには行いません。書き込み系の操作(クリックや入力)は、どの権限モードでもauto modeと同じ安全性分類器がチェックし、疑わしいと判定されればモードにかかわらず改めて許可を求められます。Auto modeとBypass permissions以外の権限モードでは、新しいサイトへ移動する前にドメインの許可リストも確認されます。

組織で外部サイトへのアクセスを制限したい場合、管理設定の browserExternalPageTools を使うとClaudeのツールだけを外部ページで無効化でき、利用者自身の閲覧は残せます。外部サイトへの遷移そのものを止めたい場合は disableBrowserExternalNavigation を有効にします。こちらはローカルのdevサーバーやファイルプレビューには影響しません。

Auto-verify — Claudeが自分の変更を自動で検証する仕組み

autoVerify が有効な間、Claudeはファイルを編集するたびに変更を自動で検証します。スクリーンショットを撮り、エラーが出ていないかを確認し、動作を確かめてから応答を完了する流れです。既定でオンになっています。

無効にしたい場合はプロジェクトの .claude/launch.json に "autoVerify": false を追加するか、サーバードロップダウンメニューから切り替えます。

{
  "version": "0.0.1",
  "autoVerify": false,
  "configurations": [
    {
      "name": "my-app",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "port": 3000
    }
  ]
}

無効化してもプレビュー用のツール自体は使えるままです。「編集のたびに自動で」という部分だけがオフになるので、必要なタイミングでClaudeに検証を頼む使い方に切り替わります。

launch.jsonで起動コマンドをカスタマイズする

Claudeはセッション開始時に選んだフォルダーのdevサーバー構成を自動で検出し、フォルダー直下の .claude/launch.json に設定を保存します。プレビューはこのフォルダーを作業ディレクトリとするため、親フォルダーを選んでセッションを始めた場合、サブフォルダー側のdevサーバーは自動検出されません。サブフォルダーのサーバーを扱うには、そのフォルダーで直接セッションを始めるか、設定を手動で追加します。

npm run dev の代わりに yarn dev を使いたい、ポート番号を変えたいといったカスタマイズは、ファイルを直接編集するか、サーバードロップダウンのEdit configurationからコードエディターで開いて行います。ファイルはコメント付きJSONに対応しています。

{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "my-app",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "port": 3000
    }
  ]
}

configurations は配列なので、フロントエンドとAPIサーバーのように複数のサーバーを1つのプロジェクトで定義できます。

設定フィールドの一覧

configurations の各項目には次のフィールドを指定できます。

runtimeExecutable はパッケージマネージャー経由でサーバーを起動する場合に使い、単体のNode.jsスクリプトを node で直接動かしたいときは代わりに program を使います。ローカルHTTPSが必要なサーバーや *.localhost サブドメインを使うアプリでは url を指定します。ローカルホスト向けの url はパスやクエリを含められず、ポート番号も port フィールドと一致させる必要がある一方、外部アドレスへの url は初回アクセス時に許可を求められます。すでに自分で起動しているサーバーにプレビューだけ接続したい場合は、コマンドを指定せず url だけを設定すれば、Claudeは新しいサーバーを起動せずに接続します。

シークレットを渡す用途では、env フィールドではなくローカルセッションの環境変数エディターを使います。設定ファイル自体がリポジトリにコミットされる前提のためです。

ポートが競合したときの挙動

autoPort フィールドは、指定したポートがすでに使われていたときの挙動を決めます。

Claudeが別のポートを割り当てた場合、割り当てたポート番号は PORT 環境変数としてサーバーに渡されます。モノレポでフロントエンドとAPIサーバーを両方定義する場合、フロントエンドは autoPort: true で空きポートに逃がし、OAuthコールバックを使うAPIサーバーだけ autoPort: false でポートを固定する、という使い分けが典型的です。

よくあるつまずき

サブフォルダーのdevサーバーが自動検出されない。親フォルダーを選んでセッションを始めると、プレビューの作業ディレクトリはそのフォルダーになり、サブフォルダー内のサーバー構成は対象外になります。該当のサブフォルダーで直接セッションを始めるか、launch.json に手動で設定を追加します。

url を指定したのに設定エラーになる。ローカルホスト向けの url はパスやクエリを含められず、ポート番号も port フィールドと一致させる必要があります。これに反する設定は、該当のURLと修正方法を示すエラーとして報告されます。

フォームやログイン状態が再起動のたびに消える。サーバードロップダウンでPersist sessionsを有効にしていない場合、サーバー再起動のたびにCookieとlocalStorageがリセットされます。開発中にログインし直したくない場合はこの設定を有効にします。

外部サイトを開こうとすると毎回許可を求められる。サブドメインごとに個別の承認が必要な仕様です。同じサイトで繰り返し聞かれたくない場合は、プロンプトでAlways allowを選びます(取り消しはSettingsから)。

まとめ

Claude Code DesktopのBrowserペインは、devサーバーの起動から検証まで自動でこなすプレビュー環境です。ほとんどのプロジェクトは自動検出された .claude/launch.json のままで使えますが、起動コマンドやポート、複数サーバーの構成を細かく制御したい場合は同ファイルを直接編集します。既定でオンの autoVerify は編集のたびにClaude自身が動作確認する仕組みで、確認頻度を自分でコントロールしたい場合だけオフにします。ポート競合の扱いは autoPort で固定・自動割り当て・都度確認の3通りから選べます。Desktopアプリ全体の機能比較はClaude Code Desktopとは、Codeタブの基本操作はClaude Desktopとはにまとめています。

よくある質問

.claude/launch.json は手動で作成する必要がありますか

ほとんどの場合は不要です。Claudeがセッション開始時にプロジェクトのdevサーバー構成を自動検出して作成します。カスタマイズしたい場合だけ手動で編集します。

env フィールドにAPIキーなどのシークレットを書いても大丈夫ですか

推奨されません。launch.json はリポジトリにコミットされる前提のファイルです。シークレットを渡したい場合はローカルセッションの環境変数エディターを使います。

複数のdevサーバーを同時にプレビューできますか

できます。configurations 配列に複数のエントリーを定義すれば、フロントエンドとAPIサーバーのように別々のサーバーをそれぞれ個別の設定で起動できます。

自分ですでに起動しているサーバーをプレビューに使えますか

使えます。コマンドを指定せず url だけを設定すると、Claudeは新しいサーバーを起動せずに指定したアドレスへ接続します。