> ## 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.

# プレビュー

> 組み込みプレビューペインでBRICKSアプリケーションを実行する

チャットウィンドウ内でBRICKSアプリケーションをプレビューします。[右パネル](/ja/ctor/reference/right-panel)の**プレビュー**タブはコンパイル済みプロジェクトを組み込みウェブビューとして実行し、ファイルの変更を自動的に反映し、[BRICKS CLI](/ja/cli) のChrome DevTools Protocol (CDP) エンドポイントを公開します。

## プレビューを開く

[右パネル](/ja/ctor/reference/right-panel)の **+**（新しいタブ）メニューから**プレビュー**タブを追加します。タブはバックグラウンドでプロジェクトのコンパイルを開始します。

タブが開くと、CTORは `bun typecheck` に続いて `bun compile.ts` を実行し、`application.json` のステージ（`production`、`beta`、または `development`）を使用してアプリケーションを組み込みウェブビューに読み込みます。

<Info>
  プレビューには `bun` のインストールと `PATH` での利用可能性が必要です。
</Info>

## ペインコントロール

タブのツールバーには以下のボタンがあります：

| ボタン          | 操作                         |
| ------------ | -------------------------- |
| **DevTools** | プレビューのインスペクタを下部パネルとしてドッキング |
| **更新**       | ウェブビューをリロード                |
| **ポップアウト**   | アプリ内の新しいウィンドウでプレビューを開く     |

プレビューを閉じるには、[右パネル](/ja/ctor/reference/right-panel)のそのタブにある **×** をクリックします。これによりバックエンドが停止します。

## プレビューの DevTools をドッキング

タブのツールバーで **DevTools** をクリックすると、プレビュー自身の Chrome DevTools インスペクタをタブ下部のサイズ変更可能なパネルとしてドッキングできます。仕切りをドラッグして高さを調整し、もう一度 **DevTools** をクリックすると非表示になります。

このインスペクタはプレビューのローカル CDP サーバーに接続するため、パスコードは不要です。**ローカルデバイス**パネルから開いたデバイスが前面のプロジェクトのプレビューである場合、その DevTools はこのドックに入ります。それ以外のデバイスは、それぞれの [DevTools タブ](/ja/ctor/reference/right-panel#devtools)として開きます。

## 右パネルでのレイアウト

プレビューは、差分、コントローラー、DevTools タブと[右パネル](/ja/ctor/reference/right-panel)を共有します。一度に表示されるタブは 1 つだけです——タブバーまたは **Cmd+1..9** で切り替えます。パネルの左端のハンドルをドラッグして、チャットエリアに対するサイズを調整します。

## ライブ再コンパイル

ペインはプロジェクトの変更を監視します：

* `subspaces/` 下のファイルを保存すると、`bun compile.ts` 経由のデバウンスされた再ビルドがトリガーされます。
* `.bricks/build/application-config.json` の変更は、完全なリロードなしに実行中のウェブビューにプッシュされます。

## ポップアウトウィンドウ

**ポップアウト**をクリックすると、プレビューが独自のフレームレスなアプリ内ウィンドウに分離されます。新しいウィンドウはバックエンドセッションを維持します — チャット側のペインを閉じたり、セッションを切り替えたり、プロジェクトを切り替えても、ポップアウトされたプレビューは停止しません。ポップアウトウィンドウ自体を閉じるとセッションが解放されます。

## エージェント駆動のプレビュー

エージェントはスクリーンショットの取得と [BRICKS Automation](/ja/foundation/automations) テストの実行に**プレビュー**タブと同じプレビューランタイムを使用するため、エージェントが見るものはタブの表示と一致します。スクリーンショットが必要なときにタブが開いていない場合は、チャットの上にタブを被せず、バックグラウンドでプレビューを起動します — このとき入力バーに小さなアクセントドット付きの**プレビュー**インジケーターが表示され、プレビューがバックグラウンドで実行中であることを示します。クリックするとプレビュータブが前面に出ます。

ビジョン対応モデルにはスクリーンショットがインラインで渡され、画像ファイルはプロジェクトにも書き出されるため、非対応モデルでもパスを参照できます。[フォールバック画像認識モデル](/ja/ctor/reference/settings#フォールバック画像認識モデル)を設定すると、CTOR は各スクリーンショットもテキストとして説明するため、ビジョン非対応のモデルでもその内容に基づいて操作できます。

## インタラクションを自動化として記録

実行中のプレビューを操作すると、CTOR は各ステップを記録します。プレビューペインのメニュー（**≡** ボタン）を開き、**Record Events as Automations** をクリックすると、その記録を [BRICKS Automation](/ja/foundation/automations)（E2E テスト）に変換できます。

CTOR はテストを黙って書き上げるのではなく、その自動化の作成を依頼するリクエストをチャット入力に事前入力します — [描画モード](#描画モード) が結果を入力バーに渡すのと同じように、内容を確認してから送信します。リクエストには記録の内容がエージェント向けに記述されます。

* **実際のタイミング** — 各ステップが実行された実際の時刻と、前のステップからの間隔が付与されるため、エージェントは一律の遅延ではなくステップ間の現実的なタイミングを再現できます。
* **名前付きの項目** — 各ステップが参照する Subspace、Brick、Generator、Canvas は、エディタ上のエイリアス（なければタイトル）に解決されるため、リクエストは不透明な id ではなくプロジェクト内の名前で読めます。

送信前にリクエストを編集して、ステップを削除したり並べ替えたりできます。エージェントは bricks-ctor の形式で自動化を記述し、プレビューでコンパイルして実行し、テストが通ることを確認します。

## 複数プロジェクトの同時実行

開いている各プロジェクトはそれぞれ独立したプレビューライフサイクルを保持するため、あるプロジェクトで起動したシミュレータは、別のプロジェクトを操作中も実行し続けます。表示されるプレビューペインは常に 1 つ（前面のプロジェクト）ですが、背景のシミュレータはエージェントによるスクリーンショット取得、CDP インスペクション、ポップアウトウィンドウのために稼働し続けます。

## 描画モード

ペインヘッダーの **Draw** をクリックすると、実行中のプレビューの上に注釈キャンバスがオーバーレイされます。ペインの下部にツールバーが表示され、次のツールを使えます：

| ツール      | 操作                                        |
| -------- | ----------------------------------------- |
| **ペン**   | フリーハンドの線                                  |
| **矢印**   | ドラッグ開始点から離した点までの直線矢印                      |
| **四角形**  | 枠線のボックス                                   |
| **テキスト** | クリックして再編集可能な複数行テキストを配置。既存のテキストをダブルクリックで編集 |
| **消去**   | 図形の上をドラッグして削除                             |

パレットから線の色を選び、スライダーで線の太さを設定します。**Undo** と **Redo** で編集をたどれます。**Cmd/Ctrl+Z** で元に戻し、**Cmd/Ctrl+Shift+Z**（または **Cmd/Ctrl+Y**）でやり直します。**Clear** はすべてを消去します。

プレビューコンテンツの上に直接注釈を付け — ずれている要素を囲んだり、対象範囲をマークしたり、ちょっとしたメモを残したり — した上で、**Save** をクリックするとストロークがプレビューのスクリーンショットに合成され、その単一画像がチャット入力に添付されます。

描画モードはインラインペインとポップアウトプレビューウィンドウの両方で利用できます。ポップアウトウィンドウから保存した画像は、自動的にメインウィンドウのチャット入力へ転送されます。

**Save** は画像添付を生成するため、選択中のチャットモデルがビジョンに対応していない場合は **Draw** ボタンが無効になります — ただし[フォールバック画像認識モデル](/ja/ctor/reference/settings#フォールバック画像認識モデル)を設定している場合は、注釈付きのスクリーンショットがテキストとして説明されるため有効のままです。

## CDPと `bricks devtools`

プレビューの実行中、CTORはCDPサーバーを起動し、プロジェクトディレクトリの `.bricks/devtools.json` に探索情報を書き込みます。[BRICKS CLI](/ja/cli) はこのファイルを読み取り、ターミナルから実行中のプレビューを検査します。

プロジェクトディレクトリ内から：

```bash theme={null}
bricks devtools scan        # ローカルプレビューを自動探索
bricks devtools brick tree  # ブリックコンポーネントツリーを確認
```

完全なサブコマンドリスト（`brick`、`input`、`network`、`runtime`、`screenshot`、`storage`）は `bricks devtools --help` で確認できます。

ペインを閉じると探索ファイルが削除されます。

## セッションの切り替え

別のチャットセッションに切り替えたとき、プレビューペインが他のプロジェクトやセッションに属している場合は自動的に非表示になりますが、基盤のシミュレータは停止**しません**。ペインを所有するプロジェクトとセッションに戻ると再び表示されます。シミュレータの実行が不要になったら、ペインの**閉じる**ボタンで明示的に停止してください。