最新情報はTwitterで

トップ > ライブ配信カテゴリ > Twitch配信でチャットやフォロワー通知を表示する方法 / 2017年03月31日 (金) 21時12分00秒



配信画面をカスタマイズ!Webサービスを利用してチャットとフォロワー通知を表示しよう

  • Twitchで配信中に、 チャット(コメント)を配信画面に表示 するには、どのようにしたらよいのでしょうか。また、 チャンネルをフォローしてくれた視聴者の名前をリアルタイムで配信画面に表示 するには、どのようにしたらよいのでしょうか。今回は、その方法について見ていきます。簡単です。


▲画面右に チャット 、画面上に フォロワー通知 を表示しています。画像は、PS4版『グランド・セフト・オートV』(ロックスター・ゲームス)より

目次



注意点


PCの使用が前提


  • 解説は PCからの配信 を前提としています。PS4から直接配信する場合は、チャットやフォロワー通知を配信画面に重ねて表示することはできません。


配信ソフトの使用が前提


  • 解説は 配信ソフト の使用が前提です。ここでいう配信ソフトとは、具体的にはOBS StudioOBS ClassicXSplitのいずれかのことをさしています。 配信ソフトを使ったことがある人を対象とした解説 なので、注意してください。



おおまかな方法と、Streamlabsについて


  • チャットや、フォロワー通知を配信画面に表示するための方法は、複数あります。もっともお薦めなのは、 Twitchと連携できるWebサービスを利用した方法 です。簡単にいえば、 インターネット上で設定 するわけです。 その設定が配信ソフトに反映され 、配信画面にチャットやフォロワー通知が表示されるという流れです。


  • Twitchと連携できるWebサービスには、さまざまなものがあります。たとえば、後述する Streamlabs (旧TwitchAlerts)は定番中の定番といえるでしょう。Webサイトにアクセスして簡単な設定をすればよいので、難しい設定は必要ありません。 海外の配信で見かけるおなじみの画面は、じつはこういったWebサービスを利用して実現している のです *1

  • チャンネルがフォローされたさいの画像やBGMも、インターネット上にアップロードされたものを使っています。たとえば、Streamlabsに事前に画像をアップロードしておくことで、新しくフォローされたさいにその画像を配信画面上に表示できます。画像のアップロードがめんどうでも心配いりません。Streamlabsにも画像や音声が複数用意されているからです。

  • なお、このページでは、OBS Classicを使用する場合の方法についても掲載していますが、Stramlabsは同配信ソフトのサポートを打ち切っています(参考)。可能なかぎり、 OBS StudioまたはXSplitを使用したほうがよいでしょう


配信ソフトにプラグイン(ブラウザソース)を導入する


  • さて、Webサービスを利用すればよいということはわかりました。ここからは具体的な方法を見ていきましょう。まずは、配信ソフトに プラグイン というソフトを導入します。プラグインによって、 Webサービスと配信ソフトを連携させる ことができるようになります。

OBS Studio


  • OBS Studioの場合は、 Browser Plugin を導入します。2017年3月現在、OBS公式サイトで最新版のOBS Studioをダウンロードしたのであれば、 すでに同プラグインは入っています 。OBS Studioのソースに「BrowserSource」がない場合は、以下のようにしてください。

  1. 公式サイトにアクセスする。
  2. 「Windows」の「Download latest」をクリックして、ZIPファイルをダウンロードする。
  3. ZIPファイルを解凍する。
  4. 作成されたフォルダを「C:\Program Files (x86)\obs-studio」にそのままコピー し、「はい」をクリックする。
  5. OBS Studioを起動して、ソースに「 BrowserSource 」があることを確認する。


OBS Classic


  • OBS Classicの場合は、 CLR Browser Source Plugin を導入します。OBS Classicを起動して、ソースに「CLR Browser」が表示されていない場合にかぎり、以下の方法でOBS Classicを最新版にしてください。

  1. 公式サイトにアクセスする。
  2. 「Download Installer」をクリックして、OBSをダウンロードする。
  3. ダウンロードしたEXEファイルを起動し、OBSをインストールする。
  4. OBS Classicを起動して、ソースに「CLR Browser」があることを確認する。

XSplit


  • XSplitの場合は、 プラグインのインストールは不要 です。


チャットを表示する方法(1)


  • プラグインを導入できたら、 Streamlabs を使って実際に設定していきましょう。まずは(1)Streamlabsにアクセスして設定し、つぎに(2)配信ソフトのほうで設定するという流れになります。なお、XSplitについては、より簡単な方法もあります(後述)。

Streamlabsにアクセスします。


画面右上の「 Launch Streamlabs 」をクリックします。


「Connect with Twitch」をクリックします。しばらく待つと、 StreamlabsとTwitchアカウントが連携 されます。Twitchのログイン画面が表示された場合は、現在表示されている画面でログインしてください。


サイト左側にあるメニューで「 Chat Box 」をクリックします。これはTwitchのチャットのことです。


「Settings」でチャットの表示方法についての設定を行います。とくに重要な設定はありません。意味がわからない場合は、そのままでよいでしょう。


設定を変更した場合は、 「Save Settings」をクリックして設定を保存 します。このボタンをクリックするのを忘れないようにしましょう。


サイト上部に掲載されている URLをコピー します。



チャットを表示する方法(2)


  • 引き続き、配信ソフトのほうで設定していきます。

配信ソフトにブラウザソースを追加し、いまコピーしたURLを「URL」欄にペースト します。これで Streamlabsと配信ソフトが連携 できます。配信ソフトにおけるブラウザソースの優先順位は、 いちばん上 にしてください *2

方法
OBS Studio 1.ソースの追加から「BrowserSorce」を選択する
2.わかりやすい名前をつけて「OK」をクリックする
3.StreamlabsでコピーしたURLを、「URL」にペーストする
4.「OK」をクリックする
OBS Classic 1.ソースの追加から「CLR Browser」を選択する
2.わかりやすい名前をつけて「OK」をクリックする
3.StreamlabsでコピーしたURLを、「URL」にペーストする
4.「OK」をクリックする
XSplit 1.「追加」→「Other」→「Webpage ULR」を開く
2.StreamlabsでコピーしたURLを、「URL」にペーストする(「Ctlr」+「V」)
3.「OK」をクリックする


試しに自分のチャンネルにアクセスして、チャットで文字を入力してみましょう。配信ソフトのプレビュー画面に チャットが反映される はずです。


配信ソフトのプレビュー画面で、チャット画面のサイズ・位置を調整します。


チャットの文字を改行して複数行で表示 するには、配信ソフトでブラウザソースの設定画面を開いて、 「Width」と「Height」を小さく します(例 : 300x600)。



XSplitでStreamlabsを使わずにチャットを表示する方法


  • XSplit の場合、上述のやり方でもチャットを表示できるのですが、より簡単な方法が存在します。この方法では、Streamlabsを使う必要がありません。XSplitの設定だけで完結します。

  1. 「ツール」→「プラグインストア」→「SOURCES」の順にクリックする。
  2. Twitch Chat Viewer via HTML5 ... 」の「INSTALLED」をクリックする。
  3. 「追加」→「Other」→「Twitch Chat Viewer via HTML5 (BETA)」の順にクリックする。
  4. いま追加した「Twitch Chat Viewer via HTML5 (BETA)」上で右クリックし、「Channel」にTwitchのチャンネル名(アカウント名)を入力する。
  5. 「Connect」をクリックする。


▲この設定画面で簡単な設定をすれば、チャットを表示できるようになります。文字の大きさなどは「Text Size」で変更できます。


フォロワー通知をリアルタイムで表示する方法


  • 配信中、 チャンネルをフォローしてくれた人の名前を、リアルタイムで配信画面に表示 してみましょう。基本的な方法は、上で述べたチャットの表示方法と同じです。また、プラグインを導入していることが前提です。

Streamlabs側の設定


  • まずはStreamlabsで設定します。

  1. Streamlabsにアクセスし、Twitchアカウントと連携させる(上述)。
  2. サイト左側にあるメニューで「 Alert Box 」をクリックする。
  3. 「Alert Settings」の「 FOLLOW ALERTS 」タブをクリックする。
  4. 「Follow Alerts」で 「Enabled」が選択されていることを確認 する *3
  5. サイト上部に掲載されている URLをコピー する。


配信ソフト側の設定


  • つぎに配信ソフトの設定です。

  1. 配信ソフトにブラウザソースを追加し(上述)、StreamlabsでコピーしたURLを「URL」欄にペーストする。
  2. 「OK」をクリックする(XSplitは不要)。
  3. 配信ソフトのプレビュー画面で、ブラウザソースのサイズ・位置を調整する。


フォロワー通知のテスト


  • これで設定は完了しました。最後に フォロワー通知のテスト をしてみましょう。Streamlabsに戻り、「Alert Previews」の「 TEST FOLLOW ALERT 」をクリックしてください。配信ソフトのプレビュー画面で、適切に 文字・画像が表示されていること 、および 音声が自分に聞こえていること の2点を確認します。


  • 文字・画像の表示のされ方については、 ブラウザソースの「Width」と「Height」の設定が影響 しています。ここは1280x720など、 おおよそ600x600以上 に設定しておけばよいでしょう。「Width」と「Height」が小さすぎると、文字・画像が部分的に表示されないことがあります。何回かテストしながら設定してください。


▲好みで設定すればよいのですが、600x600以上のサイズがお薦めです。あまり小さくしないようにしましょう。

  • XSplitで「TEST FOLLOW ALERT」をクリックしたのに音声が聞こえない 場合は、以下のようにします。3が重要です。

  1. ブラウザソース上で右クリックし、「HTML」タブで「オーディオ出力」を「System Sound」にする。
  2. ブラウザソース上で右クリックし、スピーカーアイコンのミュートを解除する。
  3. Flash Player公式サイトにアクセスし、「手順2」で「FP 21 for Opera and Chromium - PPAPI」を選択してFlash Playerをインストールする。

フォロワー通知の文字・画像・音声


  • フォロワー通知の設定は任意で設定します。設定変更後は、「Save Settings」をクリックして設定を保存してください。

説明
Follow Alerts フォロワー通知のON/OFF
Layout 文字・画像のレイアウト
Alert Animation 画像のアニメーション
Message Template フォローされたときに表示する文字
Text Animation 文字のアニメーション
Image フォローされたときに表示する画像
Sound フォローされたときに再生する音声
Sound Volume 再生音量
Alert Duration 通知が表示されてから消えるまでの時間

  • 画像・音声は、「Image」と「Sound」にある写真アイコンをクリックすることで TwitchAlaertsにあるものを使用できます 。また、自分で Streamlabsにアップロードした素材を使うことも可能 です *4



ほかのWebサービスについて


  • Streamlabs以外にも、Twitchと連携できるWebサービスはあります。たとえば、StreamProStrexmです。どちらもチャットやフォロワー通知を表示できます。やり方については、Streamlabsと大差ありません。(1)Webサイトで設定して、つぎに(2)配信ソフトで設定するという流れです。

  • 両サービスがStreamlabsと大きく異るのは、 配信画面をより自由にカスタマイズできる という点です。カスタマイズというのは、たとえば 配信画面上に枠・ボタンを配置 して、そこにチャットやフォロワー通知などを表示するというようなことです。海外では「 オーバーレイ(Overlay) 」とよばれています。


▲画像は、PS4版『グランド・セフト・オートV』(ロックスター・ゲームス)より

  • オーバーレイは、自分で画像編集ソフト(例 : Photoshop)を使って作成するのもよいでしょう。しかし、Webサービスを使えば 作業の手間を省ける うえに、 美しいデザインを採用 することができます。もし海外で見かけるようなオーバーレイに興味がある人は、覚えておいてください。 有料・無料のオーバーレイが公開 されています。


関連ページ


  • Twitch
    • Twitchでゲーム配信する方法と、その便利な機能について






トップ > ライブ配信カテゴリ > Twitch配信でチャットやフォロワー通知を表示する方法 / 2017年03月31日 (金) 21時12分00秒


名前:
コメント:

  • >すたいるさん
    ありがとうございます。修正しました。 -- 管理人 (2017-03-31)

  • OBS Classic「CLR Browser」に関して
    バージョン0.657bより「CLR Browser Source Plugin」が同梱されたバージョンが配布されています。
    プラグインを入手して導入するより、インストーラーを入手して上書きインストールする方が早いかと。
    ttps://obsproject.com/download#OBSClassic 「Download Installerを入手」 -- すたいる (2017-03-31 15:21:19)

  • StreamlabsのChat Boxをクリックしても反応せず、
    新しいタブで開いても固まって操作不能になるのですが、
    同じ症状の方いらっしゃいますか? -- 名無しさん (2017-03-15 13:31:27)

  • OBS Studioでのチャットが突然表示されなくなりました。
    上記の方法を何度か試してもだめでした。
    表示されない場合はどうすればいいでしょうか? -- 名無しさん (2017-03-11 04:22:04)

  • ↓素早いご返答ありがとうございます。おかげでフォントを変えることができました!
    これからもお世話になります -- 名無しさん (2017-01-19 01:31:13)

  • ↓変更できます。
    StreamlabsのChat Boxで「Settings」を「Custom CSS」にします。
    そこに2箇所ある「Robot」の部分を「Meiryo UI」などに書き換えて
    設定を保存(緑のボタンをクリック)。
    htmlを全部コピーしてOBS Studioの方にペーストします。


    フォントの種類についてはこちらのサイトを参考にどうぞ。
    ttps://w3g.jp/sample/css/font-family#japanese -- 名無しさん (2017-01-16 16:30:05)

  • 書き忘れてました!配信ソフトはOBS Studioです! -- 名無しさん (2017-01-16 15:27:15)

  • こんにちは、いつもお世話になっております。
    Twitchのコメントを表示する際、コメントのフォントを自分好みに変更したいのですがそれは可能でしょうか? -- 名無しさん (2017-01-16 15:26:07)





| 新しいページ | 編集 | 差分 | 編集履歴 | ページ名変更 | アップロード | 検索 | ページ一覧 | タグ | RSS | ご利用ガイド | 管理者に問合せ |
@wiki - 無料レンタルウィキサービス | プライバシーポリシー