パネルを開く
上部バーの右パネルまたは下部パネルをクリックします。各ボタンはパネルの開閉にかかわらず常に同じ位置に固定されています——右パネルは右上隅、下部パネルはその左隣です。CTOR は各パネルの開閉状態を個別に記憶し、次回アプリを起動したときにその状態を復元します。 パネルを開くと、そこにすでにあるタブが表示されます。どちらのパネルにもまだタブが開かれていない場合は、開ける項目を一覧にした開始ページが表示されるので、いずれかを選ぶとそこに読み込まれます。下部パネルには例外があります——他に何もホストされていない状態で初めて開くと、開始ページの代わりにターミナルタブが直接作成されます。タブ
差分、シミュレーター、エディター、ファイル、デバイス、および各デバイスの DevTools タブはシングルトンです——両方のパネルを通じて、それぞれ一度に 1 つのコピーしか存在しません。ブラウザとターミナルのタブはシングルトンではありません——どちらも好きなだけ開けます。パネル間でタブを移動を参照してください。
差分
差分タブはプロジェクトのコミットされていない変更を表示し、現在の追加行数と削除行数のバッジ(+ / −)を備えています。表示モードとファイルごとの操作については差分ビューリファレンスを参照してください。
シミュレーター
シミュレータータブはコンパイル済みプロジェクトを組み込みウェブビューとして実行し、Chrome DevTools Protocol (CDP) エンドポイントを公開します。ツールバーには、シミュレーター自身のインスペクタをドッキングする DevTools トグルがあります。ペインの操作全般についてはシミュレーターリファレンスを参照してください。エディター
エディタータブは、開いているプロジェクトに接続された視覚的な Config Editor を埋め込みます。保存すると、編集内容がプロジェクトのソースにコンパイルされ、コミットされます。編集ワークフロー全般については Config Editor リファレンスを参照してください。ファイル
ファイルタブはプロジェクトのファイルツリーを開きます。そこから開いた各ファイルは、隣に独自のタブとして表示されます。ツリー、プレビュー、検索、外部エディタへの引き渡しについてはファイルビューアリファレンスを参照してください。デバイス
+(新しいタブ)メニューからデバイスタブを追加するか、ローカルデバイスダイアログのフッターにあるデバイスパネルを開くをクリックします——どちらもデフォルトで下部パネルに開きます。プロジェクトセッションとメインチャットの両方で使用でき、プロジェクトを開いている必要はなく、ローカルデバイスダイアログが使うのと同じローカルネットワークスキャンと照合したワークスペースのデバイスを一覧表示します。 デバイスはオンラインとオフラインのグループに分かれ(5 分以内に応答があればオンラインとみなされます)、それぞれのグループに件数が表示されます。各行の概要にはタイプ、実行中のアプリケーション、バージョンが表示されます。展開すると、一意 ID、最終応答時刻、モード(プラットフォーム——iOS、iPadOS、Android、Android TV、macOS、tvOS、Windows、Linux、または Virtual Device)、画面解像度、メモリとディスクの使用量、そしてローカルで一致したデバイスの場合は LAN アドレスが表示されます。- ローカル——そのデバイスが、クラウド経由だけでなく、現在お使いのネットワーク上でも直接到達可能であることを示します。
- CDP——ローカルで一致したデバイスがデバッグ用エンドポイントを公開している場合に表示され、DevTools を開くボタンが有効になります。これはローカルデバイスダイアログと同じDevTools タブを開きます。
- 更新——そのデバイスに利用可能な BRICKS Foundation の更新があることを示します。
ダッシュボード表示
ツールバーのリスト / ダッシュボードトグルでデバイスの表示方法を切り替えられます。選択した表示モードは CTOR が記憶し、次回も引き継がれます。 ダッシュボードは行の一覧をスクリーンショットカードのグリッドに置き換えます。グループ分けはオンラインとオフラインのままです。各カードには最新のスクリーンショット、デバイス名、ローカルと CDP のバッジ、そして画面解像度と撮影からの経過時間を示すキャプションが表示されます。カードにカーソルを合わせると撮影ボタンが現れ、CDP デバイスの場合は DevTools を開くも表示されます。オフラインのデバイスは淡色表示になり、オフラインになってからの経過時間が表示され、操作は行えません。 ダッシュボードに切り替えると、CTOR はオンラインのデバイスをすべて 1 回撮影します。デバイス一覧が変化したときにも撮影し直します。トグルの隣にある自動更新ドロップダウンでは、グリッド全体を一定間隔で撮影し直せます——オフ、10s、30s(デフォルト)、60s——ツールバーの更新ボタンからは任意のタイミングで撮影できます。リストの更新と同様に、自動更新はデバイスタブがアクティブな間だけ実行されます。撮影はキューに入れて 1 台ずつ処理されるため、大規模なワークスペースでも API が過負荷になりません。 CDP を公開しているデバイスは、ローカルのデバッグ接続から直接撮影されます——高速で、メディアワークスペースも不要です。これらのカードには LIVE バッジが付きます。それ以外のデバイスは、リスト表示のスクリーンショット操作と同じメディアワークスペース経由の方法にフォールバックし、バッジには撮影からの経過時間が表示されます。更新間隔の 2 倍を超えると、バッジは黄色に変わります。ブラウザ
ブラウザタブはパネル内で Web ページを実行します——BRICKS Controller を開くか、任意の URL を入力します。複数を同時に開くことができ、どちらのパネルにも分けて配置できます。エージェントは認可された CDP ブリッジを通じてそれらを操作できます。ツールバー、ページ内検索、スクリーンショット、エージェント自動化についてはブラウザリファレンスを参照してください。 +(新しいタブ)メニューから追加します。新しいブラウザタブは空白のタブを開き、コントローラーを開くは使用中のアプリと stage の Controller をブラウザタブで開きます。DevTools
ローカルデバイスパネルからデバイスの Chrome DevTools インスペクタを開きます——ローカルデバイスを参照してください。各デバイスはそれぞれの DevTools タブとして開き、デバイス名をタイトルとして、ウェブビュー内にdevtools:// インスペクタをホストします。
DevTools タブは組み込みタブとは異なる動作をします:
- デバイスごとに重複排除——デバイスを再び開くとそのタブが再利用され、接続が更新されます(たとえば再認証した後)。
- 永続的——現在のプロジェクトではなく物理デバイスを追跡するため、プロジェクトやセッションを切り替えても開いたままになります。
- ポップアウト——タブバーのウィンドウで DevTools を開くをクリックすると、インスペクタを独立したウィンドウに移動できます。この操作はタブを閉じ、従来の独立ウィンドウの動作に戻します。
検査するデバイスが前面のプロジェクトの実行中のプレビューである場合、DevTools ボタンは別のタブを開く代わりに、インスペクタをシミュレータータブ内にドッキングします。シミュレーターの DevTools をドッキングを参照してください。
ターミナル
ターミナルタブはインタラクティブなシェルを実行します——システムのデフォルトシェル、または設定したカスタムシェルです。プロジェクトセッションとメインチャットの両方で使用でき、プロジェクトではプロジェクトのルートディレクトリを起点とします。 +(新しいタブ)メニューから追加できます。他のすべてのタブの後に表示されます——または、下部パネルを初めて開くと自動的に 1 つ作成されます(パネルを開くを参照)。各ターミナルは独立したシェルです。タブを閉じるとそのシェルは確認なしですぐに終了します。コマンドが実行中でも同様です。 セッションを切り替えたり、別のパネルにドラッグしたり、後で戻ってきたりしても、ターミナルは実行され続けます——同じシェルが再接続され、再起動はされません。フォントは外観設定のコードフォントとコードフォントサイズに従い、即座に反映されます。カラーテーマはタブの作成時に固定され、後でアプリのライト/ダークテーマを切り替えても変わりません。タブの管理
- タブを追加——タブバーの +(新しいタブ)をクリックしてタブを選びます。新しいブラウザタブとコントローラーを開くはブラウザタブを開き、シミュレータータブを開くとプロジェクトのコンパイルが始まり、差分を開くと現在の変更が読み込まれます。
- タブを閉じる——タブの × をクリックします。差分またはシミュレーターを閉じるとそのバックエンドも停止し、DevTools タブを閉じるとそのインスペクタが切断され、ブラウザタブを閉じるとそのページが閉じます。
- タブを並べ替え——同じパネルのタブバー内でタブを左右にドラッグして位置を変更します。ドロップインジケーターが配置先を示します。
- キーボードでタブを切り替え——Cmd+1 から Cmd+9(Windows と Linux では Ctrl)を押すと、右パネル内でタブの順序に従って 1 番目から 9 番目のタブに移動します。このショートカットは下部パネルには適用されません。
パネル間でタブを移動
タブをそのパネルのタブバーからドラッグして、もう一方のパネルのタブバーにドロップすると、そこへ移動できます。移動先のパネルが閉じている場合、ドラッグ中にその端に沿ってドロップストリップが表示されます——右パネルではウィンドウの右端、下部パネルでは下端です。そこにドロップすると、タブが移動すると同時にそのパネルが開きます。 差分、シミュレーター、エディター、ファイル、デバイス、デバイスの DevTools タブはシングルトンであるため、ドラッグが唯一の移動手段です——すでに開いている状態で + メニュー、ツール項目、またはローカルデバイスパネルから再度開こうとしても、複製は作られず、現在それをホストしているパネル内で既存のタブが前面に表示されるだけです。ブラウザとターミナルのタブはシングルトンではないため、各パネルに別々のタブを同時に開いたままにできます。ブラウザまたは DevTools タブをもう一方のパネルに移動すると、そのページは再読み込みされます。シミュレーター、エディター、ターミナルタブは再読み込みされません——内容(ターミナルの場合は実行中のシェル)は移動後も保持されます。
パネルをペインに分割
タブをタブバーではなくその下のコンテンツ領域にドロップすると、すでに表示されている内容と並べて表示できます。ドロップ位置に最も近い端が分割方法を決めます——左または右は新しいペインを左右に並べ、上または下は上下に重ねます。1 つのグループには最大 4 つのペインを配置できます。 同じグループのペインはタブバー上の 1 つのタブを共有し、そのタイトルは各メンバーの名前を| でつないだものになります。各ペインにはグループ内で位置を入れ替えるためのグリップと、タブバーへ独立したタブとして戻すための閉じるボタンがあります。2 つのペインの間の仕切りをドラッグするとサイズを変更できます。どちら側もグループの 15% より小さくはできません。
ファイルビューアは共有される単一のビューであるため、1 つのグループに配置できるファイルまたは開いているファイルのペインは 1 つまでです。