この記事ではTwtichのチャンネルポイントを使用した賭けの経過をオーバーレイとして配信画面上に表示する方法について紹介します
この方法は投稿時の現段階で可能な方法なのでこれからTwitchのアップデートによってよりよい方法が出る可能性があります
チャンネルポイントを使用した賭けについて詳しくは以下の記事を参照ください
![](https://kurocha.jp/wp-content/uploads/2021/01/Twitch-チャンネルポイントの賭け-300x158.jpg)
チャンネルポイントの経過を配信オーバーレイに
ブラウザソースとして追加
今回紹介する方法ではブラウザソースとしてTwitchの賭けの管理ページを追加することで配信オーバーレイを作成します
![TwitchPredictionOverlay](https://kurocha.jp/wp-content/uploads/2021/02/2021-02-12_16h15_47-758x426.jpg)
追加するURLは
https://www.twitch.tv/popout/自分のチャンネル名/predictions
となります
![TwitchPredictionOBS](https://kurocha.jp/wp-content/uploads/2021/02/2021-02-12_16h34_23-1-758x816.jpg)
Twitchのログイン
このページを表示するためにはTwitchにログインしている必要があります
もし正常に表示されない場合はこちらの方法を試してみてください
Twitchのホームページをブラウザソースとして追加してログイン
まず配信ソフトでTwitchにログインするためにTwitchのホームページをブラウザソースとして追加します
![OBS Twitch](https://kurocha.jp/wp-content/uploads/2021/02/2021-02-12_13h26_25-758x415.jpg)
次に、Twitchのホームページのブラウザソースを右クリックして「対話」を選択します
![OBS 対話](https://kurocha.jp/wp-content/uploads/2021/02/2021-02-12_13h26_42.jpg)
こうすることでブラウザソース上のページを操作することができるようになります
ここからTwitchにログインします
![Twitch 対話 ログイン](https://kurocha.jp/wp-content/uploads/2021/02/2021-02-12_13h26_51.jpg)
ログインが完了したらもう一度先ほどのURLのブラウザソースで予想の管理画面を表示してみましょう
![Twitch prediction logged](https://kurocha.jp/wp-content/uploads/2021/02/2021-02-12_13h28_07-758x415.jpg)
要素の削除
追加したURLはあくまで予想の管理画面なので見出しや予想を開始ボタンなどのオーバーレイとして不必要な部分が表示されたままになっています
カスタムCSSを使っていらない要素を消していきます
ブラウザソースの設定を開いてカスタムCSS欄に以下のコードを貼り付けます
h3, button {display: none; visibility: hidden;}
![カスタムCSS 要素消し](https://kurocha.jp/wp-content/uploads/2021/02/2021-02-12_16h57_17.jpg)
これで配信オーバーレイとして使用できるような見栄えになりました
![カスタムCSS適用後](https://kurocha.jp/wp-content/uploads/2021/02/2021-02-12_16h57_44.jpg)
あとはマスクやフィルタなどで加工してオーバーレイとして使用することができます
おわりに
今回は無理矢理ブラウザソースに追加してTwitchのチャンネルポイントで行う賭け機能のオーバーレイ作成方法を紹介しました
今後Twitchからよりよい方法が提示されていけばまた違う方法も紹介していきたいと思います