Anthropic の公式の説明（下の「公式のページ」）を、内容を足さずに読みやすい日本語に書き直したものです。公式の翻訳ではなく、Anthropic が作ったものでもありません。公式は予告なく変わるので、使う前に公式のページもご覧ください。
このページで分かること
- デスクトップアプリの Code の画面で、作っているアプリを Claude が動かし、アプリの中のブラウザー（Browser の枠）に映して確かめる仕組み
- 変更のたびに Claude が自分で確かめる「自動の確認（Auto-verify）」と、その止め方
- 動かし方を決めるファイル
.claude/launch.jsonの主な書き方（起動の命令・ポート・開くアドレス）
先に知っておく言葉
- 開発用サーバー（dev server）：作っているアプリを、自分のパソコンの中だけで動かして見るためのプログラム
- Browser の枠（Browser pane）：デスクトップアプリの中にあるブラウザーの画面
- ポート：パソコンの中で、どのプログラムにつなぐかを分ける番号。
3000など - localhost：自分のパソコン自身を指すアドレス
- 環境変数：プログラムに外から渡す設定の値
- リポジトリ：プロジェクトのファイルと、その変更の記録をまとめたもの
- コミット：変更をひとまとまりとして記録すること
プレビューでできること
- Claude は開発用サーバーを動かし、Browser の枠に開いて、自分の変更を確かめます。画面のある Web アプリだけでなく、画面の無いサーバーのプログラムでも使えます。そのときは、外から呼ぶ入口を試す・サーバーの記録（ログ）を見る・見つけた問題を直す、を繰り返します
- たいていは、Claude がプロジェクトのファイルを書き換えたあとに、自分でサーバーを動かします。いつでも「プレビューして」と指示することもできます
- Browser の枠では、プロジェクトの中の HTML・PDF・画像・動画のファイルも開けます。会話に出たそのファイルの場所（パス）を押すと開きます
Browser の枠でできる操作
- 動いているアプリを、その場で自分で触る
- Claude が自分の変更を確かめる様子を見る（画面の写真を撮る・ページの中身を調べる・ボタンを押す・入力欄を埋める・見つけた問題を直す）
- セッションの道具の帯（ツールバー）にあるサーバーの選択欄から、サーバーを動かす・止める
- 同じ選択欄で Persist sessions を選ぶと、サーバーを動かし直しても、クッキーとローカルストレージ（ブラウザーに残る記録）が消えずに残ります。作っている途中で何度もログインし直さずに済みます
- サーバーの設定を直す・すべてのサーバーをまとめて止める
保存したログインの状態を消すときや、Browser をまったく使わないようにするときは、Settings → Claude Code の切り替えを使います。
自動の確認（Auto-verify）
- 最初からオンです。オンのあいだ、Claude はファイルを書き換えるたびに、画面の写真を撮り、エラーが無いかを見て、変更が動くことを確かめてから返事を終えます
- プロジェクトごとに止められます。
.claude/launch.jsonに"autoVerify": falseと書くか、サーバーの選択欄のメニューから切り替えます - 止めても、プレビューの道具は使えます。確かめてほしいときに、そのつど指示します
動かし方の設定（.claude/launch.json）
- Claude は、プロジェクトに合わせてサーバーの動かし方を自分で見つけ、セッションを始めたときに選んだフォルダの一番上に
.claude/launch.jsonとして残します - 選んだフォルダが基準です。上のフォルダを選んだ場合、その下のフォルダにある別の開発用サーバーは自動では見つかりません。そのフォルダでセッションを始め直すか、設定を自分で足します
- 動かす命令を変えたいとき（
npm run devの代わりにyarn devを使う、ポートを変える、など）は、ファイルを直接直すか、サーバーの選択欄の Edit configuration を押してエディタで開きます - 1つのプロジェクトに、画面の側とデータを返す側（API）のように、いくつものサーバーの設定を並べられます
主な項目は次のとおりです。
name：サーバーの名前（ほかと重ならないもの）runtimeExecutableとruntimeArgs：動かす命令と、その後ろに付ける言葉。npmと["run", "dev"]ならnpm run devになりますport：サーバーが待ち受けるポート。書かなければ3000cwd：動かす場所。プロジェクトの一番上からの位置で、書かなければ一番上env：足す環境変数。launch.jsonはコミットしてリポジトリに入れるファイルです。そのため、パスワードのような秘密の値はここに書かず、ローカルの環境の設定の画面（local environment editor）で渡しますprogramとargs：nodeで直接動かすプログラムのファイルと、その後ろに付ける言葉autoPort：使いたいポートがふさがっていたときの扱い（下）url：localhost:ポート ↗以外のアドレスで開きたいときに書く（下）
ポートがふさがっていたとき（autoPort）
true：空いているポートを Claude が探して使います。Claude が別のポートを選んだときは、そのポートの番号をPORTという環境変数でサーバーに渡しますfalse：エラーで止まります- 書かないとき（最初の設定）：そのポートでなければいけないかを Claude があなたに聞き、答えを残します
別のアドレスで開く（url）
- 書かなければ、
localhost:ポート ↗を開きます - 自分のパソコンのアドレス（
localhost・*.localhost・127.0.0.1・::1）は、そのまま開きます。ただし安全のため、ポートの番号まででとめ、その後ろのページの場所や?から始まる部分は書けません。ポートは、その設定のportとそろえます。合わないときは、直し方を添えた設定のエラーが出ます - 特定のページを見たいときは、プレビューが開いてから、そのページに移るよう Claude に指示します
- それ以外のアドレスは、初めて開くときに、デスクトップアプリがあなたに許可を求めます。Always allow を選ぶと、そのサイトでは次から聞かれません。組織が外のサイトを制限していれば、その決まりに従います
- 自分で動かしているサーバーを映すだけなら、動かす命令を書かずに
urlだけを書きます。Claude はサーバーを動かさず、動いているものにつなぎます urlはhttpかhttpsで始め、ユーザー名やパスワードを入れてはいけません
公式が挙げている使いどころ
公式のページに書いてある向き・使い方だけを並べます。
- アプリが特別な起動の命令を使うとき：
.claude/launch.jsonを自分のやり方に合わせて直す urlを書く場面：自分のパソコンの中でも https が要るサーバー、*.localhostの形のアドレスを使うアプリ、別のページを経由してログインするアプリautoPortの選び方：たいていの開発用サーバーはtrue向き。ログインの戻り先（OAuth のコールバック）や、許可するアクセス元の一覧（CORS の許可リスト）のために、決まったポートでなければいけないときはfalseruntimeExecutableとprogramの使い分け：npm などの道具を通して動かすときはruntimeExecutable、ひとつのプログラムのファイルをnodeで直接動かすときはprogram
あわせて読む
公式のページ
- Use Claude Code Desktop の「Preview your app」「Configure preview servers」（英語・原文）code.claude.com ↗
- 同じページの公式の日本語版 code.claude.com ↗
- Glossary（用語集。上の「先に知っておく言葉」を確かめるのに使いました）code.claude.com ↗
確認メモ：2026年10月1日に、公式のデスクトップアプリのページ（英語・日本語）を開いて、プレビューでできること・自動の確認の止め方・.claude/launch.json の項目・ポートとアドレスの決まりを突き合わせました。公式のページに更新日の表示は無いため、この日付は「このサイトが確かめた日」です。公式のページは約8万5千字あり、このページではアプリのプレビューの所だけを扱いました。Browser の枠で外のサイトを見る使い方（サイトごとの許可・Chrome 拡張機能との使い分け・組織での制限）、設定ファイルの例（Next.js・いくつものサーバー・Node.js のプログラム）、cwd の ${workspaceFolder} の書き方は、このページには載せていません。「開発用サーバー」「Browser の枠」「ポート」「localhost」「環境変数」「リポジトリ」「コミット」の言い換えは公式の用語集に無く、ふつうの意味を一言で添えたものです。公式の英語版と日本語版で、この所の内容に違いはありませんでした。