KickBotのオーバーレイをOBSに追加する

KickBotのオーバーレイは、どれもWebのリンクです。Kickの配信に表示するには、KickBotのダッシュボードでリンクをコピーし、配信ソフトにブラウザソースとして追加します。チャットオーバーレイ、アラート、TTS、投げ銭アラート、AI画像のどれも同じ手順で、OBS Studio、Streamlabs Desktop、Meld Studioなど、ブラウザソースに対応したアプリで使えます。インストールするものはありません。

オーバーレイのリンクを探す

リンクは機能ごとに用意されています。下の表のページからコピーしてください。

オーバーレイ	リンクをコピーする場所	詳しい説明
チャットオーバーレイ、アラート、カウンターなどのウィジェット	ウィジェットライブラリでウィジェットをインストールしたあと、ウィジェット > 保存したウィジェット	ウィジェットライブラリ、チャットオーバーレイ
テキスト読み上げ	TTS > 設定のOBS用ブラウザソース	TTSを設定する
投げ銭アラート	投げ銭 > ウィジェット	投げ銭アラート
AI画像	チャットボット > AI画像のウィジェット	AI画像

注意

オーバーレイのリンクはほかの人に教えないでください。リンクを知っていれば誰でも使えます。チャットに貼ったり、配信に映したりしないでください。

サイズを決める

ウィジェットライブラリのウィジェットには、配信でのサイズにサイズが表示されます（例：800 × 600 px）。この幅と高さをブラウザソースに設定します。同じサイズは保存したウィジェットのウィジェットにも表示されます。

配信でのサイズの値を、ブラウザソースの幅と高さに使います。

サイズが表示されないページの場合は、ブラウザソースをキャンバスと同じサイズ（例：1920 × 1080）にします。そのあと、シーンの中でソースを動かしたり、大きさを変えたりします。ほとんどのオーバーレイは背景が透明なので、配信には中身だけが映ります。

OBS Studio

1. シーンのソース欄で**+**をクリックし、ブラウザを選びます。
2. 名前（例：「KickBotチャット」）を入力して確定します。
3. プロパティ画面で、オーバーレイのリンクをURLに貼り付けます。
4. 幅と高さをオーバーレイのサイズに合わせます。
5. 音が出るオーバーレイ（TTS、アラート、投げ銭アラート）では、OBSで音声を制御する（Control audio via OBS）をオンにします。ソースが音声ミキサーに表示され、音量を変えられるようになります。
6. OKをクリックします。ソースをキャンバス上の好きな位置にドラッグします。

OBSのブラウザソースには、ほかにも次のオプションがあります。

• 表示されていないときにソースをシャットダウン（Shutdown source when not visible）：シーンが配信に映っていないとき、オーバーレイを閉じます。アラートとTTSではオフのままにしてください。別のシーンにいる間も取りこぼしがなくなります。
• シーンがアクティブになったときブラウザの表示を更新（Refresh browser when scene becomes active）：シーンに切り替えるたびにオーバーレイを読み込み直します。再生中のメッセージは、読み込み直したときに止まります。
• 現在のページのキャッシュを更新（Refresh cache of current page）：オーバーレイをすぐに読み込み直すボタンです。KickBotで設定を変えたあとや、表示がおかしいときに使います。

各オプションの説明は、OBSのブラウザソースのガイド（英語）にあります。

ポイント

同じオーバーレイを複数のシーンで使うなら、1つのシーン（例：「KickBotオーバーレイ」）にまとめます。そのシーンを、ほかのシーンにソースとして追加します。リンクの追加は1回で済みます。

Streamlabs Desktop

1. スタジオ画面で、Sources（ソース）の横の**+**をクリックします。
2. Browser Source（ブラウザソース）を選び、名前を入力してAdd Source（ソースを追加）をクリックします。
3. ソースの設定で、URL欄にオーバーレイのリンクを貼り付け、幅と高さを設定します。
4. 設定を閉じて、ソースを好きな位置に動かします。

Streamlabs DesktopにもOBSと同じShutdown source when not visibleとRefresh browser when scene becomes activeのオプションがあります。Streamlabsのブラウザソースの記事（英語）も参考にしてください。オーバーレイの音が聞こえないときは、音声ミキサーでミュートになっていないか確認してください。

Meld Studio

1. Layers（レイヤー）パネルで**+**をクリックし、Browser（ブラウザ）を選びます。
2. Inspector（インスペクター）のURL欄に、オーバーレイのリンクを貼り付けます。
3. キャンバス上でレイヤーの大きさを変えるか、InspectorでWとHを設定します。
4. 音が出るオーバーレイでは、URL欄の下にあるAdd an audio track for the source（ソースの音声トラックを追加）をオンにします。Meldはブラウザレイヤーに音声トラックを自動では追加しません。

Meldのキャンバスにリンクを直接貼り付けても、ブラウザレイヤーを作れます。URL欄の横の再読み込みアイコンで、オーバーレイを読み込み直せます。レイヤーについては、Meldのレイヤーのドキュメント（英語）で説明されています。

トラブルシューティング

ソースに何も表示されない。

• 多くのオーバーレイは、表示する内容があるときだけ映ります。チャットオーバーレイは、誰かがチャットするまで空のままです。アラートはイベントが起きたときだけ表示されます。
• ダッシュボードからリンクをもう一度コピーして、ソースに貼り付けます。ウィジェットを削除してからインストールし直した場合は、リンクが新しくなっています。
• オーバーレイを読み込み直します。OBSでは現在のページのキャッシュを更新、Meldでは再読み込みアイコンを使います。
• ソースが非表示（目のアイコン）になっていないか、一覧でほかのソースの後ろに隠れていないか確認します。

TTSやアラートの音が出ない。

• OBS：ソースのプロパティでOBSで音声を制御するをオンにし、音声ミキサーでソースがミュートになっていないか確認します。
• Meld：Add an audio track for the sourceをオンにします。
• KickBot側の音量設定を確認します。たとえば、TTSの音量はTTS設定にあります。
• OBSで配信中に自分でも音を聞くには、編集 > オーディオの詳細プロパティを開き、そのソースの音声モニタリングをモニターと出力にします。どちらの設定でも、視聴者には聞こえます。

KickBotで変えた設定が配信に反映されない。 現在のページのキャッシュを更新でオーバーレイを読み込み直します。読み込むときにしか設定を読まないオーバーレイもあります。

オーバーレイが切れる、または小さすぎる。 ソースの幅と高さを、配信でのサイズに表示されているオーバーレイのサイズに合わせます。文字をくっきり保つため、キャンバス上で引き伸ばさず、ソースのプロパティでサイズを変えてください。

よくある質問

KickのチャットをOBSに表示するには？

ウィジェットライブラリからチャットウィジェットをインストールし、保存したウィジェットでリンクをコピーします。ウィジェットに表示されたサイズで、OBSにブラウザソースとして追加してください。詳しくはチャットオーバーレイをご覧ください。

KickBotのオーバーレイはStreamlabsやMeldでも使えますか？

はい。OBS Studio、Streamlabs Desktop、Meld Studioなど、ブラウザソースに対応した配信ソフトならどれでも使えます。

1つのオーバーレイのリンクを複数のシーンで使えますか？

はい。各シーンに同じソースを追加するか、オーバーレイを1つのシーンにまとめて、そのシーンをほかのシーンに追加します。

オーバーレイでPCは重くなりますか？

オーバーレイは軽いWebページです。TTS音声の作成などの処理は、KickBotのサーバーで行われます。ブラウザソースは結果を表示し、再生するだけです。