メインコンテンツへスキップ

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 は、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 がアクティブまたは非アクティブになるときにアクションをトリガーする firstEnterenterexit イベント
  • Canvas の切り替え — マルチ画面フローで Canvas 間をナビゲートする
  • アイテムの配置 — 特定の座標とサイズで Brick と Subspace 参照を配置する

Brick

Brick はビジュアルなビルディングブロックです — コンテンツを表示してインタラクションを処理する UI コンポーネントです。
Brick用途
Textスタイル付きテキストを表示する
TextInput編集可能なテキストフィールド
RichTextHTML コンテンツ、複数フォント、インライン画像に対応したリッチテキスト
Image画像を表示する
Video動画を再生する
VideoStreamingRTSP / RTMP ライブ映像ストリーミング
WebrtcStreamWebRTC 映像・音声ストリーム
GenerativeMediaAI が生成する画像と動画
WebView埋め込みウェブコンテンツ
Lottie.json.dotlottie のアニメーション、速度・ループ・フレーム範囲の制御に対応
Rive.riv アニメーション、ステートマシン入力・テキストラン・アートボード切り替えに対応
SvgSVG ベクターグラフィックス
Chartデータビジュアライゼーション
IconFontAwesome 6 Pro アイコン
QrCodeQR コードを表示する
Cameraライブカメラフィード
Maps地図を表示する
Rect背景、ボーダー、シャドウを持つコンテナ
Items配列データから生成するリスト/グリッド
Slideshowトランジション効果付きの自動切り替えスライド
Brick はスタイル設定、アニメーション化、タップイベントへの応答が可能で、プロパティをデータに動的にバインドできます。

Generator

Generator はすべての外部 I/O とデータ処理を担います。アプリケーションを API、データベース、ハードウェア、AI モデルなどに接続します。各 Generator には、データノードにデータを供給するアウトレット(出力チャンネル)と、アクションをトリガーするイベントがあります。
カテゴリ
AI & LLMAssistant、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-id>

# クイック編集を適用する
bricks app short-edit <app-id> -l '<json>'

設定の検証

Config Editor は編集中に BRICKS スキーマに対して設定を検証します。CLI から設定ファイルを検証することもできます:
bricks app check-config config.json

保存とリリース

1

変更を保存する

Config Editor で Save をクリックして変更を保存します。これによりアプリケーションの作業中の設定が更新され、バインドされたデバイスに変更が自動的にデプロイされます。
2

バージョンをリリースする(オプション)

アプリケーション詳細ページに移動し、現在の設定をバージョン管理されたリリースとしてスナップショットするためのリリースを作成します(他のデバイスへのデプロイ用)。
Config Editor で保存すると、バインドされたデバイスに変更が自動的にデプロイされます。他のデバイスへのデプロイ用にバージョンをスナップショットしたい場合はリリースを作成してください。

コアリファレンス

すべての Brick、Generator、データ型、設定オプションの詳細なプロパティドキュメントについては、コアリファレンスを参照してください。

コアリファレンス

すべての BRICKS プラットフォームのエンティティとプロパティの完全なドキュメント。