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

> チャット、アラート、TTSなどKickBotのオーバーレイを、ブラウザソースとしてOBS Studio、Streamlabs Desktop、Meld Studioに追加する方法。サイズ、音声、表示されないときの対処もまとめています。

Source: https://kickbot.com/ja/docs/getting-started/add-browser-source-obs

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

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

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

| オーバーレイ | リンクをコピーする場所 | 詳しい説明 |
|---|---|---|
| チャットオーバーレイ、アラート、カウンターなどのウィジェット | ウィジェットライブラリでウィジェットをインストールしたあと、**ウィジェット** > **保存したウィジェット** | [ウィジェットライブラリ](https://kickbot.com/ja/docs/widgets/widget-library)、[チャットオーバーレイ](https://kickbot.com/ja/docs/widgets/chat-overlay) |
| テキスト読み上げ | **TTS** > **設定**の**OBS用ブラウザソース** | [TTSを設定する](https://kickbot.com/ja/docs/tts/set-up-tts) |
| 投げ銭アラート | **投げ銭** > **ウィジェット** | [投げ銭アラート](https://kickbot.com/ja/docs/tipping/tip-alerts) |
| AI画像 | **チャットボット** > **AI画像**の**ウィジェット** | [AI画像](https://kickbot.com/ja/docs/ai/ai-images) |

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

## サイズを決める

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

![ウィジェットライブラリの「このウィジェットについて」カード。配信でのサイズは800 × 600 px](https://kickbot.com/docs/images/getting-started/add-browser-source-obs/01-size-on-stream.webp "配信でのサイズの値を、ブラウザソースの幅と高さに使います。")

サイズが表示されないページの場合は、ブラウザソースをキャンバスと同じサイズ（例：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の[ブラウザソースのガイド](https://obsproject.com/kb/browser-source)（英語）にあります。

> **ポイント:** 同じオーバーレイを複数のシーンで使うなら、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の[ブラウザソースの記事](https://streamlabs.com/content-hub/post/introducing-browser-source-interaction-for-streamlabs-desktop)（英語）も参考にしてください。オーバーレイの音が聞こえないときは、音声ミキサーでミュートになっていないか確認してください。

## 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の[レイヤーのドキュメント](https://meldstudio.co/docs/layers/)（英語）で説明されています。

## トラブルシューティング

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

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

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

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

## よくある質問

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

ウィジェットライブラリからチャットウィジェットをインストールし、**保存したウィジェット**でリンクをコピーします。ウィジェットに表示されたサイズで、OBSに**ブラウザ**ソースとして追加してください。詳しくは[チャットオーバーレイ](https://kickbot.com/ja/docs/widgets/chat-overlay)をご覧ください。

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

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

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

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

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

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