> ## 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/panels)内の**シミュレーター**タブはコンパイル済みプロジェクトを組み込みウェブビューとして実行し、ファイルの変更を自動的に反映し、[BRICKS CLI](/ja/cli) の Chrome DevTools Protocol (CDP) エンドポイントを公開します。

<Note>
  [エディタ](/ja/ctor/reference/editor)タブに未保存の編集があるあいだ、シミュレーターは保存するまでその未保存の編集をライブで反映します。
</Note>

## シミュレーターを開く

どちらかの[パネル](/ja/ctor/reference/panels)の **+**（新しいタブ）メニューから**シミュレーター**タブを追加するか、入力バーの**シミュレーター**ボタン——シミュレーターの実行中はパルスアイコンに切り替わる再生アイコン——をクリックします。タブはバックグラウンドでプロジェクトのコンパイルを開始します。

タブが開くと、CTORはプロジェクトの型チェック（`bun typecheck`）とコンパイル（`bricks ctor compile`）を実行し、`application.json` のステージ（`production`、`beta`、または `development`）を使用してアプリケーションを組み込みウェブビューに読み込みます。

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

## ペインコントロール

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

| ボタン          | 操作                                            |
| ------------ | --------------------------------------------- |
| **Draw**     | 描画モードを切り替え                                    |
| **Save**     | 注釈をスクリーンショットに合成してチャットに添付（描画モードのみ）             |
| **DevTools** | シミュレーターのインスペクタをペインの下部にドッキング                   |
| **依頼**       | 実行中のシミュレーターを CDP エンドポイント経由で検査するよう依頼するプロンプトを挿入 |
| **Refresh**  | ウェブビューをリロード                                   |
| **ポップアウト**   | アプリ内の新しいウィンドウでシミュレーターを開く                      |
| **Close**    | シミュレーターを停止してペインを閉じる（ポップアウトウィンドウのみ）            |

シミュレーターを閉じるには、パネル内のそのタブにある **×** を（ポップアウトウィンドウでは **Close** ボタンを）クリックします。これによりバックエンドが停止します。

## シミュレーターメニュー

**≡** ボタンでシミュレーターペインのメニューを開きます。次の項目が並びます：

* **Viewer** — 実行中アプリケーションのランタイム Data を確認
* **Logs**
* **Debug View**
* **Automations**
* **Mute**
* **Clear Persistent Data**
* **Take Screenshot**
* **Record Events as Automations** — 記録したセッションを [BRICKS Automation](/ja/foundation/automations) に変換（[インタラクションを自動化として記録](#インタラクションを自動化として記録)を参照）
* **Simulator Settings** — どの Bricks と Generators を模擬スタンドインで動かすかを選択（[シミュレートされるハードウェアとモデル](#シミュレートされるハードウェアとモデル)を参照）
* **Compatibility**

## シミュレートされるハードウェアとモデル

デバイスの権限、API キー、大きなモデルのダウンロードなしで実行できるよう、シミュレーターはハードウェア Brick とモデル Generator に軽量なフォールバックを代用します：

* **Camera** — 実際のカメラ映像の代わりに模擬の 3D canvas を表示します。
* **Maps** — 無料の OpenStreetMap タイルを表示するため、地図の API キーは不要です。
* **Thermal Printer** — 模擬のオンスクリーンレシートを表示します。常に模擬です。
* **LLM**、**Reranker**、**Speech-to-Text**、**Text-to-Speech**、**Vector Store** の Generator — 小さなローカルのスタンドインモデルを実行します。

[BRICKS Buttress](/ja/buttress) にオフロードされる Generator は、シミュレーターでは無効になります。

左下のステータスバブルに、有効な模擬項目が **Simulator Settings** リンクとともに一覧表示されます。そのリンクまたは[シミュレーターメニュー](#シミュレーターメニュー)から **Simulator Settings** を開くと、どの部分を模擬で動かすかを制御できます。パネルはトグルを **Bricks** と **Generators** のセクションに分けています——Brick や Generator のチェックを外すとその実際の実装が使われ、**Apply** をクリックします。適用するとシミュレーターがリロードされます。

模擬されたサーマルプリンタの出力は、プロジェクトディレクトリのターミナルから確認できます：

```bash theme={null}
bricks devtools simulator thermal-printer list
bricks devtools simulator thermal-printer print-result -o receipt.png
```

印刷履歴はメモリ内に保持され——プリンタごとに最大 10 件——シミュレーターのリロード時にクリアされます。

## ネットワークセキュリティ

デフォルトでは、シミュレーターは安全でない `http://` と `ws://` のリクエストをブロックします。安全な `https://` と `wss://` のリクエストは許可されます。安全でない接続しか提供しないホストに対してテストするには、プロジェクトレベルの `allowedInsecureHosts` 設定にそのホストを追加してホワイトリストに登録します。

## シミュレーターの DevTools をドッキング

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

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

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

シミュレーターは、差分、エディター、ファイル、ブラウザ、DevTools タブと[パネル](/ja/ctor/reference/panels)を共有します——右パネルと下部パネルのどちらでも同様です。パネルごとに一度に表示されるタブは 1 つだけです——タブバーで切り替えるか、右パネルでは **Cmd+1..9** でも切り替えられます。パネルの端のハンドルをドラッグして、チャットエリアに対するサイズを調整します。

## ライブ再コンパイル

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

* `subspaces/` 下のファイルを保存すると、`bun compile` 経由のデバウンスされた再ビルドがトリガーされます。
* `.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 ではなくプロジェクト内の名前で読めます。
* **Brick Sketch の描画** — 描画は、それが生成するインポート可能な状態として、ひとまとまりの描画ごとに 1 ステップで記録されます。そのため、再生時はストロークごとのノイズの多いステップではなく、描画結果を再現します。

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

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

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

## 描画モード

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

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

パレットから線の色を選び、スライダーで線の太さを設定します。**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 コンポーネントツリーを確認
```

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

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

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

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