「Twitch配信でチャットやフォロワー通知を表示する方法」の編集履歴(バックアップ)一覧はこちら

Twitch配信でチャットやフォロワー通知を表示する方法」(2019/01/03 (木) 06:00:23) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

#settitle(Twitch配信でチャットやフォロワー通知を表示する方法 - VIPで初心者がゲーム実況するには) [[トップ>https://www18.atwiki.jp/live2ch/]] > [[ライブ配信カテゴリ概要]] > [[ゲーム配信のやり方]] > &font(#0080FF){Twitch配信でチャットやフォロワー通知を表示する方法} / &lastmod() ---- #center(){{{ &size(20px){配信画面をカスタマイズ!Webサービスを利用してチャットとフォロワー通知を表示しよう} }}} -[[Twitch]]で配信中に、&font(#0080FF){チャット(コメント)を配信画面に表示}するには、どのようにしたらよいのでしょうか。また、&font(#0080FF){チャンネルをフォローしてくれた視聴者の名前をリアルタイムで配信画面に表示}するには、どのようにしたらよいのでしょうか。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay21.jpg)&br()&size(small){▲画面右に&font(#0080FF){チャット}、画面上に&font(#0080FF){フォロワー通知}を表示しています。画像は、PS4版『グランド・セフト・オートV』(ロックスター・ゲームス)より} -今回は、その方法について見ていきます。&font(#0080FF){Streamlabs}というWebサービスを使います。 ---- -なお、&font(#0080FF){新情報は新サイトのほうに掲載}しています。新サイトではより詳しく解説しているので、参考にしてください。2019.3.14 &space(8)&ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/cap/lupe03a.png)&blanklink(【Twitch】コメントを配信画面に表示する方法。Streamlabsなら簡単){https://vip-jikkyo.net/twitch-chat-on-screen} &space(8)&ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/cap/lupe03a.png)&blanklink(【Twitch・YouTube Live】フォロー・チャンネル登録の通知を表示する方法){https://vip-jikkyo.net/streamlabs-follow-alert} ---- >目次 #contents() *注意点 **PC + 配信ソフトの使用が前提 -解説は&font(#0080FF){PCからの配信}を前提としています。[[PS4から直接配信>PS4・Xbox Oneの配信機能]]する場合は、チャットやフォロワー通知を配信画面に重ねて表示することはできません。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/cap/cap03a.png) -また、&font(#0080FF){配信ソフト}の使用が前提です。ここでいう配信ソフトとは、具体的には[[OBS Studio>OBS Studioの詳しい使い方(1)]]、[[XSplit>XSplitの詳しい使い方(1)]]のいずれかをさしています。&font(#0080FF){配信ソフトを使ったことがある人を対象とした解説}なので、注意してください。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay01.jpg) -[[OBS Classic>OBSの詳しい使い方]]については、解説の対象外です。現在はもうできません。OBS Studioを使用しましょう。 -[[キャプチャーボード]]によっては、付属の[[キャプチャーソフト>https://www18.atwiki.jp/live2ch/pages/29.html#id_9eed3a53]]にライブ配信機能が搭載されている場合があります。たとえば、[[GC550]]、[[AVT-C878>AVT-C878の使い方]]、[[C988>C988の使い方]]、[[Elgato Game Capture HDシリーズ>Elgato Game Capture HDシリーズの使い方]]などがそうです。同機能を使う場合もチャットやフォロワー通知を表示できますが、このページでは解説しません。 **セキュリティソフトについて -場合によっては、カスペルスキーやAvastなどのセキュリティソフト(アンチウィルスソフト)が原因で、解説のとおりにやってもうまくいかないことがあるかもしれません。その場合は、セキュリティソフトを終了するか、またはアンインストールし、問題を切り分けてみてください。 &link_up(▲画面の上へ) *Streamlabsを利用しよう -チャットや、フォロワー通知を配信画面に表示するための方法は、複数あります。もっともお薦めなのは、&font(#0080FF){Twitchと連携できるWebサービスを利用した方法}です。簡単にいえば、&font(#0080FF){インターネット上で設定}するわけです。&font(#0080FF){その設定が配信ソフトに反映され}、配信画面にチャットやフォロワー通知が表示されるという流れです。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay02a.png) -Twitchと連携できるWebサービスには、さまざまなものがあります。たとえば、&font(#0080FF){Streamlabs}(旧TwitchAlerts)は定番中の定番といえるでしょう。Webサイトにアクセスして簡単な設定をすればよいので、難しい設定は必要ありません。&font(#0080FF){海外の配信で見かけるおなじみの画面は、じつはこういったWebサービスを利用して実現している}のです((Streamlabsでは、ほかにも寄付(Donation)してくれた視聴者の名前や、スポンサー登録(購読/Subscription)してくれた視聴者の名前をリアルタイムで表示することも可能です。))。 -チャンネルがフォローされたさいの画像やBGM・効果音も、インターネット上にアップロードされたものを使っています。たとえば、Streamlabsに事前に画像をアップロードしておくことで、新しくフォローされたさいにその画像を配信画面上に表示できます。画像のアップロードがめんどうでも心配いりません。Streamlabsにも画像や音声が用意されているからです。 &link_up(▲画面の上へ) *チャットを表示する方法(1) -プラグインを導入できたら、&font(#0080FF){Streamlabs}を使って実際に設定していきましょう。まずは(1)Streamlabsにアクセスして設定し、つぎに(2)配信ソフトのほうで設定するという流れになります。なお、XSplitについては、より簡単な方法もあります(後述)。 &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num01.gif)&blanklink(Streamlabs){https://streamlabs.com/}にアクセスします。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay05a.png,https://streamlabs.com/,blank) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num02.gif)「LOGIN TO GET STARTED」をクリックします。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay06b.png) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num03.gif)Twitchのアイコンをクリックします。しばらく待つと、&font(#0080FF){StreamlabsとTwitchアカウントが連携}されます。Twitchのログイン画面が表示された場合は、現在表示されている画面でログインしてください。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay07a.png) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num04.gif)サイト左側にあるメニューで、「Widgets」から「&font(#0080FF){CHAT BOX}」をクリックします。これはTwitchのチャットのことです。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay08a.png)&br()&size(small){▲「Widgets」の部分に「CHAT BOX」があります。} &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num05.gif)チャットの表示方法についての設定を行います。とくに重要な設定はありません。意味がわからない場合は、そのままでよいでしょう。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay09a.png) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num06.gif)設定を変更した場合は、&font(#0080FF){「SAVE SETTINGS」をクリックして設定を保存}します。このボタンをクリックするのを忘れないようにしましょう。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay10a.png) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num07.gif)「Click To Show Widget URL」の横にある「COPY」をクリックします。すると、&font(#0080FF){URLがコピー}されます。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay11b.png) &link_up(▲画面の上へ) *チャットを表示する方法(2) -引き続き、配信ソフトのほうで設定していきます。 &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num01.gif)&font(#0080FF){配信ソフトにブラウザソースを追加し、いまコピーしたURLを「URL」欄にペースト}します。これで&font(#0080FF){Streamlabsと配信ソフトが連携}できます。配信ソフトにおけるブラウザソースの優先順位は、&font(#0080FF){いちばん上}にしてください((ブラウザソースがゲーム画面より下の優先順位だと、チャットがゲーム画面に隠れて表示されないからです。))。 |CENTER:BGCOLOR(#f8f8ff):|CENTER:BGCOLOR(#f8f8ff):方法| |BGCOLOR(#E1F0FF):OBS Studio|1.ソースの追加から「ブラウザ」を選択する&br()2.わかりやすい名前をつけて「OK」をクリックする&br()3.StreamlabsでコピーしたURLを、「URL」にペーストする&br()4.「OK」をクリックする| |BGCOLOR(#E1F0FF):XSplit|1.「追加」→「Webpage...」を開く&br()2.StreamlabsでコピーしたURLを、「URL」にペーストする(「Ctlr」+「V」)&br()3.「OK」をクリックする| #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay12a.png) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num02.gif)試しに自分のチャンネルにアクセスして、チャットで文字を入力してみましょう。配信ソフトのプレビュー画面に&font(#0080FF){チャットが反映される}はずです。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay13.jpg) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num03.gif)配信ソフトのプレビュー画面で、チャット画面のサイズ・位置を調整します。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay14.jpg) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num04.gif)&font(#0080FF){チャットの文字を改行して複数行で表示}するには、配信ソフトでブラウザソースの設定画面を開いて、&font(#0080FF){「幅」と「高さ」を小さく}します(例 : 300x600)。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay15b.png) &link_up(▲画面の上へ) *XSplitでStreamlabsを使わずにチャットを表示する方法 -&font(#0080FF){XSplit}の場合、上述のやり方でもチャットを表示できるのですが、より簡単な方法が存在します。この方法では、Streamlabsを使う必要がありません。XSplitの設定だけで完結します。 +「ツール」→「プラグインストア」→「SOURCES」の順にクリックする。 +「&font(#0080FF){Twitch Chat Viewer via HTML5}」をクリックする。 +「INSTALL」をクリックする。 +プラグインの画面を閉じる。 +「追加」→「Widgets」→「Twitch Chat Viewer via HTML5 (BETA) JP」の順にクリックする。 +いま追加した「Twitch Chat Viewer via HTML5 (BETA)」上で右クリックし、「Channel」にTwitchのチャンネル名(アカウント名)を入力する。 +「Connect」をクリックする。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay23.png)&br()&size(small){▲この設定画面で簡単な設定をすれば、チャットを表示できるようになります。文字の大きさなどは「Text Size」で変更できます。} &link_up(▲画面の上へ) *フォロワー通知をリアルタイムで表示する方法 -配信中、&font(#0080FF){チャンネルをフォローしてくれた人の名前を、リアルタイムで配信画面に表示}してみましょう。基本的な方法は、上で述べたチャットの表示方法と同じです。また、プラグインを導入していることが前提です。 **Streamlabs側の設定 -まずはStreamlabsで設定します。 +Streamlabsにアクセスし、Twitchアカウントと連携させる(上述)。 +サイト左側にあるメニューで、「Widgets」から「&font(#0080FF){ALERTBOX}」をクリックする。 +「&font(#0080FF){FOLLOWS}」タブをクリックする。 +「Follow Alerts」で&font(#0080FF){「Enabled」が選択されていることを確認}する((「Disabled」にするとフォロワー通知は表示されません。あまりにもフォロワー通知が多い場合は、「Disabled」を選択して「SAVE SETTINGS」をクリックしましょう。))。 +「Click To Show Widget URL」横の「COPY」をクリックする(&font(#0080FF){URLがコピー}される)。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay16a.png) **配信ソフト側の設定 -つぎに配信ソフトの設定です。 +配信ソフトにブラウザソースを追加し(上述)、StreamlabsでコピーしたURLを「URL」欄にペーストする。 +「OK」をクリックする(XSplitの場合は不要)。 +配信ソフトのプレビュー画面で、ブラウザソースのサイズ・位置を調整する。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay17c.png) **フォロワー通知のテスト -これで設定は完了しました。最後に&font(#0080FF){フォロワー通知のテスト}をしてみましょう。Streamlabsに戻り、「&font(#0080FF){TEST FOLLOW}」をクリックしてください。配信ソフトのプレビュー画面で、適切に&font(#0080FF){文字・画像が表示されていること}、および&font(#0080FF){音声が自分に聞こえていること}の2点を確認します。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay18a.png) -文字・画像の表示のされ方については、&font(#0080FF){ブラウザソースの「幅」と「高さ」の設定が影響}しています。ここは1280x720など、&font(#0080FF){おおよそ600x600以上}に設定しておけばよいでしょう。「幅」と「高さ」が小さすぎると、文字・画像が部分的に表示されないことがあります。何回かテストしながら設定してください。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay19a.png)&br()&size(small){▲好みで設定すればよいのですが、600x600以上のサイズがお薦めです。あまり小さくしないようにしましょう。} -&font(#0080FF){XSplitで「TEST FOLLOW」をクリックしたのに音声が聞こえない}場合は、以下のようにします。3が重要です。 +ブラウザソース上で右クリックし、「HTML」タブで「オーディオ出力」を「System Sound」にする。 +ブラウザソース上で右クリックし、スピーカーアイコンのミュートを解除する。 +&blanklink(Flash Player公式サイト){https://get.adobe.com/jp/flashplayer/otherversions/}にアクセスし、「手順2」で「FP 21 for Opera and Chromium - PPAPI」を選択してFlash Playerをインストールする。 **フォロワー通知の文字・画像・音声 -フォロワー通知の設定は任意で設定します。設定変更後は、「Save Settings」をクリックして設定を保存してください。 |CENTER:BGCOLOR(#f8f8ff):|CENTER:BGCOLOR(#f8f8ff):説明| |BGCOLOR(#E1F0FF):Follow Alerts|フォロワー通知のON/OFF| |BGCOLOR(#E1F0FF):Layout|文字・画像のレイアウト| |BGCOLOR(#E1F0FF):Alert Animation|画像のアニメーション| |BGCOLOR(#E1F0FF):Message Template|フォローされたときに表示する文字| |BGCOLOR(#E1F0FF):Text Animation|文字のアニメーション| |BGCOLOR(#E1F0FF):Image|フォローされたときに表示する画像| |BGCOLOR(#E1F0FF):Sound|フォローされたときに再生する音声| |BGCOLOR(#E1F0FF):Sound Volume|再生音量| |BGCOLOR(#E1F0FF):Alert Duration|通知が表示されてから消えるまでの時間| -画像・音声は、「Image」と「Sound」にある「CHANGE MEDIA」をクリックすることで&font(#0080FF){Streamlabsが用意している素材を使用できます}。また、自分で&font(#0080FF){Streamlabsにアップロードした素材を使うことも可能}です((鎖のアイコンをクリックすると、Streamlabs以外のサイトにアップロードされている素材を選択できます。))。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay20a.png) &link_up(▲画面の上へ) *その他 -このページでは扱いませんでしたが、Streamlabsの機能を統合した&font(#0080FF){Streamlabs OBS}という配信ソフトもあります。同ソフト上でSteamlabsの設定ができ、さらにオーバーレイで画面をカスタマイズすることも可能です。興味がある場合は&blanklink(ダウンロード){https://streamlabs.com/slobs/d/2223777}して使ってみてください。 &space(8)&ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/cap/lupe03a.png)&blanklink(Streamlabs OBSの詳しい使い方・設定方法){https://vip-jikkyo.net/how-to-use-slobs} &link_up(▲画面の上へ) *関連ページ -[[コメント>https://www18.atwiki.jp/live2ch/pages/538.html]] --質問など -[[Twitch]] --Twitchでゲーム配信する方法と、その便利な機能について -[[各ライブ配信サイトで棒読みちゃんを使う方法]] --ゆっくりボイスでコメントを読ませよう!各ライブ配信サイトでの棒読みちゃんの使い方 -[[OBS Studioの詳しい使い方>OBS Studioの詳しい使い方(1)]] --配信初心者にもわかる!無料配信ソフトOBS Studioの詳しい使い方 -[[XSplitの詳しい使い方>XSplitの詳しい使い方(1)]] --Ver.2.8以降の最新版にも対応!XSplitのすべてを使いこなそう -[[Twitch Prime・Amazonプライムのメリットと、無料体験で注意すべき点]] --Twitch Prime、Amazonプライムを利用するメリットを考える &link_up(▲画面の上へ) ---- &meta_description(Twitchで、配信画面にチャットやフォロワー通知を表示する方法について解説しています。「Streamlabs」というWebサイトを利用すれば、簡単に画面をカスタマイズできます。)
#settitle(Twitch配信でチャットやフォロワー通知を表示する方法 - VIPで初心者がゲーム実況するには) [[トップ>https://www18.atwiki.jp/live2ch/]] > [[ライブ配信カテゴリ概要]] > [[ゲーム配信のやり方]] > &font(#0080FF){Twitch配信でチャットやフォロワー通知を表示する方法} / &lastmod() ---- #center(){{{ &size(20px){配信画面をカスタマイズ!Webサービスを利用してチャットとフォロワー通知を表示しよう} }}} -[[Twitch]]で配信中に、&font(#0080FF){チャット(コメント)を配信画面に表示}するには、どのようにしたらよいのでしょうか。また、&font(#0080FF){チャンネルをフォローしてくれた視聴者の名前をリアルタイムで配信画面に表示}するには、どのようにしたらよいのでしょうか。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay21.jpg)&br()&size(small){▲画面右に&font(#0080FF){チャット}、画面上に&font(#0080FF){フォロワー通知}を表示しています。画像は、PS4版『グランド・セフト・オートV』(ロックスター・ゲームス)より} -今回は、その方法について見ていきます。&font(#0080FF){Streamlabs}というWebサービスを使います。 ---- -2019年3月14日、追記 --&font(#0080FF){新情報は新サイトのほうに掲載}しています。詳しく解説しているので、参考にしてください。 &space(8)&ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/cap/lupe03a.png)&blanklink(【Twitch】コメントを配信画面に表示する方法。Streamlabsなら簡単){https://vip-jikkyo.net/twitch-chat-on-screen} &space(8)&ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/cap/lupe03a.png)&blanklink(【Twitch・YouTube Live】フォロー・チャンネル登録の通知を表示する方法){https://vip-jikkyo.net/streamlabs-follow-alert} ---- >目次 #contents() *注意点 **PC + 配信ソフトの使用が前提 -解説は&font(#0080FF){PCからの配信}を前提としています。[[PS4から直接配信>PS4・Xbox Oneの配信機能]]する場合は、チャットやフォロワー通知を配信画面に重ねて表示することはできません。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/cap/cap03a.png) -また、&font(#0080FF){配信ソフト}の使用が前提です。ここでいう配信ソフトとは、具体的には[[OBS Studio>OBS Studioの詳しい使い方(1)]]、[[XSplit>XSplitの詳しい使い方(1)]]のいずれかをさしています。&font(#0080FF){配信ソフトを使ったことがある人を対象とした解説}なので、注意してください。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay01.jpg) -[[OBS Classic>OBSの詳しい使い方]]については、解説の対象外です。現在はもうできません。OBS Studioを使用しましょう。 -[[キャプチャーボード]]によっては、付属の[[キャプチャーソフト>https://www18.atwiki.jp/live2ch/pages/29.html#id_9eed3a53]]にライブ配信機能が搭載されている場合があります。たとえば、[[GC550]]、[[AVT-C878>AVT-C878の使い方]]、[[C988>C988の使い方]]、[[Elgato Game Capture HDシリーズ>Elgato Game Capture HDシリーズの使い方]]などがそうです。同機能を使う場合もチャットやフォロワー通知を表示できますが、このページでは解説しません。 **セキュリティソフトについて -場合によっては、カスペルスキーやAvastなどのセキュリティソフト(アンチウィルスソフト)が原因で、解説のとおりにやってもうまくいかないことがあるかもしれません。その場合は、セキュリティソフトを終了するか、またはアンインストールし、問題を切り分けてみてください。 &link_up(▲画面の上へ) *Streamlabsを利用しよう -チャットや、フォロワー通知を配信画面に表示するための方法は、複数あります。もっともお薦めなのは、&font(#0080FF){Twitchと連携できるWebサービスを利用した方法}です。簡単にいえば、&font(#0080FF){インターネット上で設定}するわけです。&font(#0080FF){その設定が配信ソフトに反映され}、配信画面にチャットやフォロワー通知が表示されるという流れです。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay02a.png) -Twitchと連携できるWebサービスには、さまざまなものがあります。たとえば、&font(#0080FF){Streamlabs}(旧TwitchAlerts)は定番中の定番といえるでしょう。Webサイトにアクセスして簡単な設定をすればよいので、難しい設定は必要ありません。&font(#0080FF){海外の配信で見かけるおなじみの画面は、じつはこういったWebサービスを利用して実現している}のです((Streamlabsでは、ほかにも寄付(Donation)してくれた視聴者の名前や、スポンサー登録(購読/Subscription)してくれた視聴者の名前をリアルタイムで表示することも可能です。))。 -チャンネルがフォローされたさいの画像やBGM・効果音も、インターネット上にアップロードされたものを使っています。たとえば、Streamlabsに事前に画像をアップロードしておくことで、新しくフォローされたさいにその画像を配信画面上に表示できます。画像のアップロードがめんどうでも心配いりません。Streamlabsにも画像や音声が用意されているからです。 &link_up(▲画面の上へ) *チャットを表示する方法(1) -プラグインを導入できたら、&font(#0080FF){Streamlabs}を使って実際に設定していきましょう。まずは(1)Streamlabsにアクセスして設定し、つぎに(2)配信ソフトのほうで設定するという流れになります。なお、XSplitについては、より簡単な方法もあります(後述)。 &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num01.gif)&blanklink(Streamlabs){https://streamlabs.com/}にアクセスします。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay05a.png,https://streamlabs.com/,blank) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num02.gif)「LOGIN TO GET STARTED」をクリックします。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay06b.png) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num03.gif)Twitchのアイコンをクリックします。しばらく待つと、&font(#0080FF){StreamlabsとTwitchアカウントが連携}されます。Twitchのログイン画面が表示された場合は、現在表示されている画面でログインしてください。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay07a.png) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num04.gif)サイト左側にあるメニューで、「Widgets」から「&font(#0080FF){CHAT BOX}」をクリックします。これはTwitchのチャットのことです。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay08a.png)&br()&size(small){▲「Widgets」の部分に「CHAT BOX」があります。} &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num05.gif)チャットの表示方法についての設定を行います。とくに重要な設定はありません。意味がわからない場合は、そのままでよいでしょう。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay09a.png) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num06.gif)設定を変更した場合は、&font(#0080FF){「SAVE SETTINGS」をクリックして設定を保存}します。このボタンをクリックするのを忘れないようにしましょう。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay10a.png) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num07.gif)「Click To Show Widget URL」の横にある「COPY」をクリックします。すると、&font(#0080FF){URLがコピー}されます。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay11b.png) &link_up(▲画面の上へ) *チャットを表示する方法(2) -引き続き、配信ソフトのほうで設定していきます。 &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num01.gif)&font(#0080FF){配信ソフトにブラウザソースを追加し、いまコピーしたURLを「URL」欄にペースト}します。これで&font(#0080FF){Streamlabsと配信ソフトが連携}できます。配信ソフトにおけるブラウザソースの優先順位は、&font(#0080FF){いちばん上}にしてください((ブラウザソースがゲーム画面より下の優先順位だと、チャットがゲーム画面に隠れて表示されないからです。))。 |CENTER:BGCOLOR(#f8f8ff):|CENTER:BGCOLOR(#f8f8ff):方法| |BGCOLOR(#E1F0FF):OBS Studio|1.ソースの追加から「ブラウザ」を選択する&br()2.わかりやすい名前をつけて「OK」をクリックする&br()3.StreamlabsでコピーしたURLを、「URL」にペーストする&br()4.「OK」をクリックする| |BGCOLOR(#E1F0FF):XSplit|1.「追加」→「Webpage...」を開く&br()2.StreamlabsでコピーしたURLを、「URL」にペーストする(「Ctlr」+「V」)&br()3.「OK」をクリックする| #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay12a.png) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num02.gif)試しに自分のチャンネルにアクセスして、チャットで文字を入力してみましょう。配信ソフトのプレビュー画面に&font(#0080FF){チャットが反映される}はずです。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay13.jpg) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num03.gif)配信ソフトのプレビュー画面で、チャット画面のサイズ・位置を調整します。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay14.jpg) &ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/num/num04.gif)&font(#0080FF){チャットの文字を改行して複数行で表示}するには、配信ソフトでブラウザソースの設定画面を開いて、&font(#0080FF){「幅」と「高さ」を小さく}します(例 : 300x600)。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay15b.png) &link_up(▲画面の上へ) *XSplitでStreamlabsを使わずにチャットを表示する方法 -&font(#0080FF){XSplit}の場合、上述のやり方でもチャットを表示できるのですが、より簡単な方法が存在します。この方法では、Streamlabsを使う必要がありません。XSplitの設定だけで完結します。 +「ツール」→「プラグインストア」→「SOURCES」の順にクリックする。 +「&font(#0080FF){Twitch Chat Viewer via HTML5}」をクリックする。 +「INSTALL」をクリックする。 +プラグインの画面を閉じる。 +「追加」→「Widgets」→「Twitch Chat Viewer via HTML5 (BETA) JP」の順にクリックする。 +いま追加した「Twitch Chat Viewer via HTML5 (BETA)」上で右クリックし、「Channel」にTwitchのチャンネル名(アカウント名)を入力する。 +「Connect」をクリックする。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay23.png)&br()&size(small){▲この設定画面で簡単な設定をすれば、チャットを表示できるようになります。文字の大きさなどは「Text Size」で変更できます。} &link_up(▲画面の上へ) *フォロワー通知をリアルタイムで表示する方法 -配信中、&font(#0080FF){チャンネルをフォローしてくれた人の名前を、リアルタイムで配信画面に表示}してみましょう。基本的な方法は、上で述べたチャットの表示方法と同じです。また、プラグインを導入していることが前提です。 **Streamlabs側の設定 -まずはStreamlabsで設定します。 +Streamlabsにアクセスし、Twitchアカウントと連携させる(上述)。 +サイト左側にあるメニューで、「Widgets」から「&font(#0080FF){ALERTBOX}」をクリックする。 +「&font(#0080FF){FOLLOWS}」タブをクリックする。 +「Follow Alerts」で&font(#0080FF){「Enabled」が選択されていることを確認}する((「Disabled」にするとフォロワー通知は表示されません。あまりにもフォロワー通知が多い場合は、「Disabled」を選択して「SAVE SETTINGS」をクリックしましょう。))。 +「Click To Show Widget URL」横の「COPY」をクリックする(&font(#0080FF){URLがコピー}される)。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay16a.png) **配信ソフト側の設定 -つぎに配信ソフトの設定です。 +配信ソフトにブラウザソースを追加し(上述)、StreamlabsでコピーしたURLを「URL」欄にペーストする。 +「OK」をクリックする(XSplitの場合は不要)。 +配信ソフトのプレビュー画面で、ブラウザソースのサイズ・位置を調整する。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay17c.png) **フォロワー通知のテスト -これで設定は完了しました。最後に&font(#0080FF){フォロワー通知のテスト}をしてみましょう。Streamlabsに戻り、「&font(#0080FF){TEST FOLLOW}」をクリックしてください。配信ソフトのプレビュー画面で、適切に&font(#0080FF){文字・画像が表示されていること}、および&font(#0080FF){音声が自分に聞こえていること}の2点を確認します。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay18a.png) -文字・画像の表示のされ方については、&font(#0080FF){ブラウザソースの「幅」と「高さ」の設定が影響}しています。ここは1280x720など、&font(#0080FF){おおよそ600x600以上}に設定しておけばよいでしょう。「幅」と「高さ」が小さすぎると、文字・画像が部分的に表示されないことがあります。何回かテストしながら設定してください。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay19a.png)&br()&size(small){▲好みで設定すればよいのですが、600x600以上のサイズがお薦めです。あまり小さくしないようにしましょう。} -&font(#0080FF){XSplitで「TEST FOLLOW」をクリックしたのに音声が聞こえない}場合は、以下のようにします。3が重要です。 +ブラウザソース上で右クリックし、「HTML」タブで「オーディオ出力」を「System Sound」にする。 +ブラウザソース上で右クリックし、スピーカーアイコンのミュートを解除する。 +&blanklink(Flash Player公式サイト){https://get.adobe.com/jp/flashplayer/otherversions/}にアクセスし、「手順2」で「FP 21 for Opera and Chromium - PPAPI」を選択してFlash Playerをインストールする。 **フォロワー通知の文字・画像・音声 -フォロワー通知の設定は任意で設定します。設定変更後は、「Save Settings」をクリックして設定を保存してください。 |CENTER:BGCOLOR(#f8f8ff):|CENTER:BGCOLOR(#f8f8ff):説明| |BGCOLOR(#E1F0FF):Follow Alerts|フォロワー通知のON/OFF| |BGCOLOR(#E1F0FF):Layout|文字・画像のレイアウト| |BGCOLOR(#E1F0FF):Alert Animation|画像のアニメーション| |BGCOLOR(#E1F0FF):Message Template|フォローされたときに表示する文字| |BGCOLOR(#E1F0FF):Text Animation|文字のアニメーション| |BGCOLOR(#E1F0FF):Image|フォローされたときに表示する画像| |BGCOLOR(#E1F0FF):Sound|フォローされたときに再生する音声| |BGCOLOR(#E1F0FF):Sound Volume|再生音量| |BGCOLOR(#E1F0FF):Alert Duration|通知が表示されてから消えるまでの時間| -画像・音声は、「Image」と「Sound」にある「CHANGE MEDIA」をクリックすることで&font(#0080FF){Streamlabsが用意している素材を使用できます}。また、自分で&font(#0080FF){Streamlabsにアップロードした素材を使うことも可能}です((鎖のアイコンをクリックすると、Streamlabs以外のサイトにアップロードされている素材を選択できます。))。 #image(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/overlay/overlay20a.png) &link_up(▲画面の上へ) *その他 -このページでは扱いませんでしたが、Streamlabsの機能を統合した&font(#0080FF){Streamlabs OBS}という配信ソフトもあります。同ソフト上でSteamlabsの設定ができ、さらにオーバーレイで画面をカスタマイズすることも可能です。興味がある場合は&blanklink(ダウンロード){https://streamlabs.com/slobs/d/2223777}して使ってみてください。 &space(8)&ref(https://img.atwikiimg.com/www18.atwiki.jp/live2ch/pub/cap/lupe03a.png)&blanklink(Streamlabs OBSの詳しい使い方・設定方法){https://vip-jikkyo.net/how-to-use-slobs} &link_up(▲画面の上へ) *関連ページ -[[コメント>https://www18.atwiki.jp/live2ch/pages/538.html]] --質問など -[[Twitch]] --Twitchでゲーム配信する方法と、その便利な機能について -[[各ライブ配信サイトで棒読みちゃんを使う方法]] --ゆっくりボイスでコメントを読ませよう!各ライブ配信サイトでの棒読みちゃんの使い方 -[[OBS Studioの詳しい使い方>OBS Studioの詳しい使い方(1)]] --配信初心者にもわかる!無料配信ソフトOBS Studioの詳しい使い方 -[[XSplitの詳しい使い方>XSplitの詳しい使い方(1)]] --Ver.2.8以降の最新版にも対応!XSplitのすべてを使いこなそう -[[Twitch Prime・Amazonプライムのメリットと、無料体験で注意すべき点]] --Twitch Prime、Amazonプライムを利用するメリットを考える &link_up(▲画面の上へ) ---- &meta_description(Twitchで、配信画面にチャットやフォロワー通知を表示する方法について解説しています。「Streamlabs」というWebサイトを利用すれば、簡単に画面をカスタマイズできます。)

表示オプション

横に並べて表示:
変化行の前後のみ表示: