ブラウザの使用
VJSP は高度なブラウザ自動化機能を提供し、IDE 内から直接 Web サイトとやり取りできます。この機能により、Web アプリケーションのテスト、ブラウザタスクの自動化、スクリーンショットの取得などがすべて開発環境を離れることなく行えます。
ⓘ モデル要件
VJSP でのブラウザ使用には、高度なエージェント対応モデルが必要です。
ブラウザ使用の仕組み
デフォルトでは、VJSP は以下のような組み込みブラウザを使用します：
- Web サイトの閲覧を VJSP に依頼すると自動的に起動
- Web ページのスクリーンショットを取得
- Web ページ上の要素とやり取り可能
- バックグラウンドで静かに動作
これらすべてが IDE 内で直接行われるため、追加設定は不要です。
ブラウザの使い方
典型的なブラウザ操作は以下の流れになります：
- VJSP に Web サイトの閲覧を依頼
- VJSP がブラウザを起動し、スクリーンショットを表示
- 追加アクション（クリック、入力、スクロールなど）を依頼
- 操作完了後に VJSP がブラウザを閉じる
例：
ブラウザを開いて、私たちの Web サイトをチェックしてください。私のサイト https://www.vjsp.net が正しく表示されているか確認できますか？http://localhost:3000 を開き、ページの最下部までスクロールして、フッターのコンテンツが正しくレンダリングされているか確認してください。ブラウザアクションの仕組み
browser_action ツールはブラウザインスタンスを制御し、各アクションの実行後にスクリーンショットとコンソールログを返します。これにより、各操作の結果を確認できます。
主な特徴：
- 各ブラウザセッションは
launchで開始し、closeで終了する必要があります - 1 回のメッセージにつき、1 つのブラウザアクションしか実行できません
- ブラウザがアクティブな間は他のツールは使用できません
- 次のアクションを送信する前に、レスポンス（スクリーンショットとログ）を待つ必要があります
利用可能なブラウザアクション
| アクション | 説明 | 使用タイミング |
|---|---|---|
launch | 指定された URL をブラウザで開く | 新しいブラウザセッションを開始 |
click | 指定座標をクリック | ボタンやリンクなどとやり取り |
type | 現在フォーカスされている要素にテキストを入力 | フォームや検索ボックスに入力 |
scroll_down | 1 ページ分下にスクロール | 折りたたまれた下部のコンテンツを表示 |
scroll_up | 1 ページ分上にスクロール | 以前のコンテンツに戻る |
close | ブラウザを閉じる | ブラウザセッションを終了 |
ブラウザ使用の設定
ⓘ デフォルトブラウザ設定
- ブラウザツールを有効化: 有効
- ビューポートサイズ: 小型デスクトップ (900x600)
- スクリーンショット品質: 75%
- リモートブラウザ接続を使用: 無効
設定へのアクセス方法
VJSP でブラウザ／コンピュータ使用設定を変更するには：
歯車アイコン ⚙️ をクリック → 「ブラウザ／コンピュータ使用」 を選択して設定を開く
ブラウザ使用の有効化／無効化
目的: VJSP が Puppeteer 制御ブラウザを使って Web サイトとやり取りできるかどうかを切り替えるメイントグル。
この設定を変更するには：
「ブラウザ／コンピュータ使用」設定画面で 「ブラウザツールを有効化」 チェックボックスをオンまたはオフにする
ビューポートサイズ
目的: VJSP が使用するブラウザセッションの解像度を決定。
トレードオフ: 値が高いほど大きなビューポートが得られますが、トークン消費量も増加します。
この設定を変更するには：
- 「ブラウザ／コンピュータ使用」設定画面の 「ビューポートサイズ」 のドロップダウンをクリック
- 以下のいずれかを選択：
- 大型デスクトップ (1280x800)
- 小型デスクトップ (900x600) – デフォルト
- タブレット (768x1024)
- モバイル (360x640)
- 希望の解像度を選択。
スクリーンショット品質
目的: ブラウザスクリーンショットの WebP 圧縮品質を制御。
トレードオフ: 値が高いほど鮮明なスクリーンショットが得られますが、トークン消費量も増加します。
この設定を変更するには：
- 「ブラウザ／コンピュータ使用」設定画面の 「スクリーンショット品質」 の下にあるスライダーを調整
- 1～100% の範囲で値を設定（デフォルトは 75%）
- 高い値はより鮮明なスクリーンショットを生成しますが、その分トークン消費量が増えます：
- 40–50%: テキスト主体のシンプルなサイトに適しています
- 60–70%: 一般的なブラウジング用途に最適
- 80%以上: 視覚的な細部が重要な場合に使用
リモートブラウザ接続
目的: 組み込みブラウザではなく、既存の Chrome ブラウザに VJSP を接続。
メリット:
- コンテナ環境やリモート開発ワークフローに対応
- ブラウザ使用間で認証済みセッションを維持
- 繰り返しのログイン手順を省略
- 特定の拡張機能を含むカスタムブラウザプロファイルを利用可能
要件: Chrome がリモートデバッグを有効にして起動していること。
この機能を有効にするには：
- 「ブラウザ／コンピュータ使用」設定画面で 「リモートブラウザ接続を使用」 チェックボックスをオン
- 「接続をテスト」 をクリックして確認
主なユースケース
- DevContainers: コンテナ化された VS Code からホストの Chrome ブラウザに接続
- リモート開発: ローカルの Chrome をリモート VS Code サーバーと連携
- カスタム Chrome プロファイル: 特定の拡張機能や設定を含むプロファイルを活用
可視化された Chrome ウィンドウへの接続
可視化された Chrome ウィンドウに接続することで、VJSP の操作をリアルタイムで観察できます：
macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug --no-first-runWindows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir=C:\chrome-debug --no-first-runLinux
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug --no-first-run