Google Stitch（MCP）で作った HTML をローカル保存し、Antigravity 内の自作ブラウザ（唐揚げブラウザ支援機能）で編集する

1. この記事でやること（Karaage Browser と Stitch、Antigravity 内で完結）

Karaage Browser は、筆者が用意した「HTML 編集支援」用の自作ツールです。ローカルで http.server を立て、Antigravity 標準の Simple Browser で開くと、iframe 内に表示した HTML の要素を選択して「Copy Element Data」でコピーできます。その内容をチャットに貼って「ここを白く・大きくして」と指示すれば、編集まで Antigravity 内で完結します。Google Stitch（MCP）で作った HTML は、一度ローカルに保存すれば同じように Karaage Browser で開いて編集できます。

2. フォルダ構成

brief035/karaage-browser/：index.html（メイン UI）、script.js / style.css、sample.html（初期表示）、Launch_Karaage.ps1（サーバ起動用）。

2.1 カレントと分析対象の位置

サーバのルート＝Launch_Karaage.ps1 を実行したカレント（通常は karaage-browser）。「二つ目のアドレス」で指定できるのは、このルートからの相対パスで届くファイルだけ。例：

別ツリーのファイルは、サーバを上位で起動するか、コピーを karaage-browser 内に置く。

2.2 Launch_Karaage.ps1 と Python サーバ

スクリプトの役割（一行）： Python の有無を確認し、なければインストールを案内、あればカレントで簡易 HTTP サーバ（ポート 8000）を起動する。要するに PowerShell でゴリゴリにサーバを立てるためのスクリプトです。

ダウンロード：Launch_Karaage.ps1（右クリックで保存またはリンク先を保存）

Python 未導入のとき：スクリプト内で winget によるインストールを案内します。手動で入れたい場合は Python 公式ダウンロード からインストーラーを取得してください。

処理の流れ：Python の有無を Get-Command で確認 → なければ winget でインストール案内。ある場合は次のコマンドでサーバ起動（ルート＝カレント）。

キー待ちで Stop-Process して終了。Python の http.server は標準ライブラリのみで、カレントをドキュメントルートとして配信する。

3. 手順

次の4ステップで、Karaage Browser を開き、分析したい HTML を表示します。

図：karaage-browser ディレクトリに移動した状態。ここで .\Launch_Karaage.ps1 を実行してサーバを起動する。

図1：ステップ2まで終えたときのターミナル（クリックで拡大）

図2：Ctrl+Shift+P で「Simple Browser: Show」を選ぶ（クリックで拡大）

図3：Simple Browser で Karaage Browser を表示した状態（クリックで拡大）

• 一つ目（Simple Browser のアドレス欄） … 画面上部、ブラウザタブのすぐ下にある URL 欄です。ここには http://localhost:8000/index.html が入ったままにしておきます。Karaage Browser そのものを開くためのアドレスなので、通常は変更しません。
• 二つ目（Karaage Browser の中の URL バー） … 図3の画面のなかにある、検索アイコンの横の入力欄です。ここに「iframe の中に表示したい HTML ファイル」を指定します。初期値は sample.html。別のファイルを見たいときは、次のように相対パスで入力して Enter を押してください。
  ../index.html（brief035） ../../brief034/index.html（前回記事）

編集・分析の対象にするのは、二つ目のアドレスで開いた HTML です。一つ目は「Karaage Browser を開くため」、二つ目は「その中でどの HTML を表示するか」の指定だと覚えるとわかりやすいです。

図4：赤枠の2か所が「一つ目」と「二つ目」のアドレス（クリックで拡大）

4. 要素選択と Copy Element Data

動画のとおり、矢印ボタン（要素選択）をオン → 要素をホバーでハイライト → クリックで確定 → 「Copy Element Data」で要素データがクリップボードへ。Chrome と違い、ページ内の単クリックではコピーできない。必ず選択モード（矢印ボタンON）にしてから要素を選ぶ。クリップボードにコピーされた内容を Antigravity チャットに貼れば AI に渡せる。

図5：構成要素をコピーしてチャットに貼り付け、編集を指示（クリックで拡大）

5. 注意点・運用のポイント

押さえておくこと：

1. karaage-browser をプロジェクト内にコピーする … 使いたいプロジェクトの適当な場所に karaage-browser フォルダごとコピーする。
2. そのフォルダでサーバを立てる … コピーした karaage-browser をカレントにして .\Launch_Karaage.ps1 を実行する。
3. 編集対象の HTML をこのフォルダ以下に配置する … 選択・編集したい HTML は、サーバを立てたフォルダ（karaage-browser）の直下か、その中に作ったサブフォルダに置く。そうすれば「二つ目のアドレス」で相対パス指定して開ける。

• iframe で開ける（選択できる）のは、サーバを立てたフォルダ以下で配信されている HTML のみ。別のフォルダや外部 URL は対象外。
• サーバ終了：Launch_Karaage.ps1 のウィンドウで「Press any key...」のあとキーを押す。

補足：Stitch で生成した HTML のダウンロード