Config Editor は、BRICKS Controller に搭載されたビジュアルエディターで、アプリケーションやモジュールの設定をブラウザで直接作成・編集できます。任意のアプリケーションやモジュールを開き、Config Editor をクリックして編集を開始します。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 アプリケーションは、UI、データ、ロジック、インタラクションを定義する JSON 設定上で動作します。BRICKS Foundation ランタイムがこの設定を読み取り、画面にアプリケーションをレンダリングします。 設定を作成する方法は 2 つあります:| アプローチ | ツール | 最適な用途 |
|---|---|---|
| ビジュアル | BRICKS Controller の Config Editor | 素早い編集、非開発者、ビジュアルなレイアウト作業 |
| コードファースト | bricks-ctor(TypeScript SDK) | バージョン管理、AI 支援開発、CI/CD パイプライン |
アプリケーション構造
BRICKS アプリケーションは、組み合わせ可能なエンティティのツリーです: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 | トランジション効果付きの自動切り替えスライド |
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 を使用してプログラムでクイック編集を適用することもできます:設定の検証
Config Editor は編集中に BRICKS スキーマに対して設定を検証します。CLI から設定ファイルを検証することもできます:保存とリリース
Config Editor で保存すると、バインドされたデバイスに変更が自動的にデプロイされます。他のデバイスへのデプロイ用にバージョンをスナップショットしたい場合はリリースを作成してください。
コアリファレンス
すべての Brick、Generator、データ型、設定オプションの詳細なプロパティドキュメントについては、コアリファレンスを参照してください。コアリファレンス
すべての BRICKS プラットフォームのエンティティとプロパティの完全なドキュメント。