Types of Components

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

カスタムコンポーネント はブログ投稿、作者、住所、カスタムの生データなどです。

UI コンポーネント は UI 要素、フッター、ヘッダー、ヒーローなどとしてマークされたカスタムコンポーネントです。

システムコンポーネント は CMS によってあらかじめ定義されている国や言語です。

UI コンポーネントとは？

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

例：

• hero-block
• feature-block
• image-carousel
• header/footer

各 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 をクリックする
• 作成したばかりのブロックを追加する

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

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

まとめ

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