> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ヘッドレス CMS 連携ガイド

> リファレンス実装として React SDK を使用し、Kameleoon フィーチャーフラグをヘッドレス CMS と連携してバリエーションごとのコンテンツ配信を制御します。

## ステップ 1: Kameleoon でフィーチャーバリエーションを定義する

Kameleoon のダッシュボードで、表示するコンテンツのバージョンを制御する新しいフィーチャーフラグを作成します。たとえば、ホームページセクションの異なるバージョンで実験している場合：

* **フィーチャーフラグ名:** `Homepage section`
* **フィーチャーバリエーション 1:** `section_v1`
  * **フィーチャー変数 1:** `content_id = CMS のバージョン 1 のコンテンツの ID。`
* **フィーチャーバリエーション 2:** `section_v2`
  * **フィーチャー変数 2:** `content_id = CMS のバージョン 2 のコンテンツの ID。`

これらの `content_id` 値は、ヘッドレス CMS で各コンテンツバージョンに使用される一意の識別子に対応している必要があります。

<Frame>
  ![CMS-1](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/cms-intgr/cms-1.png)
</Frame>

### ステップ 2: CMS からコンテンツを取得して表示する

次に、React アプリケーションで getFeatureVariable メソッドを使用して、アクティブなバリエーションに基づいて content\_id を取得し、それを使用してヘッドレス CMS から該当するコンテンツを取得します。

```js theme={null}
// Define the type for your CMS content
interface CMSContent {
  title: string;
  body: string;
}

function HomepageSection() {
  const [content, setContent] = useState<CMSContent | null>(null);

  useEffect(() => {
    const fetchContent = async () => {
      try {
        // Fetch the content_id for the current variation
        const content_id: string = await getFeatureVariable<string>(
          'homepage_section',
          'content_id'
        );

        // Fetch the content from your headless CMS using the content_id
        const response = await fetch(`https://your-cms.com/api/content/${content_id}`);
        const data: CMSContent = await response.json();

        // Update the state with the fetched content
        setContent(data);
      } catch (error) {
        console.error('Error fetching content:', error);
      }
    };

    fetchContent();
  }, []);

  return (
    <div>
      {/* Render the content fetched from your headless CMS */}
      {content ? (
        <div>
          <h1>{content.title}</h1>
          <p>{content.body}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default HomepageSection;
```

**仕組み:**

* **コンテンツ ID の取得:** `getFeatureVariable` メソッドは、アクティブなバリエーションの `content_id` を取得します。その後、`content_id` を使用して CMS から適切なコンテンツを取得します。

* **エラーハンドリング:** try-catch ブロックを含めて、コンテンツ取得プロセス中のエラーを処理します。

* **レンダリング:** 取得したコンテンツが React コンポーネント内で動的にレンダリングされます。

### ステップ 3: CMS コンテンツの管理

ヘッドレス CMS の各コンテンツバリエーションが一意の ID に関連付けられていることを確認してください。これらの ID は、Kameleoon で設定された `content_id` フィーチャー変数と一致する必要があります。

ユーザーがページをロードすると、Kameleoon がどのバリエーションを提供するか決定します。`content_id` に基づいて、正しいコンテンツが取得されて表示されます。

**まとめ:** これらのステップに従うことで、Kameleoon は React SDK を使用してヘッドレス CMS と統合されます。このセットアップにより、異なるコンテンツバリエーションの動的な実験と配信が可能となり、パーソナライズとユーザーエクスペリエンスの有効性が向上します。

<Frame>
  ![CMS-2](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/cms-intgr/cms-2.png)
</Frame>