配信でコラボ時によく見かけるDiscordの通話メンバーをカスタムした画像でOBS上に表示させる方法を紹介します！
Discord Reactive
Discord ReactiveというWebサービスからDiscordの通話メンバーをOBSに表示させることが可能です。
別のWebサービスでstreamkitがありますが、今回はDiscord Reactiveを紹介します。
先に注意点ですが、Discord Reactiveは
お互いにWebのDiscordではなく、アプリのDiscordで通話に入らないと正しく機能しないので注意してください。
１．下記URLからDiscord Reactiveのサイトへ開き、中央の”LOG IN WITH DISCORD”をクリックしてください。
https://reactive.fugi.tech
２．URLを開いたらDiscord Reactiveから自身のDiscordへのアクセス許可を求められるので
内容に問題なければ右下の”承認”ボタンをクリックします。
３．Discord Reactiveの画面を開いたら“適当なDiscordの通話に入って”必要に応じて各設定を行っていきます。
※どこの通話に入っても設定、カスタムした画像は共有です。逆に言うと個別には設定変えられないみたいです。
下記細かく記載しますが、Google翻訳などで画面翻訳したら大体どういった設定か大体分かると思います。
赤枠① ⑭で表示されるアイコンに自身も含めるか ☑で含める
赤枠② 喋るときにぴょんぴょん跳ねるか ☑でぴょんぴょん
赤枠③ 喋る時のアイコン切り替えを即時か、ゆっくり切り替えるか ☑でゆっくり
赤枠④ 自身が喋っていない時に暗くするか
赤枠⑤ 他人が喋っていない時に暗くするか
Always：常に暗くなる
If matches speaking image：喋る時と喋らない時のアイコンが同じ場合のみ
Never：暗くならない ※誰が喋ってるか分からなくなります！
赤枠⑥ 自身がミュート/スピーカーミュートした時にそのアイコンを表示するか
赤枠⑦ 他人がミュート/スピーカーミュートした時にそのアイコンを表示するか
Always：常に表示
If matches speaking image：喋る時と喋らない時の画像が同じ場合のみ
Never：表示しない ※誰がミュートなのか分からなくなります！
赤枠⑧ アイコンの前に名前を表示するか
※設定しても後述するName Overrideが入力されていると上書きされてしまいます。
Hidden：表示しない
Server Nickname：サーバープロフィールのニックネームを表示する
Global Nickname：ユーザープロフィールのニックネームを表示する
Global @username：ユーザーのIDを表示する
赤枠⑨ 名前のサイズをどれぐらいにするか
赤枠⑩ 各アイコンを左/中央/右/等間隔にするか
赤枠⑪ 各アイコン同士の幅をどれくらいにするか
赤枠⑫ ⑬でカスタムした画像にしていた場合、⑫の赤枠をクリックすると元のテンプレートに戻ります
赤枠⑬ +の場合、クリックすると追加のアイコンテンプレートを作成します。
赤枠⑭ OBSのブラウザソースに貼る通話に参加しているユーザーを全て表示するURLをコピーします。
赤枠⑮ OBSのブラウザソースに貼るそのユーザーのアイコンのみを表示させるURLをコピーします。
各ユーザーのアイコンをカスタムする
今の状態だとデフォルトのアイコンしか表示しないのでカスタムする方法を紹介します。
１．OBS Sourcesから”通話に参加”している、アイコンをカスタムしたいユーザーの⚙マークをクリックします。
※事前に通話に参加してもらわないとカスタム不可で、
事前に変更したい場合はカスタムしたいユーザーに後述するテンプレートを個別に作成し、選択した状態にしてもらうようにしましょう。
２．開いたモーダル内の⚙をクリックします。
３．さらに開いたモーダル内で画像①,②をクリックして
①に喋っているときの画像を、②に喋っていない時の画像をアップロードします。
※ミュートやスピーカーミュートの時用も必要であれば右二つにアップロードしてください。
画像を指定出来たら、Name Overrideに表示する名前を上書きしたい場合は記入して、
下のSAVEをクリックしてカスタム完了です。
元に戻したい場合は開きなおすとRevertボタンが表示されるので全てのRevertボタンを押してSAVEすると元のアイコンに戻せます。
テンプレオートを使って一括でアイコンをカスタムする
このままでは全員を元のデフォルトのアイコンにしたい場合、各ユーザーが設定する必要があり大変です！
そこでテンプレートでアイコンをカスタムする方法を紹介します。
１．前述の赤枠⑬の+をクリックしてAdd Modelのモーダルを表示します。
Model（以下分かりやすくテンプレートとよびます。）のNameに作成したいテンプレートの名前を入力して、
そのテンプレートの自身の分を選択してSAVEをクリックします。
２．テンプレートを作成したらOBS Sourcesからカスタムしたいユーザーの⚙マークをクリックします。
３．１で作成したテンプレートの⚙マークをクリックします。
開いたら画像の指定と、表示する名前を上書きしたければName Overrideを入力してSAVEですれば完了です。
４．１～３をカスタムしたいユーザーにそれぞれ設定し終えたら、
Discord Reactive右上のModels欄から作成したテンプレートのパネルをクリックすればテンプレートを切り替えられます。
元のDiscordアイコンテンプレートに戻したい場合はDiscord Avatarのパネル(画像だと白色のエリア)をクリックすれば元に戻せます。
さいごに
Reactiveは月額$4.20でPremium状態になり、以下特典が獲得できるようです。
複数の企画を高頻度で行っている方は購入してみては？という感じでしょうか。
・テンプレートが8個から32個まで保存可能に
・画像の上限が1,000×1,000pxから、10,000×10,000pxに増加
・StreamDeckでワンボタンでテンプレートを変更することや、
Streamerbot、MixItUp、SammiというWebアプリケーションと接続することも可能みたいです。
以上です！！設定お疲れ様でした！