> ## 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 > ブラウザでアプリケーションとモジュールの設定をビジュアルに作成・編集する Config Editor は、[BRICKS Controller](/ja/controller) に搭載されたビジュアルエディターで、アプリケーションやモジュールの設定をブラウザで直接作成・編集できます。任意のアプリケーションやモジュールを開き、**Config Editor** をクリックして編集を開始します。 ## BRICKS アプリケーションの仕組み BRICKS アプリケーションは、UI、データ、ロジック、インタラクションを定義する JSON 設定上で動作します。[BRICKS Foundation](/ja/foundation) ランタイムがこの設定を読み取り、画面にアプリケーションをレンダリングします。 設定を作成する方法は 2 つあります： | アプローチ | ツール | 最適な用途 | | ------------ | ------------------------------------------- | ---------------------------- | | **ビジュアル** | BRICKS Controller の Config Editor | 素早い編集、非開発者、ビジュアルなレイアウト作業 | | **コードファースト** | [bricks-ctor](/ja/ctor-pkg)（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](/ja/cli) を使用してプログラムでクイック編集を適用することもできます： ```bash theme={null} # 利用可能なプロパティ参照を一覧表示する bricks app short-refs # クイック編集を適用する bricks app short-edit -l '' ``` ## 設定の検証 Config Editor は編集中に BRICKS スキーマに対して設定を検証します。CLI から設定ファイルを検証することもできます： ```bash theme={null} bricks app check-config config.json ``` ## 保存とリリース Config Editor で **Save** をクリックして変更を保存します。これによりアプリケーションの作業中の設定が更新され、バインドされたデバイスに変更が自動的にデプロイされます。 アプリケーション詳細ページに移動し、現在の設定をバージョン管理されたリリースとしてスナップショットするためのリリースを作成します（他のデバイスへのデプロイ用）。 Config Editor で保存すると、バインドされたデバイスに変更が自動的にデプロイされます。他のデバイスへのデプロイ用にバージョンをスナップショットしたい場合はリリースを作成してください。 ## コアリファレンス すべての Brick、Generator、データ型、設定オプションの詳細なプロパティドキュメントについては、[コアリファレンス](/ja/foundation/reference)を参照してください。 すべての BRICKS プラットフォームのエンティティとプロパティの完全なドキュメント。