> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt
> Use this file to discover all available pages before exploring further.

# ブラウザ

> パネルで Web ページを開き、エージェントに操作させる

ブラウザタブは[パネル](/ja/ctor/reference/panels)内で実際の Web ページ——[BRICKS Controller](/ja/controller) の Web インターフェースや入力した任意の URL——を実行します。必要なだけ開くことができ、どちらのパネルにも分けて配置できます。エージェントは認可された Chrome DevTools Protocol (CDP) ブリッジを通じて、開いているページを操作できます。

ブラウザタブは、以前の単一の Controller タブを置き換えます。Controller を開くとそれを指すブラウザタブが開き、その隣で他のサイトも同時に開けます。

## ブラウザタブを開く

どちらかの[パネル](/ja/ctor/reference/panels)の **+**（新しいタブ）メニューから：

* **新しいブラウザタブ**——空白のタブを開きます。空の状態には「コントローラーを開くか、上に URL を入力してください。」と表示されます。
* **コントローラーを開く**——使用中のアプリの [BRICKS Controller](/ja/controller) を指すブラウザタブを開き、その stage と workspace にスコープします（`beta` アプリは beta Controller、`production` アプリは production Controller を開きます）。

ブラウザタブはプロジェクトセッションとメインチャットセッションの両方で利用できます。

チャット内のリンクをアプリ内で開くこともできます。エージェントが生成した `http(s)` リンクをクリックすると、確認ダイアログに **Open in App** が表示され、OS のブラウザではなくブラウザタブとして開けます。

## ツールバー

各ブラウザタブにはナビゲーションツールバーがあります：

| コントロール                 | 動作                                             |
| ---------------------- | ---------------------------------------------- |
| **戻る** / **進む**        | タブの履歴を移動                                       |
| **再読み込み** / **読み込み停止** | ページを再読み込み、または進行中の読み込みを停止                       |
| URL バー                 | URL を入力して **Enter** で移動（プレースホルダーは **URL を入力**） |
| **ブラウザ操作**（**⋯**）      | アクションメニューを開く——**ページ内を検索**と**ブラウザデータを消去**       |

### ページ内を検索

**ブラウザ操作**メニューから**ページ内を検索**を開いて、現在のページを検索します。**前の一致**と**次の一致**で結果を順に確認し、**検索を閉じる**で検索バーを閉じます。

### ブラウザデータを消去

**ブラウザデータを消去**は、キャッシュ、Cookie、ローカルストレージ、IndexedDB、Service Worker を消去します。すべてのブラウザタブは 1 つのセッションを共有するため、消去はすべてのタブに影響します——開いているタブは再読み込みされ、サインアウトされる場合があります。CTOR は先に確認を求めます。

## タブストリップ

開いているブラウザタブはタブバーに表示され、それぞれページのファビコンを表示します（読み込み中やファビコンのないページでは地球アイコンを表示）。組み込みタブとは異なり、ブラウザタブは重複排除されません——複数を同時に開けます。ドラッグで並べ替え、**×** で閉じられます。

ページが新しいウィンドウで開くリンク（`window.open` や `target="_blank"`）は、`http(s)` の URL に限り、別のブラウザタブとして開きます。

## ページの操作

ページを右クリックするとコンテキストメニューが表示されます：

| 操作                           | 内容                                  |
| ---------------------------- | ----------------------------------- |
| **スクリーンショットを撮る**             | ページのスクリーンショットをクリップボードにコピー           |
| **スクリーンショットを撮る → Agent に質問** | ページをキャプチャしてチャット入力に添付し、エージェントに質問できます |
| **DevTools を開く**             | タブのネイティブ Chrome DevTools インスペクタを開く  |

<Note>
  ネイティブ DevTools とエージェントの CDP ブリッジは、タブごとに排他です。タブで DevTools を開いている間、そのタブは [エージェントブリッジ](#エージェントによるブラウザ自動化)から外れ、DevTools を閉じるまで戻りません。
</Note>

## エージェントによるブラウザ自動化

エージェントは、ブラウザタブで開いているページを操作できます——クリック、入力、フォーム入力、スクリーンショット、ページ状態の読み取り——認可されたローカル CDP ブリッジを通じて行います。CTOR は接続をエージェントの Bash 環境に自動で注入するため、エージェントはあなたの設定なしで接続します。

組み込みの **browser** スキルが、[`agent-browser`](https://www.npmjs.com/package/agent-browser) CLI でページを操作する方法をエージェントに教えます。エージェントが使えるよう、この CLI をインストールしてください：

```bash theme={null}
bun add -g agent-browser
```

グローバルインストールしていない場合は、エージェントは `bunx agent-browser` でオンデマンド実行することもできます。

エージェントと作業する際は次の点に注意してください：

* 操作できるのは**開いている**ブラウザタブのみで、新しい空白タブにはまだページがありません——先にタブを開いて URL を入力してください。
* 見ているタブを操作するのがタスクそのものであれば問題ありませんが、無関係な Web 作業には、エージェントはあなたのページを乗っ取らず、自身のスタンドアロンブラウザを使います。
* エージェントはブリッジ経由で新しいブラウザタブを開けません——新しいページが必要なときは、依頼するか自分で開いてください。
* タブでネイティブ **DevTools** を開くと、DevTools を閉じるまでそのタブはブリッジから外れます。

[サンドボックスモード](/ja/ctor/reference/sandbox#信頼済みプログラム)でも、`agent-browser` は `bricks devtools` と同じく、必要な直接アクセス権で実行されます。**browser** のような組み込みスキルの仕組みについては[スキル](/ja/ctor/reference/skills)を参照してください。