# Kickのチャットオーバーレイ

> 背景が透明なOBS用チャットウィジェットで、Kickのチャットを配信に表示します。インストールして、フォントサイズ、色、バッジ、エモートを設定し、URLを貼り付けます。

Source: https://kickbot.com/ja/docs/widgets/chat-overlay

Kickのチャットオーバーレイは、ライブのチャットメッセージを配信画面に表示します。KickBotの**Basic Chat Widget**は、背景が透明なOBS用のチャットウィジェットです。ウィジェットライブラリからインストールし、フォントと色を変えて、URLをブラウザソースとして追加します。Kickのバッジ、Kickと7TVのエモートを表示し、モデレーターが削除したメッセージは消えます。

Kickチャンネルを接続したKickBotアカウントが必要です。チャットオーバーレイを使うのに、KickBotをモデレーターにする必要はありません。

## チャットのスタイルを選ぶ

KickBotには、公式のチャットウィジェットが3つあります。どれも800 × 600ピクセルです。下の設定はBasic Chat Widgetのものです。ほかの2つでも、色や表示のオプションを変えられます。

- **Basic Chat Widget**：背景なし。名前、バッジ、メッセージだけが表示されるので、チャットがゲーム画面の上に重なります。定番の透明なKickチャットオーバーレイです。
- **Basic chat (Block background)**：メッセージごとに、後ろに暗いブロックが付きます。
- **Basic chat (Box background)**：すべてのメッセージが1つの暗いボックスに入ります。

ライブラリには、ほかの配信者が作ったチャットウィジェットもあります。アニメーション付き、横向き、タイプライター風などです。[ウィジェットライブラリ](https://kickbot.com/ja/docs/widgets/widget-library)で**チャット**を検索すると、すべて見られます。

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

1. [ウィジェットライブラリ](https://kickbot.com/dashboard/widget-library)を開き、**Basic Chat Widget**（または別のチャットスタイル）をクリックします。
2. **ウィジェットをインストール**をクリックします。
3. [保存したウィジェット](https://kickbot.com/dashboard/saved-widgets)を開き、チャットウィジェットの**URLをコピー**をクリックします。
4. OBSで、シーンに**ブラウザ**ソースを追加し、**URL**欄にURLを貼り付けます。
5. **幅**を800、**高さ**を600にして、**OK**をクリックします。

最近のチャットがすぐに表示され、新しいメッセージもリアルタイムで流れます。画面上のサイズを変えるには、OBSでソースの角をドラッグします。文字の大きさは、OBSで拡大せずにKickBotの**Font size**（フォントサイズ）で変えてください。そのほうが文字がくっきりします。

## 設定

保存したウィジェットでチャットウィジェットをクリックすると、設定が開きます。上部のプレビューに、変更を反映したサンプルのチャットが表示されます。終わったら**保存**をクリックします。OBSのオーバーレイは自動で読み込み直されます。

![チャットのプレビュー、ウィジェット名、Font size、Show bots、Remove old messages、Text colorがあるKickBotのBasic Chat Widgetの設定パネル](https://kickbot.com/docs/images/widgets/chat-overlay/01-edit-settings.webp "チャットオーバーレイの設定を変えて、プレビューで確認します。")

| 設定 | 内容 | 初期値 |
| --- | --- | --- |
| ウィジェット名 | 保存したウィジェットの一覧に表示される名前です。配信には表示されません。 | Basic Chat Widget |
| Font size（フォントサイズ） | メッセージの文字の大きさ（ピクセル）です。 | 26 |
| Show bots（ボットを表示） | オフにすると、KickBotやほかの既知のチャットボットのメッセージを隠します。 | オン |
| Remove old messages（古いメッセージを消す） | オンにすると、各メッセージが下の時間のあとに消えます。 | オン |
| Remove messages after（メッセージを消すまでの時間） | メッセージが消えるまでの秒数です。 | 60 |
| Text color（文字色） | メッセージの文字の色です。名前は、チャット参加者ごとのKickの名前の色のままです。 | 白（#ffffff） |
| Show badges（バッジを表示） | 名前の横にKickのバッジを表示します。配信者、モデレーター、VIP、OG、Founder、Sub gifter、チャンネル独自のサブスクバッジです。 | オン |
| Show emotes（エモートを表示） | Kickのエモートと自分の7TVエモートを画像で表示します。オフにすると、エモートはメッセージから省かれます。 | オン |
| Text shadow（文字の影） | 柔らかい影と縁取りを付け、明るいシーンでも文字を読みやすくします。 | オン |
| Highlight @ messages（@メッセージを強調） | チャンネル名をタグ付けしたメッセージを強調表示します。 | オン |

モデレーターがKickでメッセージを削除すると、オーバーレイからも消えます。

**テストイベント**で**メッセージ**をクリックするとサンプルのチャットメッセージがプレビューに追加され、**メッセージ削除**をクリックすると1件消えます。テストイベントはプレビューにだけ送られ、OBSには送られません。

![チャットウィジェット設定の下部。Highlight @ messages、「メッセージ」と「メッセージ削除」のテストボタン、隠されたブラウザソースのURL](https://kickbot.com/docs/images/widgets/chat-overlay/02-edit-obs.webp "テストイベントとブラウザソースのURLは、パネルの下部にあります。")

> **Caution:** チャットウィジェットのURLは人に教えないでください。URLを知っている人は誰でも、自分の画面にこのチャットオーバーレイを表示できます。

## 透明なチャットオーバーレイを作る

**Basic Chat Widget**には背景がないので、OBSでは最初から透明です。名前、バッジ、エモート、テキストだけが表示されます。ゲーム画面が明るくて文字が読みにくい場合は、**Text shadow**をオンのままにするか、メッセージごとに暗いブロックが付く**Basic chat (Block background)**をインストールしてください。

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

**OBSにメッセージが表示されない**：保存したウィジェットからURLをすべて貼り付けたか確認してください。Kickチャットにメッセージを入力して、数秒待ちます。それでも何も表示されない場合は、OBSでソースを右クリックし、**プロパティ**の**現在のページのキャッシュを更新**をクリックします。

**文字がぼやける**：OBSでソースを引き伸ばしているのが原因です。ソースを800 × 600に戻し、KickBotで**Font size**を大きくしてください。

**ボットのメッセージがまだ表示される**：**Show bots**をオフにして**保存**をクリックします。このフィルターで隠れるのは、KickBotとよく使われるKickボットの一覧です。別の名前のボットアカウントは表示されます。

**エモートが表示されない**：**Show emotes**をオンにして**保存**をクリックします。7TVのエモートを使うには、7TVでKickチャンネルを連携しておく必要があります。

ブラウザソースについて詳しくは[KickBotのオーバーレイをOBSに追加する](https://kickbot.com/ja/docs/getting-started/add-browser-source-obs)をご覧ください。チャットを表示するほかの方法も含めた手順は、[KickのチャットをOBSに表示する](https://kickbot.com/ja/guides/setup/add-kick-chat-to-obs)にあります。

## よくある質問

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

[KickBotのウィジェットライブラリ](https://kickbot.com/dashboard/widget-library)からBasic Chat Widgetをインストールし、保存したウィジェットでURLをコピーして、800 × 600のブラウザソースとしてOBSに追加します。

**KickBotのチャットウィジェットは無料ですか？**

はい。ライブラリのチャットウィジェットは無料プランで使えます。

**KickのチャットオーバーレイはStreamlabsやMeldでも使えますか？**

はい。Streamlabs Desktop、Meldなど、Webページを表示できるアプリなら、同じURLをブラウザソースとして追加できます。

**プレビューにサンプルの名前が表示されるのはなぜですか？**

KickBotのプレビューでは、設定を確認できるようにサンプルのメッセージを表示しています。OBSのオーバーレイには、実際のKickチャットが表示されます。