> For the complete documentation index, see [llms.txt](https://docs.wicle.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wicle.io/action/experiment/create/diy-coding.md).
# 自分で実装する
Cursor や Claude Code などのコーディングエージェント、または手元のエディタで施策コードを書き、編集画面の `コード` タブへ取り込めます。
画面内のAIエージェントでも施策は作れますが、自分で実装すると次のようなメリットがあります。
* **使い慣れた開発環境で進められる** — Cursor / Claude Code など、普段のコーディングエージェントやエディタのまま実装できます
* **複雑な実装や既存デザインの流用がしやすい** — 社内のコードベースであるので、配信先のデザインと厳密に統一させたり、元コードをみながら複雑な配信でも正しく実装しやすくなります
* **SKILL.mdに沿えば取り込みが簡単** — 成果物JSONを `一括取り込み` するだけで、コードと計測ターゲットをまとめて反映できます
## 全体の流れ
1. 作成画面で `自分で実装する` を選ぶ（または既存施策の `コード` タブを開く）
2. `SKILL.mdをコピー` し、コーディングエージェントに渡す
3. エージェント（または手元）で HTML / CSS / JS を実装する
4. 成果物のJSONを `一括取り込み` で反映する
5. サンプルプレビューとライブプレビューで確認する
6. 計測ターゲット・配信設定を整えて配信する
{% hint style="info" %}
施策の新規作成手順は [施策を作成する](/action/experiment/create.md) をご覧ください。このページは、外部でコードを実装する場合の手順です。
{% endhint %}
## 作成を開始する
1. A/Bテスト画面の `新規作成` をクリックし、`チャットから作成` タブを開きます
2. 自由入力欄の `自分で実装する` をクリックします（または入力欄にDIY用の文言が入ります）
3. `作成を始める` をクリックし、表示デバイスとスタイル参照ページを指定して `生成する` をクリックします
4. 編集画面が開いたら、右パネルの `デザイン` > `コード` を開きます
既存の施策を直す場合は、編集画面の `デザイン` > `コード` から同じ操作ができます。
## SKILL.mdをエージェントに渡す
`コード` タブの `SKILL.mdをコピー` をクリックすると、Wicle向けの実装ガイドがクリップボードにコピーされます。
Cursor などの Agent Skill として渡すと、表示・計測・後片付けなど Wicle 上で動かすための規約に沿ったコードを書きやすくなります。実装時の細かいルールは、コピーした SKILL.md 側を参照してください。
## 成果物を一括取り込みする
コーディングエージェントには、JS / CSS / HTML をばらばらに出させず、次のJSONを1つだけ出してもらいます。
```json
{
"js": "(function(){ ... })();",
"css": ".wcl-exp-banner { ... }",
"html": "...
",
"trackingTargets": [
{ "id": "t1", "type": "click", "label": "申し込みボタン" },
{ "id": "t2", "type": "close", "label": "閉じる" }
]
}
```
取り込み手順は次のとおりです。
1. `コード` タブの `一括取り込み` をクリックします
2. JSONを貼り付けます（`クリップボードから貼付` も使えます。markdownのjsonコードフェンス付きでも取り込めます）
3. `取り込む` をクリックします
取り込むと、コードと計測ターゲットの表示名がまとめて反映されます。取り込み後は、`計測設定` タブでON/OFFと表示名を確認できます。
## 実装時に押さえるポイント（概要）
一般的なWeb制作の書き方だけでは、プレビューでは見えるのにサイト上で出ない・計測されないことがあります。次の点だけ押さえてください。詳細は SKILL.md に従います。
* **HTMLはそのまま画面に出ません。** JSで `getHtml` してページへ挿入する必要があります
* **施策IDは `__WCL_EXP_ID__` を使います。** 自分で固定のIDを書かないでください
* **新しいUIのクラス名は `wcl-exp-` で始めます**
* **クリックと閉じるの計測方法は異なります。** 表示名（`label`）は人が分かる名前にし、内部ID（`t1` など）と分けます
* **見た目はサンプルプレビュー、動的な挙動や既存ページの改変はライブプレビュー** で確認します
* **配信URL・比率・表示回数などの配信条件は、コードでは実装しません。** `配信設定` タブで設定します
{% hint style="warning" %}
既存ページの要素だけを変える施策（HTMLが空）は、サンプルプレビューでは確認できません。ライブプレビューで確認してください。
{% endhint %}
## 取り込み後の確認
1. サンプルプレビューで色・文言・レイアウトを確認します
2. ライブプレビューで、実ページ上の表示位置や動的な挙動を確認します
3. `計測設定` で計測ターゲットの表示名が意図どおりか確認します
4. `配信設定` でURL条件やコンバージョンなどを設定します
5. 必要に応じて [Chrome拡張で動作を確認する](/action/experiment/debug.md) のChrome拡張でも動作を確認します
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.wicle.io/action/experiment/create/diy-coding.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.