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

# パネル

> 差分、シミュレーター、Config Editor、ファイル、ブラウザタブ、ターミナル、デバイス、デバイスの DevTools のための 2 つのタブ式ドック——右パネルと下部パネル

CTOR には 2 つのタブ式ドックがあります。ウィンドウの右端に沿って伸びる**右パネル**と、チャットと右パネルの下でウィンドウ全幅に広がる**下部パネル**です。どちらも同じ種類のタブ——[差分ビュー](/ja/ctor/reference/diff-view)、[シミュレーター](/ja/ctor/reference/simulator)、[Config Editor](/ja/ctor/reference/editor)、[ファイルビューア](/ja/ctor/reference/file-viewer)、[BRICKS Controller](/ja/controller) または任意の Web ページを開ける[ブラウザタブ](/ja/ctor/reference/browser)、ターミナル、ワークスペースのデバイス、デバイスの [DevTools](/ja/foundation/local-debugging)——をホストするため、ウィンドウに合わせて自由に配置し、複数を同時に表示しておけます。

## パネルを開く

上部バーの**右パネル**または**下部パネル**をクリックします。各ボタンはパネルの開閉にかかわらず常に同じ位置に固定されています——**右パネル**は右上隅、**下部パネル**はその左隣です。CTOR は各パネルの開閉状態を個別に記憶し、次回アプリを起動したときにその状態を復元します。

パネルを開くと、そこにすでにあるタブが表示されます。どちらのパネルにもまだタブが開かれていない場合は、開ける項目を一覧にした開始ページが表示されるので、いずれかを選ぶとそこに読み込まれます。下部パネルには例外があります——他に何もホストされていない状態で初めて開くと、開始ページの代わりに[ターミナル](#ターミナル)タブが直接作成されます。

## タブ

| タブ           | 表示内容                             | 利用できる条件                        |
| ------------ | -------------------------------- | ------------------------------ |
| **差分**       | `git diff` のコミットされていない変更         | プロジェクトが Git リポジトリ内にある          |
| **シミュレーター**  | 組み込みウェブビュー内のコンパイル済みアプリ           | プロジェクトが開いている                   |
| **エディター**    | プロジェクトに接続された視覚的な Config Editor   | プロジェクトが開いている（BRICKS CLI 2.25+） |
| **ファイル**     | プロジェクトのファイルツリーと、そこから開いたファイル      | プロジェクトが開いている                   |
| **デバイス**     | ローカルネットワークスキャンと照合されたワークスペースのデバイス | 常時——プロジェクトまたはメインチャット           |
| **ブラウザ**     | BRICKS Controller または任意の Web ページ | 常時——プロジェクトまたはメインチャット           |
| **DevTools** | デバイスの Chrome DevTools インスペクタ     | **ローカルデバイス**パネルから開く            |
| **ターミナル**    | インタラクティブなシェル                     | 常時——プロジェクトまたはメインチャット           |

差分、シミュレーター、エディター、ファイル、デバイス、および各デバイスの DevTools タブはシングルトンです——両方のパネルを通じて、それぞれ一度に 1 つのコピーしか存在しません。ブラウザとターミナルのタブはシングルトンではありません——どちらも好きなだけ開けます。[パネル間でタブを移動](#パネル間でタブを移動)を参照してください。

### 差分

**差分**タブはプロジェクトのコミットされていない変更を表示し、現在の追加行数と削除行数のバッジ（`+` / `−`）を備えています。表示モードとファイルごとの操作については[差分ビューリファレンス](/ja/ctor/reference/diff-view)を参照してください。

### シミュレーター

**シミュレーター**タブはコンパイル済みプロジェクトを組み込みウェブビューとして実行し、Chrome DevTools Protocol (CDP) エンドポイントを公開します。ツールバーには、シミュレーター自身のインスペクタをドッキングする **DevTools** トグルがあります。ペインの操作全般については[シミュレーターリファレンス](/ja/ctor/reference/simulator)を参照してください。

### エディター

**エディター**タブは、開いているプロジェクトに接続された視覚的な Config Editor を埋め込みます。保存すると、編集内容がプロジェクトのソースにコンパイルされ、コミットされます。編集ワークフロー全般については [Config Editor リファレンス](/ja/ctor/reference/editor)を参照してください。

### ファイル

**ファイル**タブはプロジェクトのファイルツリーを開きます。そこから開いた各ファイルは、隣に独自のタブとして表示されます。ツリー、プレビュー、検索、外部エディタへの引き渡しについては[ファイルビューアリファレンス](/ja/ctor/reference/file-viewer)を参照してください。

### デバイス

**+**（新しいタブ）メニューから**デバイス**タブを追加するか、[ローカルデバイス](/ja/ctor/guide/agent-usage#ローカルデバイス)ダイアログのフッターにある**デバイスパネルを開く**をクリックします——どちらもデフォルトで下部パネルに開きます。プロジェクトセッションとメインチャットの両方で使用でき、プロジェクトを開いている必要はなく、ローカルデバイスダイアログが使うのと同じローカルネットワークスキャンと照合したワークスペースのデバイスを一覧表示します。

デバイスは**オンライン**と**オフライン**のグループに分かれ（5 分以内に応答があればオンラインとみなされます）、それぞれのグループに件数が表示されます。各行の概要にはタイプ、実行中のアプリケーション、バージョンが表示されます。展開すると、一意 ID、最終応答時刻、モード（プラットフォーム——iOS、iPadOS、Android、Android TV、macOS、tvOS、Windows、Linux、または Virtual Device）、画面解像度、メモリとディスクの使用量、そしてローカルで一致したデバイスの場合は LAN アドレスが表示されます。

* **ローカル**——そのデバイスが、クラウド経由だけでなく、現在お使いのネットワーク上でも直接到達可能であることを示します。
* **CDP**——ローカルで一致したデバイスがデバッグ用エンドポイントを公開している場合に表示され、**DevTools を開く**ボタンが有効になります。これはローカルデバイスダイアログと同じ[DevTools タブ](#devtools)を開きます。
* **更新**——そのデバイスに利用可能な BRICKS Foundation の更新があることを示します。

デバイスがオンラインの間は、**再読み込み**または**キャッシュを消去**——[BRICKS Foundation 自身のアプリケーション更新](/ja/foundation/launch-applications#アプリケーションを更新する)や[キャッシュのクリア](/ja/foundation/launch-applications#キャッシュをクリアする)と同じ操作です——を行うことも、**スクリーンショット**をインラインプレビューとして撮影することもできます（ワークスペースでメディアワークスペースが有効になっている必要があります）。デバイスがオフラインの間は、これらの操作と DevTools を開く操作は利用できません。

リストは 30 秒ごとに、ローカルスキャンは 60 秒ごとに更新されますが、これは**デバイス**タブがそのパネル内でアクティブなタブである間だけです。

#### ダッシュボード表示

ツールバーの**リスト** / **ダッシュボード**トグルでデバイスの表示方法を切り替えられます。選択した表示モードは CTOR が記憶し、次回も引き継がれます。

**ダッシュボード**は行の一覧をスクリーンショットカードのグリッドに置き換えます。グループ分けは**オンライン**と**オフライン**のままです。各カードには最新のスクリーンショット、デバイス名、**ローカル**と **CDP** のバッジ、そして画面解像度と撮影からの経過時間を示すキャプションが表示されます。カードにカーソルを合わせると撮影ボタンが現れ、CDP デバイスの場合は **DevTools を開く**も表示されます。オフラインのデバイスは淡色表示になり、オフラインになってからの経過時間が表示され、操作は行えません。

**ダッシュボード**に切り替えると、CTOR はオンラインのデバイスをすべて 1 回撮影します。デバイス一覧が変化したときにも撮影し直します。トグルの隣にある**自動更新**ドロップダウンでは、グリッド全体を一定間隔で撮影し直せます——オフ、10s、30s（デフォルト）、60s——ツールバーの更新ボタンからは任意のタイミングで撮影できます。リストの更新と同様に、自動更新は**デバイス**タブがアクティブな間だけ実行されます。撮影はキューに入れて 1 台ずつ処理されるため、大規模なワークスペースでも API が過負荷になりません。

**CDP** を公開しているデバイスは、ローカルのデバッグ接続から直接撮影されます——高速で、メディアワークスペースも不要です。これらのカードには **LIVE** バッジが付きます。それ以外のデバイスは、リスト表示の**スクリーンショット**操作と同じメディアワークスペース経由の方法にフォールバックし、バッジには撮影からの経過時間が表示されます。更新間隔の 2 倍を超えると、バッジは黄色に変わります。

### ブラウザ

**ブラウザ**タブはパネル内で Web ページを実行します——[BRICKS Controller](/ja/controller) を開くか、任意の URL を入力します。複数を同時に開くことができ、どちらのパネルにも分けて配置できます。エージェントは認可された CDP ブリッジを通じてそれらを操作できます。ツールバー、ページ内検索、スクリーンショット、エージェント自動化については[ブラウザリファレンス](/ja/ctor/reference/browser)を参照してください。

**+**（新しいタブ）メニューから追加します。**新しいブラウザタブ**は空白のタブを開き、**コントローラーを開く**は使用中のアプリと stage の Controller をブラウザタブで開きます。

### DevTools

**ローカルデバイス**パネルからデバイスの Chrome DevTools インスペクタを開きます——[ローカルデバイス](/ja/ctor/guide/agent-usage#ローカルデバイス)を参照してください。各デバイスはそれぞれの **DevTools** タブとして開き、デバイス名をタイトルとして、ウェブビュー内に `devtools://` インスペクタをホストします。

DevTools タブは組み込みタブとは異なる動作をします：

* **デバイスごとに重複排除**——デバイスを再び開くとそのタブが再利用され、接続が更新されます（たとえば再認証した後）。
* **永続的**——現在のプロジェクトではなく物理デバイスを追跡するため、プロジェクトやセッションを切り替えても開いたままになります。
* **ポップアウト**——タブバーの**ウィンドウで DevTools を開く**をクリックすると、インスペクタを独立したウィンドウに移動できます。この操作はタブを閉じ、従来の独立ウィンドウの動作に戻します。

<Note>
  検査するデバイスが前面のプロジェクトの実行中のプレビューである場合、**DevTools** ボタンは別のタブを開く代わりに、インスペクタを**シミュレーター**タブ内にドッキングします。[シミュレーターの DevTools をドッキング](/ja/ctor/reference/simulator#シミュレーターの-devtools-をドッキング)を参照してください。
</Note>

### ターミナル

**ターミナル**タブはインタラクティブなシェルを実行します——システムのデフォルトシェル、または[設定したカスタムシェル](/ja/ctor/reference/settings#ターミナルシェル)です。プロジェクトセッションとメインチャットの両方で使用でき、プロジェクトではプロジェクトのルートディレクトリを起点とします。

**+**（新しいタブ）メニューから追加できます。他のすべてのタブの後に表示されます——または、下部パネルを初めて開くと自動的に 1 つ作成されます（[パネルを開く](#パネルを開く)を参照）。各ターミナルは独立したシェルです。タブを閉じるとそのシェルは確認なしですぐに終了します。コマンドが実行中でも同様です。

セッションを切り替えたり、別のパネルにドラッグしたり、後で戻ってきたりしても、ターミナルは実行され続けます——同じシェルが再接続され、再起動はされません。フォントは[外観設定](/ja/ctor/reference/settings#フォント)の**コードフォント**と**コードフォントサイズ**に従い、即座に反映されます。カラーテーマはタブの作成時に固定され、後でアプリのライト/ダークテーマを切り替えても変わりません。

## タブの管理

* **タブを追加**——タブバーの **+**（新しいタブ）をクリックしてタブを選びます。**新しいブラウザタブ**と**コントローラーを開く**はブラウザタブを開き、**シミュレーター**タブを開くとプロジェクトのコンパイルが始まり、**差分**を開くと現在の変更が読み込まれます。
* **タブを閉じる**——タブの **×** をクリックします。**差分**または**シミュレーター**を閉じるとそのバックエンドも停止し、**DevTools** タブを閉じるとそのインスペクタが切断され、**ブラウザ**タブを閉じるとそのページが閉じます。
* **タブを並べ替え**——同じパネルのタブバー内でタブを左右にドラッグして位置を変更します。ドロップインジケーターが配置先を示します。
* **キーボードでタブを切り替え**——**Cmd+1** から **Cmd+9**（Windows と Linux では **Ctrl**）を押すと、**右パネル**内でタブの順序に従って 1 番目から 9 番目のタブに移動します。このショートカットは下部パネルには適用されません。

開いているタブが収まりきらない場合、パネルのタブ行は水平にスクロールしてすべてのタブにアクセスできるようにします。パネルが狭いか低いときは、アクティブなタブのツールバーがボタンをアイコンに折り畳んで場所を確保します。

## パネル間でタブを移動

タブをそのパネルのタブバーからドラッグして、もう一方のパネルのタブバーにドロップすると、そこへ移動できます。移動先のパネルが閉じている場合、ドラッグ中にその端に沿ってドロップストリップが表示されます——右パネルではウィンドウの右端、下部パネルでは下端です。そこにドロップすると、タブが移動すると同時にそのパネルが開きます。

差分、シミュレーター、エディター、ファイル、デバイス、デバイスの DevTools タブはシングルトンであるため、ドラッグが唯一の移動手段です——すでに開いている状態で **+** メニュー、ツール項目、または**ローカルデバイス**パネルから再度開こうとしても、複製は作られず、現在それをホストしているパネル内で既存のタブが前面に表示されるだけです。ブラウザとターミナルのタブはシングルトンではないため、各パネルに別々のタブを同時に開いたままにできます。

<Note>
  **ブラウザ**または **DevTools** タブをもう一方のパネルに移動すると、そのページは再読み込みされます。**シミュレーター**、**エディター**、**ターミナル**タブは再読み込みされません——内容（ターミナルの場合は実行中のシェル）は移動後も保持されます。
</Note>

## パネルをペインに分割

タブをタブバーではなくその下のコンテンツ領域にドロップすると、すでに表示されている内容と並べて表示できます。ドロップ位置に最も近い端が分割方法を決めます——**左**または**右**は新しいペインを左右に並べ、**上**または**下**は上下に重ねます。1 つのグループには最大 4 つのペインを配置できます。

同じグループのペインはタブバー上の 1 つのタブを共有し、そのタイトルは各メンバーの名前を `|` でつないだものになります。各ペインにはグループ内で位置を入れ替えるためのグリップと、タブバーへ独立したタブとして戻すための閉じるボタンがあります。2 つのペインの間の仕切りをドラッグするとサイズを変更できます。どちら側もグループの 15% より小さくはできません。

<Note>
  ファイルビューアは共有される単一のビューであるため、1 つのグループに配置できる**ファイル**または開いているファイルのペインは 1 つまでです。
</Note>

## パネルのサイズ変更または終了

### 右パネル

パネルの左端のハンドルをドラッグして、チャットエリアに対するサイズを調整します。パネルはウィンドウ幅の最大 80% まで広げられます。ハンドルを内側に、最小幅を超えてドラッグするとパネルが閉じます。

### 下部パネル

パネルの上端のハンドルをドラッグして、上にあるチャットと右パネルに対する高さを調整します。デフォルトでは 300px で開き、最小 120px まで縮小でき、トップバーとその上に使用可能なチャット領域を残しつつ、ウィンドウの高さの最大 70% まで拡大できます。ハンドルを下方向に、最も低い高さを超えてドラッグするとパネルが閉じます。