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

# カスタムコードでバリエーションを作成する

> AI アシスタントのプロンプトを使って、カスタム JavaScript と CSS を含むバリエーションを設定します。

ページの変更をテストするには、バージョンごとに 1 つのバリエーションが必要で、各バリエーションには、その変更を行うコードが必要です。手作業で行うには、実験を作成し、各バージョンを追加して、それぞれのコードを順番に入力する必要があります。AI アシスタントなら、1 回のリクエストですべて行えます。アシスタントは、あなたの説明からコードを書き、Kameleoon に保存されたことを確認するためにコードを読み戻します。結果として、すべてのバリエーションにコードが設定された draft ができます。各セレクターはライブページの要素に一致する必要があるため、開始する前に draft を確認してください。

## バリエーションツールがワークフローにどう組み込まれるか

* **実験を作成する:** AI アシスタントは、最初のバリエーションを持つ draftのコードベース実験を作成し、2 つ目のバリエーションを追加して、それぞれのコードを保存します。
* **バリエーションを追加する:** AI アシスタントは、既存の実験にバリエーションを追加します。
* **トラフィック配分を設定する:** AI アシスタントは、draft、paused、または scheduled の実験で、各バージョンが受け取るトラフィックを設定します。

## 始める前に

* **セットアップ:** Kameleoon を AI アシスタントに接続します。Claude や ChatGPT などのチャットアシスタントの場合は、[Kameleoon を Claude と ChatGPT に接続する](https://docs.kameleoon.com/ja/mcp/connect-ai-assistants.md) を参照してください。Claude Code、Codex、Cursor などのコーディングエージェントの場合は、[MCPクライアントを設定する](https://docs.kameleoon.com/ja/mcp/set-up-clients.md) を参照してください。
* **Site code:** テスト対象のサイトのコードを用意しておいてください。このページのどのプロンプトでも、Site code フィールドに入力してください。フィールドには最初にプレースホルダー `{{SITECODE}}` が表示されており、ほかのすべてのプロンプトはそれに合わせて更新されます。

## コードベースの実験をバリエーションとともに作成する

このプロンプトを使うと、AI アシスタントに 2 つのバリエーションを持つ実験を作成させられます。作成される実験は、[Code エディタの使用](https://docs.kameleoon.com/ja/user-manual/experimentation/web-experimentation/code-based-experiments/using-the-code-editor.md) で説明しているコードベースの実験です。各バリエーションは、あなたが説明する JavaScript と CSS を実行します。

Site code フィールドにサイトコードを入力してから、ページ URL とセレクターを自分の値に置き換えてください。AI アシスタントは説明をもとにコードを書くため、各セレクターはライブページの要素に一致している必要があります。

リクエストが成功すると、Kameleoon に Variation 1 と Variation 2 を持つ draftの実験ができ、AI アシスタントは各バリエーションに保存されたコードを表示します。実験を開始する前に、各セレクターと変更内容が説明どおりか確認してください。

draftの間、Kameleoon はトラフィックを均等に分けるため、3 つのバージョンそれぞれが約 33% のトラフィックを受け取ります。開始前に別の配分を設定するには、[draftの実験を準備する](https://docs.kameleoon.com/ja/mcp/prepare-draft-experiment.md) を参照してください。

## バリエーションの追加と更新

running の実験に追加されたバリエーションは、0% のトラフィックから始まります。配分を変更するまで、ビジターは割り当てられません。

どちらのバリエーションツールも、まず実験の状態を確認します。draft 以外の実験（例: running の実験）では、ツールは変更内容のプレビューを返し、確認を得てから適用します。

> [!WARNING]
>
> バリエーションのコードを更新すると、Kameleoon に保存されているコードが置き換わります。更新する前に、`experiment_code_get` で現在のコードを取得し、コピーを保管してください。

### プロンプトでバリエーションを追加する

このプロンプトを使うと、既存の実験に Variation 3 という名前のバリエーションを追加できます。プロンプトでは、追加の前に、すべてのバリエーションの現在のコードを保存するよう AI アシスタントに指示します。

リクエストが成功すると、実験に Variation 3 という名前の新しいバリエーションが追加され、AI アシスタントは既存のバリエーションの現在のコードを返します。コピーを保管できるように、その内容を確認してください。

実験が draft ではない場合、AI アシスタントはプレビューを返し、確認を得てからバリエーションを追加します。

## トラフィック配分を設定する

トラフィック配分は、実験の各バージョンが受け取るトラフィックの量を決めます。AI アシスタントは、draft、paused、scheduled の実験の配分を設定できます。draftの配分はすぐに変わります。paused または scheduled の実験の新しい配分は、実験が開始または再開されたときに有効になります。running の実験では、Kameleoon アプリで配分を変更してください。

### draft、paused、scheduled の実験の配分を設定する

このプロンプトを使うと、draft、paused、または scheduled の実験について、オリジナルページと 3 つのバリエーションがそれぞれ 25% のトラフィックを受け取るように設定できます。

paused または scheduled の実験でリクエストが成功すると、AI アシスタントは変更内容のプレビューを返し、確認を得てから新しい配分を適用します。draft では、新しい配分をすぐに適用します。

実験が running、deviated、または stopped の場合、AI アシスタントは配分を変更できません。その場合は Kameleoon アプリを使用してください。

ツールのパラメーターは、[実験ツール](https://docs.kameleoon.com/ja/mcp/tools-experiments.md) のリファレンスに記載されています。