メインコンテンツへスキップ
Fabled
Docs
How-to
The Forgeでフレームをカスタマイズする

The Forgeでフレームをカスタマイズする

更新日 2026/07/22

1 分で読める

ステップ 1: 作成メニューを開いてNew Frameを選択する

The Forgeを開きます。Forgeツリーにある作成メニューのトリガー(バッジ1)を見つけてクリックし、作成オプションを表示します。

メニューからNew Frameを選択します。これにより新しい表示テンプレートが開始され、フレームのセットアップパネルが開きます。

作成メニューを開いてNew Frameを選択する

ステップ 2: フレームに名前を付け、ゲームとカテゴリを割り当てる

名前フィールドにフレームの名前を入力します。「Character Sidebar」や「Item Card」など、フレームの用途がわかる説明的な名前を付けてください。

このフレームが属するゲームとコンテンツカテゴリを選択します。右側のパネルを使ってフレームをForgeフォルダーに割り当て、使用する要素と並んで表示されるようにします。

フレームに名前を付け、ゲームとカテゴリを割り当てる

ステップ 3: キャンバス上のルートコンテナを確認する

フレームエディターはフレームのルートコンテナを表示した状態で開きます。これはテンプレートの最上位レイアウト領域です。

ルートコンテナはキャンバス領域全体を占めます。左側のパレットからこのコンテナにコンポーネントをドロップしてレイアウトを構築します。

キャンバス上のルートコンテナを確認する

ステップ 4: パレットからキャンバスにコンポーネントをドラッグする

左側のコンポーネントパレットには利用可能なビルディングブロックが一覧表示されています:TextImageVideoTableIconContainer

任意のコンポーネントをルートコンテナにドラッグして配置します。Containerの中にコンポーネントをネストしてグループ化されたレイアウトを作成することもできます。

パレットからキャンバスにコンポーネントをドラッグする

ステップ 5: コンポーネントのプロパティをライブ要素データにバインドする

キャンバス上のコンポーネントを選択します。そのプロパティが右側のパネルに表示されます。

式の構文を使って、このフレームが表示する要素のフィールドにプロパティをバインドします。たとえば、要素の名前を取得するには{{element.name}}を入力し、ポートレート画像フィールドを参照するには{{element.portrait}}を入力します。

すべてのコンテンツフィールドが正しい要素データに接続されるまで、キャンバス上の各コンポーネントに対してこの操作を繰り返します。

コンポーネントのプロパティをライブ要素データにバインドする