コンポーネントの種類

コンポーネントを定義します。コンポーネントは UI と接続するデータレイヤーです。

**カスタムコンポーネント **はブログ投稿、著者、住所、カスタムの生データなどです。 **UI コンポーネント **は UI 要素、フッター、ヘッダー、ヒーローなどとしてマークされたカスタムコンポーネントです。 **システムコンポーネント **は CMS によって国と言語として事前定義されています

UI コンポーネントとは？

ページは複数の UI コンポーネントで構成されます

例:

• ヒーローブロック
• フィーチャーブロック
• 画像カルーセル
• ヘッダー／フッター

各 UI コンポーネントはページ内のセクションを表します。

UI コンポーネントのワークフロー

1. コンポーネントビルダーでコンポーネント（ブロックの構造）を定義する
2. UI コンポーネントを作成する
3. UI コンポーネントをページに割り当てる
4. ブロックレジストリとレンダラー設定で適切なブロックを用いてクライアント側でレンダリングする

例: ヒーローブロックスキーマ

ヒーローブロックには次のようなものが含まれる場合があります:

• 画像
• 見出し
• サブタイトル

エディター内の JSON スキーマ

[
  {
    "name": "heading",
    "type": "string",
    "required": false,
    "displayName": "heading"
  },
  {
    "name": "subtitle",
    "type": "string",
    "required": false,
    "displayName": "subtitle"
  },
  {
    "name": "hero_img",
    "type": "image",
    "required": false,
    "displayName": "hero_img"
  }
]

管理パネルのセットアップ

• 新しいブロックを作成する
• スキーマ（HeroSchema）を関連付ける
• ブロックに名前を付ける（例: hero-block）

ブロックをページに割り当てる

• 管理パネルでルートに移動する
• Assign Page をクリックする
• 新しく作成したブロックを追加する

クライアントでのレンダリング

割り当てが完了すると、レンダラーのセットアップを使用してクライアント側でブロックを取得してレンダリングできます。

まとめ

• スキーマはブロックの構造を定義する
• ブロックはページのセクションを定義する
• ページは複数のブロックで構成される
• 完全にカスタマイズ可能で再利用できる