Twitchの通知に反応してPNGTuberの表情を切り替える方法

用意するもの

• Peraravatar+ で作ったアバター（OBS に組み込み済み）
• フォロー通知で表示するカスタム表情
• ホットキー用のスクリプト（OBS に追加済み）
• OBS Studio
• Streamer.bot
• Twitch のアカウント

切替方法を設定する

フォロー通知で表示する表情は、「切替方法」を「指定した秒数だけ」にします。決めた秒数が過ぎると、元の表情に戻ります。

Peraravatar+ のカスタム表情で、該当する表情の「切替方法」を確認します。「指定した秒数だけ」になっていない場合は、次のどちらかの方法で設定します。

• 今の表情を変更する: 「切替方法」を「指定した秒数だけ」に変更する
• 別の表情として追加する: 「+ 表情を追加」でフォロー通知用の表情を追加して、「切替方法」を「指定した秒数だけ」にする

秒数は、フォロー通知の表示時間に合わせるのがおすすめです。表示時間は、Twitch のクリエイターダッシュボードの「アラート」で「通知アラート」（なければアラートボックスを作成）を開き、「一般設定」の「時間 (秒、最大99)」で確認できます。

表情を変更または追加した場合は、OBS に反映します。

1. 「書き出し」タブの「アバターを HTML で書き出し」を押して、OBS で読み込んでいる HTML に上書きする
2. 表情を追加した場合は、「OBS のホットキー用スクリプトを書き出し」を押して、.lua に上書きする。続けて、OBS の「ツール → スクリプト」で再読み込み（↻）を押す
3. OBS でアバターのブラウザソースのプロパティを開いて、「現在のページのキャッシュを更新」を押す

OBS の WebSocket サーバーを有効にする

Streamer.bot は WebSocket で OBS に接続するので、OBS の WebSocket サーバーを有効にします。

1. OBS の「ツール → WebSocket サーバー設定」を開く
2. 「WebSocketサーバーを有効にする」にチェックを入れる
3. 「接続情報を表示」を押して、ポートとパスワードを確認する

Streamer.bot を OBS に接続する

1. Streamer.bot の公式サイトからダウンロードして、展開したフォルダの Streamer.bot.exe を起動する
2. 左のメニューの「Stream Apps」の「OBS Studio」を開き、一覧の空いているところを右クリックして「Add」を選ぶ

3. Name に分かりやすい名前、Host に 127.0.0.1、Port と Password に OBS で確認したポートとパスワードを入力する
4. 「Auto Connect on Startup」と「Reconnect on Disconnect」をオンにして、「Ok」を押す

5. 追加した行を右クリックして「Connect」を選ぶ

接続できると、右の「OBS Information」に OBS の状態が表示されます。

「Auto Connect on Startup」が働くのは次回の起動からなので、追加した直後は手動で Connect する必要があります。次回以降は Streamer.bot を起動すれば自動で接続されます。

Streamer.bot を Twitch に接続する

1. 左のメニューの「Platforms」の「Twitch」を開き、「Accounts」の「Broadcaster Account」の「Login」を押す

2. ブラウザが開くので、配信に使っているアカウントで連携を許可する

フォローで表情を切り替えるアクションを作る

1. 左のメニューの「Actions & Queues」の「Actions」を開き、一覧の空いているところを右クリックして「Add」を選ぶ

2. Name に分かりやすい名前を入力して、「Ok」を押す

3. 右上の「Triggers」の空いているところを右クリックして、「Add → Twitch → Channel → Follow」を選ぶ

4. Peraravatar+ の「書き出し」タブを開き、「OBS のホットキー用スクリプトを書き出し」の下の一覧で、該当する表情の「コピー」を押す

5. Streamer.bot に戻り、右下の「Sub-Actions」の空いているところを右クリックして、「Add → OBS Studio → Raw」を選ぶ

6. Connection で接続した OBS を選び、「Raw」の欄に次の1行を貼り付ける

{"requestType":"TriggerHotkeyByName","requestData":{"hotkeyName":"ここにコピーした名前を貼る"}}

7. ここにコピーした名前を貼る の部分を、手順 4 でコピーした名前に置き換えて、「Ok」を押す

このままだとフォロー通知より先に表情が切り替わるので、表情の切り替えを遅らせます。

8. 「Sub-Actions」の空いているところを右クリックして、「Add → Core → Delay」を選ぶ

9. Delay に待つ時間をミリ秒で入力して、「Ok」を押す

10. 追加した「Delay」を、「OBS Raw」の上にドラッグして移動する

動作を確認する

追加した「Follow」の行を右クリックして「Test Trigger」を選びます。OBS のアバターの表情が切り替われば成功です。

配信中は Streamer.bot を起動しておく

フォローの通知を受け取るのは Streamer.bot なので、配信中は起動しておく必要があります。閉じていると、フォローされても表情は切り替わりません。一度設定すれば、次回からは起動するだけで OBS と Twitch に接続されます。

まとめ

• フォロー通知で表示する表情の「切替方法」は「指定した秒数だけ」にする。秒数はフォロー通知の表示時間に合わせるのがおすすめ
• Streamer.bot は、OBS の WebSocket サーバーを有効にしてから接続する
• Streamer.bot のアクションで、Follow のトリガーと OBS Studio の Raw を組み合わせる
• フォロー通知より先に表情が切り替わるので、Delay で遅らせる
• 動作は「Test Trigger」で確認する。Twitch のテストアラートでは表情は切り替わらない
• 配信中は Streamer.bot を起動しておく