AntiGravity Browser 完全ガイド¶
概要¶
AntiGravity IDEには、Chromiumベースの統合ブラウザ機能が搭載されており、browser_subagentツールを使用してWebページの自動操作が可能です。このガイドでは、セットアップから実践的な使用例まで、包括的に解説します。
目次¶
セットアップ¶
前提条件¶
AntiGravity browserは内部でPlaywrightを使用しています。初回使用時に自動インストールされますが、環境によっては手動セットアップが必要な場合があります。
環境変数の確認¶
Windows環境では、以下の環境変数が設定されている必要があります:
Playwrightのセットアップ¶
もしブラウザ起動時にエラーが発生する場合は、以下の手順で手動セットアップを行います:
# Node.jsがインストールされている場合
npx playwright install chromium
# または、Pythonがインストールされている場合
pip install playwright
playwright install chromium
基本的な使い方¶
browser_subagentツールの構造¶
AntiGravity browserはbrowser_subagentツールを通じて操作します。このツールは以下の3つのパラメータを受け取ります:
基本的な例¶
// Googleのホームページを開いてスクリーンショットを撮る
{
"TaskName": "Google Homepage Screenshot",
"Task": `
1. Navigate to https://www.google.com
2. Wait for the page to fully load
3. Take a screenshot
4. Return confirmation
`,
"RecordingName": "google_homepage"
}
主要ユースケース¶
1. Webページの閲覧・スクリーンショット取得¶
特定のWebページを開いて、視覚的な確認やスクリーンショットを取得します。
使用例: ニュースサイトのスクリーンショット¶
{
"TaskName": "Capture News Site",
"Task": `
Navigate to https://news.yahoo.co.jp and capture a screenshot of the homepage.
Steps:
1. Open the URL
2. Wait for all images to load (wait 3 seconds)
3. Take a full-page screenshot
4. Return the screenshot path
`,
"RecordingName": "yahoo_news_screenshot"
}
使用例: 複数ページのスクリーンショット¶
{
"TaskName": "Multiple Page Screenshots",
"Task": `
Capture screenshots of multiple pages:
1. Navigate to https://www.google.com, wait 2s, screenshot
2. Navigate to https://github.com, wait 2s, screenshot
3. Navigate to https://stackoverflow.com, wait 2s, screenshot
4. Return a summary of all captured screenshots
`,
"RecordingName": "multi_page_screenshots"
}
2. Web操作の自動化¶
フォーム入力、ボタンクリック、ページ遷移などの操作を自動化します。
使用例: Google検索の自動化¶
{
"TaskName": "Automated Google Search",
"Task": `
Perform a Google search for "AntiGravity IDE" and capture the results.
Steps:
1. Navigate to https://www.google.com
2. Find the search input box (name="q" or aria-label="検索")
3. Type "AntiGravity IDE" into the search box
4. Press Enter or click the search button
5. Wait for results to load (wait for element with id="search")
6. Take a screenshot of the search results
7. Return the number of results found (if visible)
`,
"RecordingName": "google_search_automation"
}
使用例: フォーム入力の自動化¶
{
"TaskName": "Form Automation Demo",
"Task": `
Demonstrate form filling on a test website.
Steps:
1. Navigate to https://www.w3schools.com/html/html_forms.asp
2. Find the first name input field
3. Type "Taro" into the first name field
4. Find the last name input field
5. Type "Yamada" into the last name field
6. Take a screenshot showing the filled form
7. Return confirmation
`,
"RecordingName": "form_filling_demo"
}
3. Webスクレイピング¶
Webページから特定の情報を抽出します。
使用例: ニュース見出しの抽出¶
{
"TaskName": "Scrape News Headlines",
"Task": `
Extract the top news headlines from Yahoo News Japan.
Steps:
1. Navigate to https://news.yahoo.co.jp
2. Wait for the page to fully load
3. Find all headline elements (typically <h1>, <h2>, or elements with class containing "headline" or "title")
4. Extract the text content of the first 10 headlines
5. Return a list of the headlines
`,
"RecordingName": "news_scraping"
}
使用例: 価格情報の抽出¶
{
"TaskName": "Scrape Product Prices",
"Task": `
Extract product information from an e-commerce site.
Steps:
1. Navigate to https://www.amazon.co.jp
2. Search for "ノートパソコン" in the search box
3. Wait for search results to load
4. Extract the first 5 product titles and prices
5. Return the data in a structured format (product name and price)
`,
"RecordingName": "price_scraping"
}
4. UIテスト¶
Webアプリケーションの動作確認やユーザーフローのテストを実行します。
使用例: ログインフローのテスト¶
{
"TaskName": "Login Flow Test",
"Task": `
Test the login flow on a demo website.
Steps:
1. Navigate to https://the-internet.herokuapp.com/login
2. Find the username input field
3. Type "tomsmith" into the username field
4. Find the password input field
5. Type "SuperSecretPassword!" into the password field
6. Click the login button
7. Wait for navigation to complete
8. Verify that the page shows "You logged into a secure area!"
9. Take a screenshot of the success page
10. Return test result (pass/fail)
`,
"RecordingName": "login_flow_test"
}
使用例: ナビゲーションテスト¶
{
"TaskName": "Navigation Test",
"Task": `
Test navigation between multiple pages.
Steps:
1. Navigate to https://the-internet.herokuapp.com
2. Take a screenshot of the homepage
3. Click on "Form Authentication" link
4. Verify the URL changed to /login
5. Take a screenshot
6. Click the browser back button
7. Verify we're back on the homepage
8. Take a screenshot
9. Return navigation test results
`,
"RecordingName": "navigation_test"
}
Chrome連携¶
AntiGravity内蔵ブラウザ vs Chrome¶
AntiGravity browserは独自のChromiumインスタンスを使用しますが、既存のChromeプロファイルと連携することも可能です。
| 機能 | AntiGravity内蔵 | Chrome連携 |
|---|---|---|
| 自動化 | ✅ 完全対応 | ✅ 対応 |
| ログイン状態 | ❌ 独立 | ✅ 共有可能 |
| 拡張機能 | ❌ 制限あり | ✅ 利用可能 |
| 録画機能 | ✅ 自動 | ✅ 自動 |
| セットアップ | ✅ 簡単 | ⚠️ 設定必要 |
Chromeプロファイルの使用方法¶
現在のAntiGravity browser実装では、デフォルトで独立したプロファイルを使用します。既存のChromeプロファイルを使用したい場合は、以下の方法があります:
方法1: Cookie/ローカルストレージのエクスポート・インポート¶
- Chromeでログイン状態を確認
- Developer Tools → Application → Cookies/Local Storage からデータをエクスポート
- AntiGravity browserで同じデータをインポート
方法2: 手動ログイン自動化¶
ログインが必要なサイトの場合、browser_subagentでログイン操作を自動化します:
{
"TaskName": "Automated Login",
"Task": `
Log in to the service and perform actions.
Steps:
1. Navigate to https://example.com/login
2. Enter username: "your_username"
3. Enter password: "your_password"
4. Click login button
5. Wait for successful login
6. Perform desired actions
7. Return results
`,
"RecordingName": "automated_login"
}
トラブルシューティング¶
エラー: $HOME environment variable is not set¶
原因: Windows環境で$HOME変数が設定されていない
解決方法:
-
システム環境変数を確認:
-
必要に応じて
HOME環境変数を設定: -
AntiGravity IDEを再起動
エラー: failed to install playwright¶
原因: Playwrightのインストールに失敗
解決方法:
-
Node.jsがインストールされているか確認:
-
手動でPlaywrightをインストール:
-
または、Pythonを使用:
ブラウザが起動しない¶
チェックリスト:
- インターネット接続が有効か
- ファイアウォールがブラウザをブロックしていないか
- ディスク容量が十分にあるか (Chromiumは約300MB必要)
- AntiGravity IDEを管理者権限で実行しているか
ページが正しく読み込まれない¶
対処法:
-
待機時間を増やす:
-
特定の要素が表示されるまで待つ:
-
JavaScriptの実行を待つ:
ベストプラクティス¶
1. 明確なタスク指示¶
❌ 悪い例:
✅ 良い例:
Steps:
1. Navigate to https://www.google.com
2. Wait for search box to be visible
3. Type "search query" into the search box
4. Press Enter
5. Wait for results page to load
6. Return the number of results
2. 適切な待機時間¶
動的コンテンツが多いページでは、十分な待機時間を設定します:
3. エラーハンドリング¶
予期しないエラーに対応できるよう、条件分岐を含めます:
4. RecordingNameの命名規則¶
- 小文字とアンダースコアを使用
- 内容を簡潔に表現
- 最大3単語
// Good examples
"google_search"
"login_flow_test"
"price_scraping"
// Bad examples
"MyGoogleSearch"
"test-login-flow"
"scraping_prices_from_amazon_website"
録画とスクリーンショット¶
自動保存¶
すべてのブラウザ操作は自動的にWebP形式の動画として記録され、以下のディレクトリに保存されます:
スクリーンショットの取得¶
タスク内で明示的にスクリーンショットを要求します:
実践例: 総合デモ¶
以下は、4つの主要ユースケースを組み合わせた総合的な例です:
{
"TaskName": "Comprehensive Browser Demo",
"Task": `
Demonstrate all major browser capabilities in one workflow.
1. WEB VIEWING & SCREENSHOT:
- Navigate to https://github.com
- Take a screenshot of the homepage
2. WEB AUTOMATION:
- Click on the search button (/)
- Type "antigravity ide" into the search box
- Press Enter
- Wait for search results
3. WEB SCRAPING:
- Extract the names of the first 5 repositories from search results
- Extract their star counts
4. UI TESTING:
- Verify that search results are displayed
- Verify that each result has a title and description
- Take a final screenshot
Return a structured report with:
- Screenshots taken
- Repository names and star counts
- Test results (pass/fail for each verification)
`,
"RecordingName": "comprehensive_demo"
}
まとめ¶
AntiGravity browserは、Web自動化、スクレイピング、テストなど、幅広い用途に活用できる強力なツールです。このガイドを参考に、効率的なWeb操作の自動化を実現してください。
次のステップ¶
- 環境のセットアップを完了する
- 簡単な例から試してみる
- 実際のユースケースに応用する
- トラブルシューティングガイドを参照する
参考リンク¶
最終更新: 2026-02-05
バージョン: 1.0