> ## 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.

# デモ: フィーチャーエクスペリメンテーション

> TypeScript のサンプルアプリを使用したステップバイステップのチュートリアルに従って、Kameleoon でフィーチャーフラグを構成し、アプリで有効化して、ページ動作にどのように影響するかを確認します。

開発者向けのこのハンズオンチュートリアルでは、Kameleoon プラットフォーム上でフィーチャーエクスペリメンテーションがどのように動作するかを示します。サンプルアプリから始めて、Kameleoon アプリで一連のフィーチャーフラグを構成し、サンプルアプリで有効化し、フィーチャーフラグが訪問者のページにどう影響するかを確認するためのステップバイステップの手順に従います。

サンプルは TypeScript で書かれていますが、このチュートリアルを完了するために TypeScript を知っている必要はありません。重要なポイントを理解するには、最新のプログラミング言語の経験があれば十分です。

## 前提条件

開始する前に、いくつかのアカウントを作成する必要があります。

* 無料の30日間の Kameleoon トライアルアカウントに [サインアップ](https://login.kameleoon.com/app/sign-up?utm_campaign=FM%26E%20Free%20Trial\&utm_source=documentation%20dev\&utm_medium=cta%20dev%20doc) します。アカウント請求後30日以内にこのチュートリアルを完了する必要がありますが、チュートリアル自体は約30分程度で完了するはずです。
* [GitHub](https://github.com) アカウント。

## サンプルアプリを実行する

最初に、GitHub Pages 上でアプリを起動するので、Web サーバーをセットアップする心配は不要です。[GitHub](https://github.com) アカウントにログインする必要があります。

1. GitHub の [Bouncing ball リポジトリ](https://github.com/kameleoon/bouncing-ball) で **Fork** をクリックします。プロンプトに従って、`github.com/<your_username>/bouncing-ball` にサンプルアプリのフォークを作成します。(このチュートリアル全体で \<your\_username> を GitHub アカウント名に置き換えてください。)
2. GitHub の新しい `https://github.com/<your_username>/bouncing-ball` リポジトリで、**Actions** タブをクリックし、ワークフローを有効にするボタンをクリックします。
3. **Settings** タブで、**Pages** をクリックし、**Source** ドロップダウンをクリックして、**GitHub Actions** をクリックします。
4. **Actions** タブで、**Deploy static content to Pages** > **Run workflow** > **Run workflow** をクリックします。

ビルドおよびデプロイプロセスが完了すると (1～2分かかる場合があります)、`https://<your_username>.github.io/bouncing-ball` でブラウザで実行中のデモアプリが見られるはずです。次のようになるはずです。

<Frame>
  ![Bouncing ball demo app](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/bouncing-ball.png)
</Frame>

プロジェクトの変更を高速化するため、SDK が Kameleoon アカウントの構成変更を確認する更新間隔をプログラム的に調整できます。

1. GitHub リポジトリの **Code** タブで、`src/main.ts` ファイルを開きます。

2. **Edit this file** ボタン (鉛筆アイコン) をクリックします。

3. `/src/main.ts` ファイルを見つけて編集します。次の行を見つけます。

   ```js theme={null}
   const client = new KameleoonClient({ siteCode });
   ```

   この行を次のコードに置き換えます。

   ```js theme={null}
   const configuration = {   updateInterval: 1,};const client = new KameleoonClient({ siteCode, configuration });
   ```

   新しいコードは `updateInterval` が 1 の構成を追加します。この値は、SDK が構成の変更をポーリングする頻度を1分に1回 (デフォルトの60分から) に減らします。この頻繁なポーリングは、パフォーマンスへの影響のため本番環境では推奨されませんが、チュートリアルでは役立ちます。Kameleoon は、構成変更を SDK にただちにプッシュする [プレミアムストリーミングオプション](../technical-reference/technical-considerations#ストリーミング（プレミアムオプション）) も提供しています。

4. **Commit changes...** をクリックします。

## Kameleoon プロジェクトをセットアップする

このセクションを開始する前に、Kameleoon トライアルアカウントのクレデンシャルが必要です。

1. トライアルアカウントのクレデンシャルを使用して [Kameleoon アプリ](https://app.kameleoon.com) にサインインします。
2. 左メニューで、**Admin** を展開し、**Projects** > **New project** をクリックします。
3. ダイアログで、最初のドロップダウンの **Site: Feature flags** をクリックし、**URL of site** として `https://<your_username>.github.io/bouncing-ball` を貼り付けます。`<your_username>` を GitHub アカウント名で置き換えるのを忘れないでください。**Add** をクリックします。
4. 次のページに表示されているサイトコードをコピーします。

   <Frame>
     ![New project page with site code](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/sitecode.png)
   </Frame>
5. GitHub リポジトリの **Code** タブで、`src/constants` ファイルを編集します。`siteCode` の値を、今コピーしたサイトコードで置き換え、**Commit changes** をクリックします。

ブラウザで再びアプリを確認すると (`https://<your_username>.github.io/bouncing-ball`)、すべてのバウンスする円が消えているのが分かるはずです。これは、円が別のプロジェクトの Kameleoon フィーチャーフラグによって追加されていたためです。サイトコードを変更したばかりなので、現在サイトはまだ完全に構成していないあなたの Kameleoon プロジェクトによって制御されています。心配は不要です。自分自身のフィーチャーフラグでアプリに自分の円を戻すことになります。

<Check>
  トラブルシューティング: **Slow + Random + Big** のテキストとバウンスする円がまだ表示されている場合は、インコグニート (またはプライバシーモード) ウィンドウでページを開いてみてください。
</Check>

### フィーチャーフラグをセットアップする

フィーチャーフラグを使用すると、新機能を限定されたオーディエンスに展開して、完全な展開の前に効果をテストできます。構成は開発者または他のチームメンバーによって管理できます。Kameleoon インターフェイスでフィーチャーフラグがどのように構成されているかを理解することで、アプリ内で変数を効果的に使用できます。

1. Kameleoon アプリの **Activate** メニューで、**Feature flags** をクリックします。

2. **New feature flag** をクリックします。

3. 次の値でフィールドを記入します。

   * Name: `Bouncing ball demo`
   * Project: \{ドロップダウンからプロジェクトを選択}
   * Flag type: **Permanent**
   * Feature key: `bouncing_ball_demo` タグと説明フィールドは空のままにできます。

4. **Validate** をクリックします。

### 変数をセットアップする

[変数](/user-manual/experimentation/feature-experimentation/configure-your-feature-flags/define-feature-variables) は、アプリの動作を変更するためにアプリコードで使用する文字列、数値、ブール値、または JSON 値です。それらの値は、Kameleoon が訪問者に割り当てるバリエーションによって変化します。

たとえば、「Party time」バリエーションで訪問者にサービスを提供したときと「Hypnotize」バリエーションで提供したときに、訪問者がサイトに長く留まるかどうかを判断するには、各オプションのバリエーションをセットアップして実験を実行します。

1. 表示される新しいページで、**Set Up** メニューを展開して、**Variables** をクリックします。

<Frame>
  ![Set Up menu](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/bb-feature-flag.png)
</Frame>

2. **+ Add Variable** ボタンを使用して、次の値で 6 つの変数を追加します。

   | 変数キー                  | タイプ     | デフォルト値                          |
   | --------------------- | ------- | ------------------------------- |
   | title\_text           | String  | Default variation: 1 green ball |
   | randomize\_on\_bounce | Boolean | False                           |
   | balls\_amount         | Number  | 1                               |
   | ball\_speed           | Number  | 10                              |
   | ball\_color           | String  | green                           |
   | ball\_size            | Number  | 20                              |

   <Warning>
     入力ミスに注意してください! 変数キー名とタイプは完全に一致する必要があります。GitHub リポジトリの `src/main.ts` ファイルを見ると、その理由が分かります。コードサンプルは、Kameleoon が訪問者に割り当てるバリエーションに応じて、これらの正確な変数キー名を使用して変数の値を取得します。
   </Warning>

3. **Save** をクリックします。

これで、デフォルト値を持つ一連の変数をセットアップしました。デフォルト値は、訪問者に対してアクティブなキャンペーンがない場合にアプリが使用する値です。今すぐフィーチャーフラグを有効にすると、デフォルトのバリエーション (1つの緑色のボールがゆっくりとバウンスする) が表示されます。これは、まだバリエーションがセットアップされていないためです。

### バリエーションをセットアップする

[バリエーション](/user-manual/experimentation/feature-experimentation/configure-your-feature-flags/define-feature-variations) は、訪問者がアプリで何を見るかを制御する変数の可能な組み合わせを定義します。Kameleoon は、訪問者がアプリに初めて訪問したときにバリエーションを割り当てます。

1. **Set Up** で **Variations** をクリックします。

2. **+ Add variation** ボタンを使用して、2つの新しいバリエーションを追加します。

   * Name: `Party time`

     * ball\_size: `50`
     * ball\_color: `random`
     * ball\_speed: `75`
     * balls\_amount: `75`
     * randomize\_on\_bounce: `True`
     * title\_text: `Hey! Get up and dance!`

   * Name: `Hypnotize`

     * ball\_size: `200`
     * ball\_color: `blue`
     * ball\_speed: `2`
     * balls\_amount: `10`
     * randomize\_on\_bounce: `False`
     * title\_text: `You're getting very, very sleepy`

### ゴールをセットアップする

次に、[ゴール](/user-manual/assets/goals/manage-goals) をセットアップします。ゴールは、バリエーションの効果をどう測定するかを定義します。

使用可能なカスタマイズ可能なゴールタイプには複数の種類がありますが、このチュートリアルでは基本的な「time spent」(滞在時間) 指標を使用します。

1. **Set Up** メニューで、**Goals** > **+ Add goal** をクリックします。

2. **Configure goals** セクションで **+ Create a new goal** をクリックし、次のフィールドに入力します。

   * Name: Time spent
   * Type: Time Spent
   * Project: \{自分のプロジェクトを選択}

3. **Next** をクリックし、ゴールを **The visitor spent more than 30 seconds** に設定します。

4. **Validate** をクリックします。

## 実験を展開する

バリエーションが構成されたので、オーディエンスのサブセットに対して2つのバリエーションを表示する実験を作成できます。1つのバリエーションを訪問者の40%に表示し、もう1つのバリエーションを別の40%の訪問者に表示します。残りの20%の訪問者は、アプリの未変更バージョン (デフォルト) を見ます。

1. Rollout Planner セクションで、**Production** をクリックします。
2. **+ Add a rule** > **Experiment** をクリックします。
3. **Exposure** スライダーを **80%** に下げます。
4. **Variations to serve** の下で、**Party time** をクリックし、**Exposition** の値を **40.00%** に変更します。
5. **+ Add a variation** をクリックします。バリエーション **Hypnotize** が自動的に選択されているはずです (そうでない場合は選択してください)。**Exposition** の値を **40.00%** に変更します。
6. **ON/OFF** トグルを **ON** に切り替えます。
7. **Save** をクリックします。

## アプリをテストする

ブラウザでアプリを開きます。3つの可能なバリエーション (Party time バリエーション、Hypnotize バリエーション、または Default バリエーション) のいずれかが表示されるはずです。

<Frame>
  ![Party time variation](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images//bb-party-time.png) *Party time バリエーション*
</Frame>

<Frame>
  ![Hypnotize variation](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images//bb-hypnotize.png) *Hypnotize バリエーション*
</Frame>

<Frame>
  ![Default variation](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images//bb-default-variation.png) *Default バリエーション*
</Frame>

次に、他のバリエーションが表示されるまで新規ユーザーをシミュレートしてみてください。同じバリエーションに何度も割り当てられる可能性があるため、何度か試す必要があるかもしれません。ブラウザがあなたを識別するユニーク ID である `visitorCode` を保存するため、単純にページを更新しても、最初に割り当てられたバリエーションが常に表示されます。代わりに、新しい訪問者のように見える必要があります。それを行う最も簡単な方法は次のとおりです。

* 別のブラウザまたはデバイスに切り替えます。
* 毎回新しいプライベートウィンドウでアプリを開きます (選択したブラウザによっては「インコグニート」、「プライベートブラウジング」などと呼ばれることもあります)。

十分な試行の後、3つのバリエーションすべてが見られるはずです。そうであれば、おめでとうございます! Kameleoon でフィーチャー実験を正常にセットアップしました! 🎉🎉🎉

## 次のステップ

* 実験の **Reporting** セクションで、初期結果、利用可能な統合、アクティビティログのいくつかを確認します。トラフィックが少ないため、まだ多くの結果データにアクセスすることはできません。
* サンプルコードを確認して、変数がコードでどのように適用されているかを理解します。TypeScript を書くのに慣れている場合は、自分の変数を追加してみてください。
* この開発者ドキュメントと [エクスペリメンテーションユーザーガイド](/user-manual/experimentation/feature-experimentation/create-and-manage-flags/create-a-feature-flag) の残りの部分を確認して、利用可能なすべてのオプションと機能について詳細を学んでください。
* 選択した SDK をインストールし、自分のフィーチャーフラグ、パーソナライゼーション、その他の実験の構築を開始します。