KapChatとは
KapChatは、Twitchのチャットをエンコードソフトを通して配信画面上に載せるためのWebサービスです。Twitchエモートもそのまま読み込んでくれ、かつCSSをいじれますから知識がある人なら自由なデザインが可能です。
ブラウザソースとしてエンコードソフトから読み込んで使うため、OBS StudioでもXSplitでもどちらでも使用できます。
ここではOBS Studioを使って導入する方法を載せておきます。
KapChatの公式サイト
上記のサイトがKapChatの公式サイトです。
このサイトから操作して自分のチャンネルのチャット欄を表示させてレイアウトなどをいじり、それをエンコードソフトに映すことになります。
KapChatの使い方
公式サイトに緑のボタン（OBSかXSplit）がありますが、自分の使うエンコードソフトに応じて選択してください。ちなみにどちらの設定方法もほぼ同じで、XSplitを選ぶとStep1が省略されるだけです。
Step1 - OBSの設定
最初にOBSを使っている場合のみの設定ですが、ブラウザのプラグインを入れていない場合はこの緑のボタンからダウンロードして欲しいというリンクが出ています。
最新のOBS Studioを使っているのなら初めからそのブラウザのプラグインは入っています。なので、大抵の方はここでの操作は不必要です。”Next”ボタンをさっさと押してしまいましょう。
Step2 - KapChatの基本設定
Step2が設定のメインです。ここだけちゃんと入力すればとりあえずはチャットをエンコードソフト上に映すことが可能になります。
順を追って項目ごとに説明していきます。
Username
Twitchのユーザーネームをここで入力します。英語でも注意書きがありますが、TwitchのチャンネルのURLではなくユーザー名をここに入力します。
ユーザー名を日本語に変えている方もいるかもしれませんが、日本語ユーザー名ではなく元のユーザー名（アルファベットのもの）を入力します。
Chat Fade
時間の経った古いチャットをフェードアウトして消すかどうかを選択する項目です。
Chat Fade Length
上記の”Chat Fade”を選択している人のみ有効な設定で、どれくらい時間が経ったらチャットを画面上から消すかを秒数で選択できます。
デフォルトですと30秒になっています。自身のチャンネルのチャット速度と相談して適切な秒数にするといいでしょう。
Show Bots
NightbotやMoobotなどのTwitchチャットで動くbotの発言を表示させるかどうかを選択できます。
Prevent Cliping
Twitchのクリップを表示させるかどうかを選択できます。
注意書きでは、大きなチャンネルだとクリップ情報だけでチャットが埋まってしまうかもしれないと書かれています。
Chat Theme
チャットのテーマをプルダウン式で選択できます。
チャットのデザインに関わりますので、適当に選択して下の”Preview”を押して色々と試してみてください。
全て設定が終わったら基本的な設定は完了です。
Step3 - 実際のURL
基本的な設定が終わると、実際にエンコードソフト上にKapChatを表示させるために必要なURLが出てきます。コピーしておきましょう。
なお、チャットを表示させる領域としてはwidth（幅）は300px、height（高さ）は600pxほどは最低でも欲しいそうです。
Step4 - CSSの設定
Step4はCSSの設定です。CSSの知識が必要とはなりますが、文字のフォントやサイズなど、細かな設定が可能です。
ただ、CSSの設定はエンコードソフト上からもでき、かつそちらのほうがカスタマイズが簡単なので今回の例ではここでCSSを設定することはありません。何も設定せず飛ばしてください。
Step5 - おしまい
Step5まで進めると設定が完了したことを知らせるメッセージが表示されます。
CSSをいじらないため、実際にはStep3のURLが表示された時点で設定は完了しています。
OBSの設定
KapChatの設定は終わったので、次にチャットをOBS Studioに表示させるための設定を行います。
Step3で表示されたURLが必要なので、文字列を忘れずにコピーしておいてください。
OBS Studioのソースを追加し、『BrowerSource』を選択してください。
”URL”のところにStep3で出てきた文字列を入れます。
Widthはチャットの幅、Heightはチャットの高さを表します。ここは好きに数字を入れてカスタマイズしてください。
ここまでやると、とりあえずチャット欄をエンコードソフト上に映すことができるようになります。
CSSの設定
KapChatはこのままでも使えますが、文字サイズの変更やフォントの変更などを行いたい方もいるでしょう。
KapChatの基本設定からもCSSの設定はできますが、OBS Studio上から設定したほうが見た目の変わり方がすぐに分かって設定しやすいです。
文字サイズの変更
KapChatを表示しているソースのプロパティより、以下の文字列を入力します。
コピペして使ってください。
.chat_line .nick, .chat_line .message {
font-size:20px !important;
}”20px”となっているところを任意の数字に置き換え、16pxだったり24pxだったり好みに応じて使ってください。
フォントの変更
.chat_line .nick, .chat_line .message {
font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo" !important;
}先に書いたフォント名から優先して表示するようなコードです。
フォントがインストールされている必要はありますが、Macならヒラギノ角ゴ、Windowsならメイリオで表示されます。
KapChatのデフォルトフォントは漢字が中文のようになってしまうため、それを回避するためにフォントは自身のPCに入っている日本語フォントを使用するといいでしょう。