Twitchの賭け(予想)の経過を配信画面上に表示する方法

この記事ではTwtichのチャンネルポイントを使用した賭けの経過をオーバーレイとして配信画面上に表示する方法について紹介します

この方法は投稿時の現段階で可能な方法なのでこれからTwitchのアップデートによってよりよい方法が出る可能性があります

チャンネルポイントを使用した賭けについて詳しくは以下の記事を参照ください

関連記事

この記事ではTwitch(ツイッチ)のチャンネルポイントで賭け(予想)をする方法を配信者・モデレーター・視聴者の各視点から解説していきます チャンネルポイントの使い道として新たに追加された方法で視聴者がチャンネルポイントを消費して投票[…]

prediction Twitch アイキャッチ

チャンネルポイントの経過を配信オーバーレイに

ブラウザソースとして追加

今回紹介する方法ではブラウザソースとしてTwitchの賭けの管理ページを追加することで配信オーバーレイを作成します

TwitchPredictionOverlay

追加するURLは

https://www.twitch.tv/popout/自分のチャンネル名/predictions

となります

TwitchPredictionOBS

Twitchのログイン

このページを表示するためにはTwitchにログインしている必要があります

もし正常に表示されない場合はこちらの方法を試してみてください

Twitchのホームページをブラウザソースとして追加してログイン

まず配信ソフトでTwitchにログインするためにTwitchのホームページをブラウザソースとして追加します

OBS Twitch

次に、Twitchのホームページのブラウザソースを右クリックして「対話」を選択します

OBS 対話

こうすることでブラウザソース上のページを操作することができるようになります

ここからTwitchにログインします

Twitch 対話 ログイン

ログインが完了したらもう一度先ほどのURLのブラウザソースで予想の管理画面を表示してみましょう

Twitch prediction logged

要素の削除

追加したURLはあくまで予想の管理画面なので見出しや予想を開始ボタンなどのオーバーレイとして不必要な部分が表示されたままになっています

カスタムCSSを使っていらない要素を消していきます

ブラウザソースの設定を開いてカスタムCSS欄に以下のコードを貼り付けます

h3, button {display: none; visibility: hidden;}
カスタムCSS 要素消し
これで配信オーバーレイとして使用できるような見栄えになりました
カスタムCSS適用後
あとはマスクやフィルタなどで加工してオーバーレイとして使用することができます

おわりに

今回は無理矢理ブラウザソースに追加してTwitchのチャンネルポイントで行う賭け機能のオーバーレイ作成方法を紹介しました

今後Twitchからよりよい方法が提示されていけばまた違う方法も紹介していきたいと思います

最新情報をチェックしよう!
配信中! 質問受け付けてます
現在オフライン