# KickのチャットをOBSに表示する方法

> KickのチャットをOBSに入れる2つの方法。配信中にチャットを読むためのチャットドックと、視聴者に見せる背景透過のチャットオーバーレイを紹介します。

Source: https://kickbot.com/ja/guides/setup/add-kick-chat-to-obs

KickのチャットをOBSに追加する方法は2つあり、たいていの配信者は両方使います。**チャットドック**はOBSの画面の中にチャットを表示するので、配信しながらチャットを読めます。**チャットオーバーレイ**はシーンに置くブラウザソースなので、視聴者が配信でチャットを見られます（アーカイブやクリップにも映ります）。

ドックにはKick標準のポップアウトチャットを使います。オーバーレイには、KickBotやStreamlabsなどのツールのチャットウィジェットが必要です。どちらも数分で設定できます。

## ドックとオーバーレイ、どちらを使う？

| | チャットドック | チャットオーバーレイ |
|---|---|---|
| 見える人 | 自分だけ（OBS内） | 視聴者（配信上） |
| 正体 | OBSの画面のパネル | シーン内のブラウザソース |
| 元になるもの | KickのポップアウトチャットのURL | チャットウィジェット（KickBot、Streamlabsなど） |
| 入力できるか | いいえ | いいえ |

## OBSにKickのチャットドックを追加する

この手順は、Kickのガイド[How to create a Kick chat dock in OBS](https://help.kick.com/en/articles/7978574-how-to-create-a-kick-chat-dock-in-obs)（英語）をもとにしています。

1. OBSを開きます。
2. メニューバーで**ドック** > **カスタムブラウザドック**をクリックします。
3. 名前を入力します（例：「Kick Chat」）。
4. ポップアウトチャットのURLを入力します：`https://kick.com/popout/yourchannel/chat`。`yourchannel`は自分のKickのユーザー名に置き換えます。
5. **適用**をクリックし、**閉じる**をクリックします。
6. **ドック**をクリックし、**Kick Chat**を選んで表示します。OBSの画面の好きな位置にドラッグします。

Kickは、ドックの制限として次の点を挙げています。

- ドックからはログインもメッセージの送信もできません。入力したいときは、ブラウザでkick.comを開いておいてください。
- Cookieのバナーがチャットの一部を隠すことがあります。メッセージが隠れないよう、ドックの幅を広げてください。
- 「Disconnected」（切断）と表示されるのは、ログインしていないためです。新しいメッセージは表示されます。

## Kickのチャットオーバーレイを配信に追加する

オーバーレイは、背景を透過させて、ゲームやカメラの上にチャットを表示します。**ブラウザ**ソースとして追加します。ここでは、無料のKickBotのチャットウィジェットでの手順を紹介します。

### 1. KickBotでチャットウィジェットをインストールする

1. まだの場合は、[KickBotのアカウントを作成](https://kickbot.com/ja/docs/getting-started/create-your-account)し、Kickチャンネルを接続します。
2. [ウィジェットライブラリ](https://kickbot.com/dashboard/widget-library)を開きます。
3. **Basic Chat Widget**（KickBotの公式ウィジェット）か、好きなほかのスタイルのチャットを開きます。
4. **ウィジェットをインストール**をクリックします。ウィジェットが**保存したウィジェット**に追加されます。
5. [保存したウィジェット](https://kickbot.com/dashboard/saved-widgets)で、ウィジェットの**URLをコピー**をクリックします。見た目を変えたい場合は、先に**編集**をクリックします。

### 2. OBSにブラウザソースを追加する

1. OBSでシーンを選びます。
2. **ソース**で**+**をクリックし、**ブラウザ**を選びます。
3. 名前（例：「Kickチャットオーバーレイ」）を入力して、**OK**をクリックします。
4. ウィジェットのURLを**URL**に貼り付けます。
5. **幅**を800、**高さ**を600にします（Basic Chat Widgetのサイズ）。あとでレイアウトに合わせて変えてください。
6. **OK**をクリックします。プレビューでオーバーレイをドラッグし、大きさを変えます。

OBSのブラウザソースには、ページの背景を透過させるカスタムCSSが最初から入っているので（[OBS browser source](https://obsproject.com/kb/browser-source)（英語））、シーンの上にはチャットのメッセージだけが表示されます。

ウィジェットのすべての設定とほかのチャットのスタイルは、[チャットオーバーレイ](https://kickbot.com/ja/docs/widgets/chat-overlay)をご覧ください。OBS、Streamlabs Desktop、Meldでのブラウザソースの使い方は、[OBSにブラウザソースを追加する](https://kickbot.com/ja/docs/getting-started/add-browser-source-obs)をご覧ください。

> **Caution:** ウィジェットのURLはほかの人に教えないでください。配信やスクリーンショットに映さないでください。

## Kickのチャットを配信に表示するほかの方法

- **Streamlabs**：Streamlabsによると、Kick配信用のチャットボックスのウィジェットがあります（[Streamlabs](https://streamlabs.com/content-hub/post/how-to-live-stream-to-kick-using-streamlabs-desktop)（英語））。[StreamlabsをKickで使う](https://kickbot.com/ja/guides/setup/streamlabs-and-kick)をご覧ください。
- **Web Go Live**：KickのWeb Go Liveでブラウザから配信する場合は、**Chat Box**（チャットボックス）ウィジェットが最初から入っています。その場合はOBSは必要ありません（[Kickのヘルプセンター](https://help.kick.com/en/articles/15952303-kick-studio-web-go-live)（英語））。

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

**オーバーレイに何も表示されない**：Kickのチャットでテストメッセージを送り、数秒待ちます。それでも表示されない場合は、ソースを右クリックして**プロパティ**を選び、**現在のページのキャッシュを更新**をクリックします。

**オーバーレイの背景が塗りつぶされている**：ブラウザソースの**カスタムCSS**欄に、初期値の透過背景の設定が残っているか確認します。変更していた場合は、変更した部分を削除します。

**チャットが切れる、または小さすぎる**：ソースを引き伸ばすのではなく、ソースのプロパティで**幅**と**高さ**を変えます。引き伸ばすと文字がぼやけます。

**ドックにCookieのバナーが表示される**：ドックでKickのポップアウトチャットを使うときの既知の制限です。ドックの幅を広げてください。

## よくある質問

**KickのチャットをOBSに追加するには？**

チャットを読むためなら、URL `https://kick.com/popout/yourchannel/chat`でOBSにカスタムブラウザドックを追加します。配信にチャットを表示するなら、チャットウィジェットのURL（例：KickBotのもの）をシーンにブラウザソースとして追加します。

**背景が透明なKickのチャットオーバーレイを作るには？**

KickBotのチャットウィジェットなど、OBS用に作られたチャットウィジェットを使い、ブラウザソースとして追加します。OBSでは、ページの背景が最初から透過されます。

**OBSからKickのチャットに入力できますか？**

いいえ。Kickによると、ドックからはログインもメッセージの送信もできません。入力するには、ブラウザかスマホでkick.comを開いておいてください。