ウィジェットビルダー

ウィジェットビルダーでは、HTML、CSS、JavaScriptでKick配信用のオーバーレイを自分で作れます。KickBotがKickのイベント（フォロー、サブスク、ギフトサブスク、KICKs、レイド、チャットメッセージなど）をリアルタイムでコードに送るので、APIに接続する必要はありません。作ったウィジェットは自分の配信で使えるほか、公開すれば、ほかの配信者がウィジェットライブラリからインストールできます。kickbot.com/dashboard/widget-builderから開けます。

ビルダーは、ある程度コードを書ける人向けです。すぐ使えるオーバーレイがほしいだけなら、ウィジェットライブラリを使ってください。コードのリファレンス（イベント、データ、設定）は、ウィジェットビルダーのリファレンスにあります。

ウィジェットビルダーには、自作のウィジェットとOBS用のURLが並びます。

新しいウィジェットを作る

1. kickbot.com/dashboard/widget-builderを開き、新しいウィジェットをクリックします。
2. 空白を選ぶか、テンプレート（Viewer Count、Simple Follower Goal、Basic Chat Widget）から始めます。テンプレートを選ぶと、そのKickBotウィジェットのコードがコピーされ、自由に変更できます。
3. ウィジェット名を入力します。空白のウィジェットでは、幅と高さもピクセルで設定します（デフォルトは800 × 600）。
4. ウィジェットを作成をクリックします。エディターが開きます。

空白のウィジェットかテンプレートから始めます。

ノート

無料プランでは、ウィジェットビルダーで作れるウィジェットは10個までです。Premiumなら上限はありません。ライブラリからインストールしたウィジェットは数に入りません。

エディター

エディターは3つの部分に分かれています。左が設定、中央がコード、右がライブプレビューです。

ウィジェットビルダーのエディターの設定、コード、プレビュー。

• 基本設定：名前と、ウィジェットを表示する幅と高さ。
• ユーザー変数：色、テキスト、目標の数など、配信者がコードなしで変えられる設定です。ユーザー変数をご覧ください。
• テストイベントを送信：プレビューに架空のイベント（サブスク、ギフトサブスク、KICKs、フォロー、レイド、メッセージなど）を送るボタンです。
• 公開設定：ウィジェットが非公開か公開済みかを表示します。ウィジェットを公開ボタンもここにあります。
• コード：HTML、CSS、JavaScriptのタブです。上のエディターのレイアウトで、ファイルを1つだけ表示する（1画面）か、2つ同時に表示する（左右に並べるまたは上下に並べる）かを選べます。
• プレビュー：ウィジェットを実際のサイズで、画面に収まるように縮小して表示します。入力するたびに更新されます。再読み込みボタンで最初から動かし直せます。ポップアウトボタンで別ウィンドウに開くこともできます（ブラウザのコンソールを開くときに便利です）。

エディターは、入力中に自動で保存します。保存ですべてをまとめて保存でき、その下に最後に保存した時刻が表示されます。終了でウィジェットの一覧に戻ります。

エディターには広い画面が必要です。スマホで開くと、パソコンで開くよう案内されます。ウィジェットは保存されているので、パソコンから続きを作れます。

ウィジェットをテストする

1. テストイベントを送信を開きます。
2. フォローやメッセージなどのイベントをクリックします。
3. プレビューの反応を確認します。

テストイベントは実際のイベントと同じ形で、サンプルのデータが入っています。送られるのはこのページのプレビューだけで、OBSや配信には送られません。実際のイベントで試すには、ウィジェットをOBSに追加して配信を始めるか、友だちにチャンネルをフォローしてもらいます。

ウィジェットを配信で使う

自分で作ったウィジェットは、保存したウィジェットにも、名前の下に「自作のウィジェット」と表示されて並びます。URLでは、いつも最新のコードが動きます。

1. ウィジェットビルダーのページで、ウィジェットのURLをコピーをクリックします。
2. OBSでブラウザソースを追加し、URLを貼り付けて、幅と高さをウィジェットのサイズに合わせます。
3. OKをクリックします。

ウィジェットをOBSに入れたままコードを変えた場合は、ブラウザソースを更新して新しいコードを読み込んでください。保存したウィジェットでユーザー変数の値を変えて保存をクリックした場合は、OBSがウィジェットを自動で読み込み直します。詳しくは、OBSにブラウザソースを追加するをご覧ください。

注意

URLはほかの人に教えないでください。URLを知っていれば、誰でも自分の画面にウィジェットを表示できます。

ウィジェットライブラリに公開する

ほかの配信者に見つけてインストールしてほしいときは、ウィジェットを公開します。

1. エディターで公開設定を開き、ウィジェットを公開をクリックします。
2. メイン画像と、ほかに1枚以上の画像を追加します。画像は合計10枚まで、1枚10MBまでです。1920 × 1080がおすすめです。
3. 説明を書きます。ウィジェットに何が表示されるか、どう設定するかを書いてください。
4. 送信します。ポップアップに審査に送信しましたと表示されます。

KickBotチームがウィジェットを1つずつ審査します。承認されると、作成者として自分のKick名が付いて、ウィジェットライブラリに載ります。審査は通常24時間以内に終わります。

注意

ウィジェットを公開できるのは1回だけです。公開後は、エディターに「このウィジェットは公開済みです。変更するにはサポートにご連絡ください。」と表示されます。公開する前に、しっかりテストしてください。

ウィジェットを削除する

ウィジェットビルダーのページで、ウィジェットの**⋯**メニューを開き、削除をクリックします。コードと設定が削除され、元に戻せません。

チームメンバー

エディターを開いてウィジェットを作るには、チームメンバーにウィジェットビルダー権限が必要です。ウィジェットのURLを見るには、ウィジェットの設定権限が必要です。チーム管理をご覧ください。

よくある質問

コードを書ける必要がありますか？

はい。HTML、CSS、JavaScriptが少し必要です。コードを書かない場合は、ウィジェットライブラリからウィジェットをインストールして、設定を変えてください。

ライブラリにあるKickBotのウィジェットを編集できますか？

ライブラリのウィジェットのコードは変更できません。Viewer Count、Simple Follower Goal、Basic Chat Widgetのテンプレートから新しいウィジェットを作ると、変更できるコードのコピーが手に入ります。

ウィジェットでフォント、画像、ほかのスクリプトを読み込めますか？

はい。HTML、CSS、JavaScriptはOBSの中の普通のWebページとして動くので、ほかのサイトのWebフォント、画像、スクリプトを読み込めます。配信者に自分のファイルをアップロードしてもらうには、画像/GIF、動画、音声のユーザー変数を使います。

KickBot APIでウィジェットを作れますか？

はい。KickBot APIで、ウィジェットの一覧取得、作成、更新ができます。ウィジェットAPIのリファレンスをご覧ください。