Google Antigravity(第3回)：Browser連携入門・安全に“ブラウザ操作”をエージェントに任せる

🚀 はじめに

この記事では Google Antigravity の「Browser連携」（ブラウザ操作をエージェントに“接続”して、調査・操作・検証を任せる仕組み）を、初学者向けに 手を動かしながら理解できる形でまとめます。

Browser連携を使えるようになると、たとえばこんなことができます。

• UIの再現手順をエージェントに実行させ、スクリーンショット/録画を成果物として残す
• ドキュメントの該当箇所を探して、要点と根拠リンクまで整理
• クリックやフォーム入力のような「人間の操作」を含む確認を、半自動で回す

この記事のゴール

• Browser連携を有効化し、
• example.com を開いてスクショ（成果物）を出せる
• ローカル（または検証）環境のURLを開いて簡単な確認ができる

この記事でわかること

• Browser連携が何か（何が嬉しいか / どんな仕組みか）
• セットアップに必要なツールと理由
• 最短セットアップ手順（動作確認まで）
• 使いどころ（開発/運用の実務ネタ）
• 安全に使うための考え方（Allowlist / 承認フロー）
• ありがちな詰まりポイントと対処

Browser連携とは

ひとことで

エージェントが“実ブラウザ”を操作できるようにする機能です。

「検索して要約する」だけでは解決しづらい、たとえば

• ログインが必要
• クリックで画面遷移する
• フォーム入力が必要
• 画面表示の差分（見た目）を確認したい

といったタスクを、ブラウザ操作込みでやれるようになります。

何が嬉しいのか（開発で効くポイント）

Browser連携の旨味は、単に「ブラウザを開ける」ではなく、

• 成果物（Artifacts）を残せる
  • スクショ / 画面録画 / 操作ログ（どこをクリックしたか）を、後から追える形で残せます
• 手順が“再現可能”になる
  • 「この手順で再現する」→エージェントに実行させて記録、までが一気通貫
• 確認の粒度を上げやすい
  • ドキュメントの根拠を拾う、画面の状態を見て分岐する、などがやりやすい

といった点です。

図1: Antigravity（エージェント）↔ Browser Sub-agent ↔ ブラウザ（拡張）で“実ブラウザ操作”が可能になる。

セットアップ前に：必要なツール（なぜ必要？）

初学者が一番つまずきやすいのが「何を入れれば動くの？」問題です。
Browser連携は、だいたい次の要素が揃っているとスムーズです。

必要なもの（最小）

• Google Antigravity（本体）
  • エージェント実行環境。スキル/ワークフロー/ツール連携のハブ。
• Chrome（またはAntigravityがサポートするブラウザ）
  • Browser連携は、基本的に“ブラウザを操作する”ので、ブラウザ本体が必要です。
• Antigravityのブラウザ拡張（Chrome拡張）
  • エージェントとブラウザをつなぐ「橋渡し」。
  • これがないと、エージェント側がブラウザへ指示を出せません。

重要

• 会社PCなどで「拡張機能のインストールが禁止」されていると、ここが詰まりポイントになりがちです。

あると便利なもの（開発向け）

• パスワードマネージャ（ブラウザのプロファイル管理）
  • “ブラウザにログイン状態が必要”なタスクを回す場合、認証管理が現実的になります。
  • ただし、最初はログイン不要のサイトで検証するのがおすすめ。
• DevToolsの基礎（Console / Network）
  • 不具合調査で、スクショだけでなく console error / network error が効くことがあります。

WSLで開発している人向け（補足）

あなたが「コードはWSL、ブラウザはWindows側」運用の場合、

• WSLで起動したローカルサーバを、Windowsのブラウザから開けるか

が重要です。
多くのケースで http://localhost:<port> で開けますが、フレームワークや起動方法によっては

• サーバが 127.0.0.1 のみにバインドされている
• Windows↔WSL間のポートフォワードが効いていない

などで開けないことがあります。
このあたりは、後半の「ローカルで実機確認」で具体的に確認します。

図2: Antigravity本体・ブラウザ・拡張機能が揃うとBrowser連携が動く。

セットアップ手順（最短で動作確認まで）

ここからは 「インストール → 有効化 → 動作確認」 までを一気にやります。

先に結論：

• Browser連携を使うタスクを投げる
• Antigravityが “Setup” を案内する
• 拡張を入れて許可すればOK

図3: 依頼→Setup→拡張→許可→動作確認、の順で進める。

Step 1. Browser連携を使う依頼を投げる

Antigravityのチャットで、例えばこんな依頼をします。

• 「ブラウザで example.com を開いて、ページタイトルと見出しをメモしてください」

すると、ブラウザ連携が未設定の場合は、
「Browserをセットアップしますか？」のような案内が出るはずです。

図4: Antigravityで依頼を実施(Yahooに接続依頼)

Step 2. セットアップ（Setup）を実行

案内に従って Setup を実行します。

ここでやっていることは大きく2つです。

• ブラウザ拡張のインストール（必要なら）
  　Antigravity Browser Extension - Chrome Web Store
• Antigravity ↔ ブラウザの接続許可

Tips

• 会社PCだと拡張インストールがブロックされることがあります。
  • その場合は「個人端末で検証」→「社内ポリシー対応」をおすすめします。

Step 3. ブラウザ拡張の権限を確認して許可

拡張機能はブラウザを操作するため、一定の権限が必要です。
インストール時に表示される権限内容を見て、問題なければ許可します。

初学者向けメモ

• 権限に不安がある場合は、まず「ログイン不要」「個人情報不要」のサイトで動作確認してから、業務サイトに広げるのが安全です。

図5: Chromeから出た確認画面

Step 4. 動作確認（スクショが出れば成功）

再度、次の依頼をします。

• 「example.com を開いて、スクリーンショットを成果物として出して」

成功すると、

• ブラウザが開く
• 画面操作が走る
• スクリーンショット（Artifacts）が出る

という流れになります。

“スクショが出る”ことが最重要の確認です。
ここまで来たら、Browser連携は動いています。

私はここで以下キャプチャのようなエラーが出ました、、、

図6: ブラウザの起動（CDPポート 9222 への接続）に失敗

以下を参考にしながら設定しました。（先人の知恵、ありがたや）
https://blog.vemi.jp/entry/2025/12/30/153502

最終的にキャプチャは取得出来たのですが、
環境の制約により、画像内の日本語が文字化け（□）して表示されている、、、
（このあたりは追加で設定が必要そう、、、）

図7: 取得出来たキャプチャ（ただし文字化け）

追記
日本語の文字化けも以下記事の内容を設定したら無事に設定できました！(感謝！)
https://zenn.dev/yukarinoki/articles/849c5ce2f0177e

図8: 取得出来たキャプチャ（文字化けも解消！）

実機で確認してみよう（コピペで再現できる）

「記事を見たらすぐ試せる」ように、動作確認用のチェックリストを用意します。

✅ チェック1：外部サイト（example.com）

1. Antigravityに次を依頼
   • 「ブラウザで https://example.com を開き、ページタイトルを教えて。スクショも残して」
2. スクショ（Artifacts）が出ることを確認

✅ チェック2：ローカルHTTPサーバ（最小）

ローカルの画面も開けると、開発の検証が一気に捗ります。

macOS / Linux / WSL

mkdir -p ~/antigravity-browser-check && cd ~/antigravity-browser-check
python3 -m http.server 8000

その後、Antigravityに

• 「ブラウザで http://localhost:8000 を開いて、ページが表示されるか確認して」

と依頼します。

もし開けない場合

• WSLの場合は python3 -m http.server 8000 --bind 0.0.0.0 を試す
• それでもダメな場合はWSL2のミラーリングモードを確認
  C:\Users\<username>\.wslconfig に以下を追加
  [wsl2]
  networkingMode=mirrored
• 会社PCのファイアウォール/ポリシーで localhost への接続が制限されていないか確認

✅ チェック3：スクロール・クリック操作

• 「ページを少しスクロールして、最初の見出しのテキストを抜き出して」

のように依頼し、操作が実行されることを確認します。

どんな用途で使う？（実務ネタ集）

Browser連携は「人間の手作業が残りがちな工程」に刺さります。

図9: 調査・UI確認・手順記録・データ抽出などに効く。

1) ドキュメント調査（根拠付きでまとめる）

• 公式Docの該当箇所を探す
• 設定画面の手順を追う
• 画面キャプチャと一緒に手順書化

Tips：依頼文は「ゴール」と「出力形式」をセットに

• ❌「これ調べて」
• ✅「Aの設定手順を調べて。根拠リンク + 手順を箇条書き + 画面キャプチャ（可能なら）で」

2) UI検証（手順を録画して共有）

• 「この操作でバグが再現する」
• 「このボタンが表示されない」

を、エージェントに操作させて 録画 を成果物として残すと、

• QA/開発の会話が早くなる
• “再現手順のブレ”が減る

というメリットが出ます。

3) 手作業の定型化（運用Runbook + 実行）

• 管理画面での定型チェック
• 監視画面のスクショ取得
• チケット起票のテンプレ化

など、「たまにやるけど面倒」な作業を 半自動にできます。

4) ローカル/検証環境の動作確認（開発と相性が良い）

• localhost の画面が正しく表示されるか
• 特定の導線（A→B→C）が崩れてないか

のような確認に向きます。

図10: コードはWSL、画面確認はブラウザ（Windows）という運用でも、Browser連携が役立つ。

使い方のコツ（初学者が失敗しにくい依頼テンプレ）

Browser連携は「何となくお願い」だと迷子になりやすいです。
次のテンプレが安定します。

テンプレ：ブラウザ操作依頼

目的：何を達成したいか
対象：URL / 対象画面
制約：ログインはしない、破壊操作は禁止、など
出力：結果 + 根拠 + スクショ/録画

例）ドキュメント調査

目的：AntigravityのBrowser連携のセットアップ手順を理解したい
対象：公式ドキュメント（Browser / Chrome extension）
制約：リンク切れや仕様差があり得るので、根拠リンクを必ず添付
出力：手順を箇条書き、注意点、よくあるエラー、根拠リンク

例）UI確認（安全寄り）

目的：ステージング環境で「注文作成」導線が生きているか確認
対象：https://staging.example.com
制約：実データ作成は禁止。入力はダミーのみ。送信前に停止。
出力：手順の結果、問題点、スクショ

セキュリティ / 安全に使うための考え方

Browser連携は便利ですが、強い機能＝扱いを間違えると危ない機能でもあります。
初学者はまず 「安全に試す作法」 を覚えるのが大切です。

図11: ①Allowlistで範囲を絞る ②破壊操作は人が承認 ③機密は入力しない、が基本。

1) 最初は「ログイン不要」で試す

最初の動作確認は

• example.com
• 公開ドキュメント

など、ログイン不要で完結するサイトから始めると安全です。

2) 破壊的操作は“承認あり”に寄せる

• 送信
• 購入
• 削除
• 権限変更

などは、エージェントに“最後までやらせない”設計にします。

Tips

• 「送信直前で止めて、確認を求めて」
  と依頼に入れるだけでも事故率が下がります。

3) 許可するサイトを絞る（Allowlistの考え方）

Browser連携には、

• 許可されたドメインだけアクセスできる

という “Allowlist（許可リスト）” の考え方があります。

初学者は、まず

• 仕事で本当に必要なドメインだけ

に絞るのが無難です。

例

• ✅ docs.google.com / console.cloud.google.com
• ✅ 自社の staging.example.com
• ❌ よく分からない外部サイト

トラブルシュート（よくある詰まりポイント）

Browser連携で詰まりやすいのは、だいたいここです。

1) Setupが出ない / Browserを使ってくれない

• 依頼文に「ブラウザで開いて」と明示する
• 「スクショを成果物として出して」と明示する

2) 拡張機能がインストールできない（会社PC）

• 管理者ポリシーでブロックされている可能性
• まず個人PCで検証 → 社内のIT管理に相談、が現実的です

3) ブラウザは開くが操作が進まない

• ページが重い / ローディングが終わらない
• MFA(多段階認証)やCAPTCHAで止まる

対策

• まず軽いページで成功体験を作る
• 認証が必要なサイトは、手動でログインしてから操作させる（可能なら）

4) ローカルURL（localhost）が開けない

• WSLでサーバを起動している場合：--bind 0.0.0.0 を試す
• 会社PCのセキュリティソフトがローカル接続を制限することもあります

5) 「このURLは許可されていない」と言われる

• Allowlist（許可リスト）に未登録の可能性
• まずはドメインを最小限にして、必要になったら追加、がおすすめ

まとめ

• Browser連携は、エージェントが“実ブラウザ”を操作できるようにする機能
• セットアップは Setup → 拡張 → 許可 → スクショ確認 で完了
• 初学者はまず ログイン不要サイトで動作確認 → 次にローカル/検証環境
• 安全運用は Allowlist / 破壊操作は承認 / 機密を入力しない が基本

---

参考リンク

• Antigravity Browser連携（公式）: https://antigravity.google/docs/browser
• Antigravity Chrome拡張（公式）: https://antigravity.google/docs/chrome-extension