# ウィジェットビルダー
> KickBotのウィジェットビルダーで、HTML、CSS、JavaScriptを使ってKick配信用の自作ウィジェットを作ります。テストイベントで確認し、ライブラリに公開できます。
Source: https://kickbot.com/ja/docs/widgets/widget-builder
ウィジェットビルダーでは、HTML、CSS、JavaScriptでKick配信用のオーバーレイを自分で作れます。KickBotがKickのイベント（フォロー、サブスク、ギフトサブスク、KICKs、レイド、チャットメッセージなど）をリアルタイムでコードに送るので、APIに接続する必要はありません。作ったウィジェットは自分の配信で使えるほか、公開すれば、ほかの配信者がウィジェットライブラリからインストールできます。[kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder)から開けます。
ビルダーは、ある程度コードを書ける人向けです。すぐ使えるオーバーレイがほしいだけなら、[ウィジェットライブラリ](https://kickbot.com/ja/docs/widgets/widget-library)を使ってください。コードのリファレンス（イベント、データ、設定）は、[ウィジェットビルダーのリファレンス](https://kickbot.com/ja/docs/widgets/widget-builder-reference)にあります。
## 新しいウィジェットを作る
1. [kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder)を開き、**新しいウィジェット**をクリックします。
2. **空白**を選ぶか、テンプレート（**Viewer Count**、**Simple Follower Goal**、**Basic Chat Widget**）から始めます。テンプレートを選ぶと、そのKickBotウィジェットのコードがコピーされ、自由に変更できます。
3. **ウィジェット名**を入力します。空白のウィジェットでは、**幅**と**高さ**もピクセルで設定します（デフォルトは800 × 600）。
4. **ウィジェットを作成**をクリックします。エディターが開きます。
> **Note:** 無料プランでは、ウィジェットビルダーで作れるウィジェットは10個までです。Premiumなら上限はありません。ライブラリからインストールしたウィジェットは数に入りません。
## エディター
エディターは3つの部分に分かれています。左が設定、中央がコード、右がライブプレビューです。
- **基本設定**：名前と、ウィジェットを表示する幅と高さ。
- **ユーザー変数**：色、テキスト、目標の数など、配信者がコードなしで変えられる設定です。[ユーザー変数](https://kickbot.com/ja/docs/widgets/widget-builder-reference#user-variables)をご覧ください。
- **テストイベントを送信**：プレビューに架空のイベント（サブスク、ギフトサブスク、KICKs、フォロー、レイド、メッセージなど）を送るボタンです。
- **公開設定**：ウィジェットが非公開か公開済みかを表示します。**ウィジェットを公開**ボタンもここにあります。
- **コード**：**HTML**、**CSS**、**JavaScript**のタブです。上の**エディターのレイアウト**で、ファイルを1つだけ表示する（**1画面**）か、2つ同時に表示する（**左右に並べる**または**上下に並べる**）かを選べます。
- **プレビュー**：ウィジェットを実際のサイズで、画面に収まるように縮小して表示します。入力するたびに更新されます。再読み込みボタンで最初から動かし直せます。ポップアウトボタンで別ウィンドウに開くこともできます（ブラウザのコンソールを開くときに便利です）。
エディターは、入力中に自動で保存します。**保存**ですべてをまとめて保存でき、その下に最後に保存した時刻が表示されます。**終了**でウィジェットの一覧に戻ります。
エディターには広い画面が必要です。スマホで開くと、パソコンで開くよう案内されます。ウィジェットは保存されているので、パソコンから続きを作れます。
## ウィジェットをテストする
1. **テストイベントを送信**を開きます。
2. **フォロー**や**メッセージ**などのイベントをクリックします。
3. プレビューの反応を確認します。
テストイベントは実際のイベントと同じ形で、サンプルのデータが入っています。送られるのはこのページのプレビューだけで、OBSや配信には送られません。実際のイベントで試すには、ウィジェットをOBSに追加して配信を始めるか、友だちにチャンネルをフォローしてもらいます。
## ウィジェットを配信で使う
自分で作ったウィジェットは、[保存したウィジェット](https://kickbot.com/dashboard/saved-widgets)にも、名前の下に「自作のウィジェット」と表示されて並びます。URLでは、いつも最新のコードが動きます。
1. ウィジェットビルダーのページで、ウィジェットの**URLをコピー**をクリックします。
2. OBSで**ブラウザ**ソースを追加し、URLを貼り付けて、幅と高さをウィジェットのサイズに合わせます。
3. **OK**をクリックします。
ウィジェットをOBSに入れたままコードを変えた場合は、ブラウザソースを更新して新しいコードを読み込んでください。保存したウィジェットでユーザー変数の値を変えて**保存**をクリックした場合は、OBSがウィジェットを自動で読み込み直します。詳しくは、[OBSにブラウザソースを追加する](https://kickbot.com/ja/docs/getting-started/add-browser-source-obs)をご覧ください。
> **Caution:** URLはほかの人に教えないでください。URLを知っていれば、誰でも自分の画面にウィジェットを表示できます。
## ウィジェットライブラリに公開する
ほかの配信者に見つけてインストールしてほしいときは、ウィジェットを公開します。
1. エディターで**公開設定**を開き、**ウィジェットを公開**をクリックします。
2. **メイン画像**と、ほかに1枚以上の画像を追加します。画像は合計10枚まで、1枚10MBまでです。1920 × 1080がおすすめです。
3. **説明**を書きます。ウィジェットに何が表示されるか、どう設定するかを書いてください。
4. 送信します。ポップアップに**審査に送信しました**と表示されます。
KickBotチームがウィジェットを1つずつ審査します。承認されると、作成者として自分のKick名が付いて、ウィジェットライブラリに載ります。審査は通常24時間以内に終わります。
> **Caution:** ウィジェットを公開できるのは1回だけです。公開後は、エディターに「このウィジェットは公開済みです。変更するにはサポートにご連絡ください。」と表示されます。公開する前に、しっかりテストしてください。
## ウィジェットを削除する
ウィジェットビルダーのページで、ウィジェットの**⋯**メニューを開き、**削除**をクリックします。コードと設定が削除され、元に戻せません。
## チームメンバー
エディターを開いてウィジェットを作るには、チームメンバーに**ウィジェットビルダー**権限が必要です。ウィジェットのURLを見るには、**ウィジェットの設定**権限が必要です。[チーム管理](https://kickbot.com/ja/docs/account/team)をご覧ください。
## よくある質問
**コードを書ける必要がありますか？**
はい。HTML、CSS、JavaScriptが少し必要です。コードを書かない場合は、[ウィジェットライブラリ](https://kickbot.com/ja/docs/widgets/widget-library)からウィジェットをインストールして、設定を変えてください。
**ライブラリにあるKickBotのウィジェットを編集できますか？**
ライブラリのウィジェットのコードは変更できません。**Viewer Count**、**Simple Follower Goal**、**Basic Chat Widget**のテンプレートから新しいウィジェットを作ると、変更できるコードのコピーが手に入ります。
**ウィジェットでフォント、画像、ほかのスクリプトを読み込めますか？**
はい。HTML、CSS、JavaScriptはOBSの中の普通のWebページとして動くので、ほかのサイトのWebフォント、画像、スクリプトを読み込めます。配信者に自分のファイルをアップロードしてもらうには、**画像/GIF**、**動画**、**音声**のユーザー変数を使います。
**KickBot APIでウィジェットを作れますか？**
はい。KickBot APIで、ウィジェットの一覧取得、作成、更新ができます。[ウィジェットAPIのリファレンス](https://kickbot.com/docs/api/reference/widgets)をご覧ください。