Config Editor は、BRICKS Controller に搭載されたビジュアルエディターで、アプリケーションやモジュールの設定をブラウザで直接作成・編集できます。任意のアプリケーションやモジュールを開き、Config Editor をクリックして編集を開始します。
BRICKS アプリケーションの仕組み
BRICKS アプリケーションは、UI、データ、ロジック、インタラクションを定義する JSON 設定上で動作します。BRICKS Foundation ランタイムがこの設定を読み取り、画面にアプリケーションをレンダリングします。
設定を作成する方法は 2 つあります:
アプローチ ツール 最適な用途 ビジュアル BRICKS Controller の Config Editor 素早い編集、非開発者、ビジュアルなレイアウト作業 コードファースト bricks-ctor (TypeScript SDK)バージョン管理、AI 支援開発、CI/CD パイプライン
どちらも同じ JSON 設定を生成します。Config Editor から始めて、後から Generate Project でコードファーストのワークフローに切り替えることも、コードからデプロイして Config Editor で編集を続けることもできます。
アプリケーション構造
BRICKS アプリケーションは、組み合わせ可能なエンティティのツリーです:
Application
└── Subspace(機能/画面コンテナ)
├── Canvas(ビュー/シーンレイアウト)
│ └── Items(配置された Brick または Subspace 参照)
├── Brick(UI コンポーネント)
├── Generator(データ/IO プロバイダー)
├── Data(状態ストレージ)
├── Animation(ビジュアルエフェクト)
└── Data Calculation(データ変換)
Config Editor は、これらのエンティティを管理するための構造化されたインターフェースを提供します。
Subspace
Subspace は自己完結した機能単位です — 画面や機能モジュールと考えてください。各 Subspace には独自の Brick、Generator、Data、Canvas、Animation があります。アプリケーションはルート Subspace をエントリーポイントとして持ちます。
Subspace を使用してアプリケーションを論理的なセクションに整理します。一方の Subspace の Canvas 内から別の Subspace を参照することで、Subspace をネストできます。
Canvas
Canvas はビューレイアウトを定義します。フレーム座標(x、y、幅、高さ)を使用して、グリッド上にアイテム(Brick または Subspace 参照)を配置します。
Canvas のサポート機能:
ライフサイクルイベント — Canvas がアクティブまたは非アクティブになるときにアクションをトリガーする firstEnter、enter、exit イベント
Canvas の切り替え — マルチ画面フローで Canvas 間をナビゲートする
アイテムの配置 — 特定の座標とサイズで Brick と Subspace 参照を配置する
Brick
Brick はビジュアルなビルディングブロックです — コンテンツを表示してインタラクションを処理する UI コンポーネントです。
Brick 用途 Text スタイル付きテキストを表示する TextInput 編集可能なテキストフィールド RichText HTML コンテンツ、複数フォント、インライン画像に対応したリッチテキスト Image 画像を表示する Video 動画を再生する VideoStreaming RTSP / RTMP ライブ映像ストリーミング WebrtcStream WebRTC 映像・音声ストリーム GenerativeMedia AI が生成する画像と動画 WebView 埋め込みウェブコンテンツ Lottie .json と .dotlottie のアニメーション、速度・ループ・フレーム範囲の制御に対応Rive .riv アニメーション、ステートマシン入力・テキストラン・アートボード切り替えに対応Svg SVG ベクターグラフィックス Chart データビジュアライゼーション Icon FontAwesome 6 Pro アイコン QrCode QR コードを表示する Camera ライブカメラフィード Maps 地図を表示する Rect 背景、ボーダー、シャドウを持つコンテナ Items 配列データから生成するリスト/グリッド Slideshow トランジション効果付きの自動切り替えスライド
Brick はスタイル設定、アニメーション化、タップイベントへの応答が可能で、プロパティをデータに動的にバインドできます。
Generator
Generator はすべての外部 I/O とデータ処理を担います。アプリケーションを API、データベース、ハードウェア、AI モデルなどに接続します。各 Generator には、データノードにデータを供給するアウトレット (出力チャンネル)と、アクションをトリガーするイベント があります。
カテゴリ 例 AI & LLM Assistant、LLM(GGML/OpenAI/Anthropic/ONNX)、Vector Store、Reranker 音声 Text-to-Speech、Speech-to-Text、VAD、Realtime Transcription ネットワーク HTTP、WebSocket、GraphQL、MQTT、TCP、UDP、HTTP Server ストレージ File、SQLite、Data Bank、Media Flow ハードウェア Bluetooth LE、Serial Port、Camera、Keyboard 制御フロー Tick(タイマー)、Alarm Clock、Step、Iterator、Watchdog その他 WebRTC、Web Crawler、MCP、Thermal Printer
Data
Data ノードはアプリケーションの状態を格納します。型付き(string、number、boolean、array、object)で、Brick や Generator のプロパティにリンク してリアクティブな更新を行えます。Generator のアウトレットが値を発行すると、リンクされた Data が更新され、そのデータにバインドされた Brick が自動的に再レンダリングされます。
Data Calculation
Data Calculation はデータを変換する JavaScript 関数です。25 以上の組み込みライブラリ(lodash、moment、crypto など)を備えたサンドボックス環境で動作します。フォーマット、パース、または派生値の計算に使用します。
Animation
Brick のビジュアルエフェクトとトランジションを定義します。Animation はイベントによってトリガーでき、位置、不透明度、スケール、回転などのプロパティに適用できます。
アクションとイベント
アクションはイベントによってトリガーされるコマンドです。Brick と Generator はイベント(タップ、レスポンス、エラー、タイマーのティック)を発行し、以下のアクションに接続します:
Canvas を変更する
データを更新する
Generator をトリガーする
Animation を実行する
Subspace 間をナビゲートする
クイック編集
Short Edit を使用して、完全なリリースを作成せずに素早くプロパティを変更します。Short Edit を使用すると、参照によって個別の Brick や Generator のプロパティを変更でき、本番デバイスへの迅速な反復とライブ調整に役立ちます。
BRICKS CLI を使用してプログラムでクイック編集を適用することもできます:
# 利用可能なプロパティ参照を一覧表示する
bricks app short-refs < app-i d >
# クイック編集を適用する
bricks app short-edit < app-i d > -l '<json>'
設定の検証
Config Editor は編集中に BRICKS スキーマに対して設定を検証します。CLI から設定ファイルを検証することもできます:
bricks app check-config config.json
保存とリリース
変更を保存する
Config Editor で Save をクリックして変更を保存します。これによりアプリケーションの作業中の設定が更新され、バインドされたデバイスに変更が自動的にデプロイされます。
バージョンをリリースする(オプション)
アプリケーション詳細ページに移動し、現在の設定をバージョン管理されたリリースとしてスナップショットするためのリリースを作成します(他のデバイスへのデプロイ用)。
Config Editor で保存すると、バインドされたデバイスに変更が自動的にデプロイされます。他のデバイスへのデプロイ用にバージョンをスナップショットしたい場合はリリースを作成してください。
コアリファレンス
すべての Brick、Generator、データ型、設定オプションの詳細なプロパティドキュメントについては、コアリファレンス を参照してください。
コアリファレンス すべての BRICKS プラットフォームのエンティティとプロパティの完全なドキュメント。