> ## 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.
# コードからウィジェットを作成する
> Kameleoon プラットフォームで直接コーディングすることで、高度にカスタマイズ可能なウィジェットテンプレートを構築する方法を学びます。
Kameleoon プラットフォームで直接コーディングすることで、高度にカスタマイズ可能なウィジェットテンプレートを作成します。
コーディングに不慣れな場合は、すぐに使えるウィジェットを利用するか、開発者に協力を依頼してください。
## 新しいテンプレートを作成する
コードを使用して新しいウィジェットテンプレートを作成するには、次の手順に従います。
1. **Studio** > **Widgets** > **New widget** をクリックします。
2. **Using code** を選択します。
3. テンプレートに名前を付け、Web サイトを関連付け、必要に応じて説明とタグを追加します。
4. **Create** をクリックします。
## テンプレートエディタ
テンプレートエディタには 3 つの異なるエリアがあります。
### 左パネル
左上にはテンプレートのタイトルが表示されます。タイトルにカーソルを合わせ、**鉛筆アイコン** をクリックしてテンプレートの名前を変更します。
このパネルでテンプレート作成に必要な 2 つの重要なステップにアクセスします。
* **Code to run**
* **Configuration form**
### コンテンツゾーン
このエリアにテンプレートのコードを入力します。
## テンプレートをコーディングする
中央のコンテンツエリアを使ってウィジェットテンプレートをコーディングします。このコードは、Web サイトのページ上にウィジェットを生成します。エディタには、異なるコードタイプ用の 3 つのタブがあります。
* **JS**(JavaScript)
* **CSS**
* **HTML**
デフォルトでは **JS** タブがアクティブです。コードを空白エリアに記述します。
テンプレートを検証するには、**JS** タブに少なくとも 10 文字を入力します。テンプレートを作成するのに JavaScript だけで十分ですが、HTML や CSS も追加できます。
リストやテキストフィールドなどの要素を Kameleoon スタイルシートに従ってフォーマットするには、このデフォルト CSS を使用します。
```css theme={null}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');
body * {
font-family: "Montserrat";
font-size: 12px;
}
fieldset {
border: none;
border-bottom: 1px solid #dedede;
}
label {
display: block;
font-size: 12px;
margin-bottom: 5px;
}
input, select, textarea {
display: block;
padding: 8px 12px;
width: 100%;
border-radius: 4px;
border: 1px solid #eeeeee;
outline: none;
font: 400 12px "Roboto", sans-serif;
color: #333333;
background: white;
-webkit-transition: border-color 0.25s ease;
-o-transition: border-color 0.25s ease;
transition: border-color 0.25s ease;
}
input:hover, select:hover, textarea:hover,
input:focus, select:focus, textarea:focus {
border-color: #c6c6c6;
}
textarea {
resize: vertical;
}
input[type="checkbox"] {
display: inline-block;
width: auto;
position: relative;
top: 1px;
}
input[type="checkbox"] + label {
display: inline-block;
}
```
コードを記述した後、左パネルの **Configuration form** をクリックしてユーザーインタフェースのステップに進みます。
### 特殊なケース: 変数
ウィジェットでユーザーが指定したフィールド(変数)を使用するには、**User Interface** タブの対応するフィールドに `templateData` 属性を追加します。
**例:**
`input id="message" type="text" templateData="messageContent" placeholder="Type your message"`
変数を取得するには、**Code to run** タブで `UserData` を使用します。
**例:**
`var userInput = UserData.messageContent;`
`alert(userInput);`
## 構成フォームを作成する
**Configuration form** タブを使って、チームメンバーがウィジェットを設定するためのユーザーインタフェースを構築します。このセクションでは **HTML** タブと **CSS** タブのみが利用できます。
### HTML タブ
**HTML** タブに構成フォーム用の HTML コードを入力します。ユーザーはこのフォームを操作してテンプレートを設定し、ウィジェットを作成します。
フォームの各フィールドには、次の構文で属性を含める必要があります: `templateData="[NameOfYourChoice]"`。
### CSS タブ
**CSS** タブで追加したスタイルはユーザーインタフェースフォームに適用されます。このステップは任意です。
***
テンプレートを確定するには、エディタページの右上隅にある **Activate** をクリックします。
JavaScript フィールドに 10 文字未満を入力した場合、**Activate** は利用できません。
## 作成したテンプレートを管理する
テンプレートを作成すると、**Widgets** ダッシュボードにカードとして表示されます。
## 実験でウィジェットを使用する
コードウィジェットを実験に関連付けるには:
1. **Graphic editor** を使って実験を開くか作成します。
2. 左サイドバーで **Elements** の横の **Add** をクリックします。
3. 開いた **Add element** サイドバーで **Widgets** をクリックします。
4. リストからカスタムウィジェットを選択して構成します。
