Streamlabsを使うことで、配信画面上にチャットやフォロー通知などを表示できるようになります。
Twitchアカウントを持っており、配信ツールにOBS studioを使う前提でStreamlabsの設定方法を紹介していきます!
ここからは、Chat Boxの設定を詳しく紹介します。Chat Boxの設定画面を開くと、右側は↓の様になっていると思います。
上から順に説明します。
Theme:チャットの表示テーマを設定できます。
デフォルトのCleanテーマも見やすいですが、ユーザ名と本文が分割されているため、チャットボックスが縦長になっているとスペースが少し無駄になりがち。場合によっては名前が隠れてしまう事も・・・
個人的には、TwitchもしくはBoxedテーマがおすすめです。
Badges:↑の画像に出ている、配信者やTwitchPrime会員であることなどを示すバッジの表示設定です。特に気にしなければ全てONでもOFFでも構いません。
Extra Emotes:Twitchには Kappa などの有名なエモート(絵文字とLineスタンプを足して2で割ったような機能)があります。Twitchユーザー全員が使えるGlobal Emotes以外に、BetterTTVやFrankerFaceZという外部サービスが提供するエモートがあり、表示するかどうかを変更できます。
外国人の配信で monkaS などという不思議な単語を見たことがあるかもしれませんが、BetterTTVユーザーにはこんなエモートが見えています。
Background Color:「Note: This back groundcolor is...」と書かれている通りプレビュー用の背景色設定なので、何色に設定してもOBS上では透明になります。無視しておっけー。
Text Color:チャット本文の色を設定します。よくわからなかったら白色(#FFFFFF)でおっけー。右側の四角部分をクリックすると、カラーパレットが開くので直感的に色が選べます。
Font Size:フォントサイズ。
Hide Message After:表示後に投稿されたチャットが消えるまでの秒数を設定します。チャットを消したくない場合は「Always Show Message」のチェックをONにしましょう。
Hide Chatters:チャットbotやチャットコマンドの表示設定です。よくわからない場合はそのままでOK。
「Hide=隠す」なので、チェックボックスをONにすることでbotが投稿したチャットや、「!」から始まるコマンドを非表示にします。
Muted Chatters:ユーザー単位でチャットをミュート(非表示)にする機能です。あくまで配信画面上で非表示にするだけなので、配信右側のチャット欄には表示されてしまいますし、棒読みちゃんなどを連携させている場合は読み上げられてしまいます。あんまり意味がない・・・
Enable Custom HTML/CSS:よくわからなければDisabledのままでおっけー。
Enabledをチェックすることで、自作のHTML/CSSを用いたチャット表示が有効になります。
設定が完了したら、SAVE SETTINGSをクリックして設定を保存しましょう。画面右上にもプレビューがありますが、フォントのサイズ感や色などは、実際にOBSの画面上で確認したほうがいいでしょう。
- Streamlabsサイトに行く https://streamlabs.com/
- LOG IN WITH TWITCHをクリック
- 画面左下のCHAT BOXをクリック
- Widget URLの右側にあるCOPYをクリック
- OBS studioに新しいソース:BrowserSourceを追加(ソース下側の+マークから↓の画面に)
- 新規作成にチェックを入れ、適当なソース名(Chat Boxなど)を入れてOKをクリック
- ソースのプロパティ画面が開くので、URLに手順4でコピーしたURLを貼り付け
この時、黄色で囲ったWidth(横幅)、Height(高さ)を変更することで、表示するチャット欄を横長にしたり縦長にしたりと変更できます。 - ソースの赤枠の丸いポイントをドラッグしてサイズを変更→Twitchのダッシュボードなどからコメントを入力し、OBS上に反映されるかチェックします。
文字サイズはStreamlabsのダッシュボードページ(手順3)から変更できます。
該当ページのFont Sizeスライダーで調節し、SAVE SETTINGSボタンで変更を保存しましょう。
ここからは、Chat Boxの設定を詳しく紹介します。Chat Boxの設定画面を開くと、右側は↓の様になっていると思います。
上から順に説明します。
Theme:チャットの表示テーマを設定できます。
デフォルトのCleanテーマも見やすいですが、ユーザ名と本文が分割されているため、チャットボックスが縦長になっているとスペースが少し無駄になりがち。場合によっては名前が隠れてしまう事も・・・
個人的には、TwitchもしくはBoxedテーマがおすすめです。
Badges:↑の画像に出ている、配信者やTwitchPrime会員であることなどを示すバッジの表示設定です。特に気にしなければ全てONでもOFFでも構いません。
Extra Emotes:Twitchには Kappa などの有名なエモート(絵文字とLineスタンプを足して2で割ったような機能)があります。Twitchユーザー全員が使えるGlobal Emotes以外に、BetterTTVやFrankerFaceZという外部サービスが提供するエモートがあり、表示するかどうかを変更できます。
外国人の配信で monkaS などという不思議な単語を見たことがあるかもしれませんが、BetterTTVユーザーにはこんなエモートが見えています。
Background Color:「Note: This back groundcolor is...」と書かれている通りプレビュー用の背景色設定なので、何色に設定してもOBS上では透明になります。無視しておっけー。
Text Color:チャット本文の色を設定します。よくわからなかったら白色(#FFFFFF)でおっけー。右側の四角部分をクリックすると、カラーパレットが開くので直感的に色が選べます。
Font Size:フォントサイズ。
Hide Message After:表示後に投稿されたチャットが消えるまでの秒数を設定します。チャットを消したくない場合は「Always Show Message」のチェックをONにしましょう。
Hide Chatters:チャットbotやチャットコマンドの表示設定です。よくわからない場合はそのままでOK。
「Hide=隠す」なので、チェックボックスをONにすることでbotが投稿したチャットや、「!」から始まるコマンドを非表示にします。
Muted Chatters:ユーザー単位でチャットをミュート(非表示)にする機能です。あくまで配信画面上で非表示にするだけなので、配信右側のチャット欄には表示されてしまいますし、棒読みちゃんなどを連携させている場合は読み上げられてしまいます。あんまり意味がない・・・
Enable Custom HTML/CSS:よくわからなければDisabledのままでおっけー。
Enabledをチェックすることで、自作のHTML/CSSを用いたチャット表示が有効になります。
設定が完了したら、SAVE SETTINGSをクリックして設定を保存しましょう。画面右上にもプレビューがありますが、フォントのサイズ感や色などは、実際にOBSの画面上で確認したほうがいいでしょう。
コメント
コメント一覧 (10)
現在は「ブラウザ」という項目名になっていますので、お試しあれ!
他にもわからないことがあればどんどんコメントしていってくださいね~
OBS studio最新版を使っているということですが、もし言語が英語になっている場合は、「Browser」という名前のソースを使ってみてください。
なお、言語の設定は画面左上のFile>Settingsで設定ウィンドウを開き、GeneralタブのLanguageから日本語を選んでOBS studioを再起動してみてください。
もし上記手順で解決しない場合、可能であればスクリーンショットをimgur.comなどにアップロードしてURLをコメントしてもらえれば何かわかるかもしれないです。
このように、BrowserSourceおよびブラウザ、という項目が見当たりません。
https://obsproject.com/forum/resources/browser-plugin.115/
上記ページからブラウザソース用のプラグインをダウンロードし、OBS studioのインストール先フォルダーに展開してみてください。
それでもソースが追加されない場合は、下記手順を試してください。
1. 上部メニューにあるプロファイル(S)>エクスポートから現在のシーン情報を保存
2. OBS studioをアンインストール
3. OBS studioを再度インストール、この時Select Componentsという項目でPlugins>Browser Sourceのチェックを「外さない」
4. 上部メニューにあるプロファイル(S)>インポートから手順1.で保存したシーン情報を読み込み
あるいは、Streamlabs OBSを試してみてはいかがでしょうか。うまくいくといいですね。
返信が遅れるかもしれませんが、またわからないことがあればお気軽にコメントくださいねー!
1. ソースの順番を確認
チャットボックスのソースが他のソースより後ろに隠れているかもしれません。
2. チャットボックスソースの目玉マークをクリック
目玉マークはソースを隠したり写したりする機能です。
3. Widget URLの確認
念のため確認してみてください。
以上で解決できない場合、streamlabs OBSも試してみてください。OBS studioに比べて簡単にチャットボックスが追加できるようになっています。streamlabs OBSの導入は↓の記事を参考にしてみてください。
http://matanki153.mynikki.jp/archives/7456493.html