Twitch投票機能の活用事例について
Twitchの機能「チャンネルポイント予想」を利用した配信について、Tipsを記載します。
チャンネルポイントを視聴者として利用したことがある かつ OBSを利用している配信者向けの解説となります。
※ 当該機能はTwitchアフィリエイト/パートナーが利用可能です。
/* 諸星情報を求めてこのnoteをフォローしていただいている皆さま、今回は全く関係ない記事です。ツァ犬も出ません。 */
■「予想」機能導入方法
クリエイターダッシュボード>配信マネージャーで「予想を始める」をクイックアクションに追加すると、簡単に利用開始できます。
詳しい導入方法は「チャンネルポイント予想」公式のドキュメントをご参照ください。
予想枠を開いたり結果を確定したりするのもクイックアクションのボタンから実施します。
配信マネージャーのほかモデレータービューからも実施できるので、利用しやすい方法を模索してください。モバイルからもTwitch公式アプリで操作可能。
これでもう十分に視聴者を巻き込む配信企画が可能です。
視聴者は「予想」機能に不慣れな場合もあるので、投票参加方法のアナウンスなどがあると親切ですね。特に「チャット欄の投票開始通知を見落としてしまった場合は、チャンネルポイントのアイコンをクリックしたら再度開ける」ことなどは、知らない視聴者も多いかも。
しかし視聴者からすると、「予想」機能を配信内で使っているかどうかは実際にチャンネル画面に入らないとわかりません。投票企画が進行していることがプレビュー画面でもわかるようにするには、ひと工夫必要です。
配信画面内に投票状況が反映される手順を下記に示しました。導入のご参考にしてください。
なお力業なので美しくないです。もっといいやり方はあると思います。発明したら教えてください。
■「予想」状況をブラウザソースで取り込む
概要：「予想」の表示UIには配信者固有のURLが発行されている。それをOBSのブラウザソースで取り込んで表示する。
手順1. 予想機能URLを発行する
自分のチャンネルのモデレータービュー( https://www.twitch.tv/moderator/【配信者ID】 ) を開きます。「予想」アイコンをクリックすると「予想の管理」が開くので、3点メニューボタンをクリックします。
「ポップアウト」をクリックすると別窓が開きます。
※ Twitchの仕様変更によりURLが変わる可能性があるので各自ご確認ください
これで取り込むべきソースを見つけられました。手順2.は配信画面への反映です。2パターン記載しました。簡単なのは「手順2-ver.1」です。見た目にこだわりたい方は「手順2-ver.2」をご参照ください。
手順2-ver.1 OBSウインドウキャプチャで取り込む
上記手順でポップアップしたウインドウをウインドウキャプチャで取り込みます。
OBS ソースの追加より「ウインドウキャプチャ」を選択して配信画面に載せ、表示領域等を調整してください。
特にこだわりのない場合は、これで十分訴求力のある配信画面になります！
手順2-ver.2 OBSブラウザソースで取り込む＆CSS編集
→この方法を利用するとCSSを上書きできるので、見た目をカスタマイズしたい場合にお勧めです（その必要がなければver.1で十分です）。
【ブラウザソースの導入】
OBS ソースの追加より「ブラウザ」を選択し、上記手順1で取得したURLを入力してください。
幅・高さはお好みで調整。
初回はOBS仮想ブラウザ上でTwitchへのログイン（連携許可）が求められると思います。OBSの「対話（操作）」ボタンをクリックして、仮想ブラウザにフォーカスを移してログイン操作等を実施してください。
【任意で実施：CSS編集】
さて、すっぴんのまま取り込んでレイアウトに組み込んでもいいですが、「概要」「予想の開始」ボタンは見えないほうが美しいですよね。
上記画像のように見せ方を工夫するには、CSSを編集する必要があります。
下記2行を、OBSの該当ブラウザソースの「カスタムCSS」に追記してください。
button {display: none; visibility: hidden;}
h3[class^="CoreText"] {display: none; visibility: hidden;}
/* Twitchの仕様変更等で狙った挙動にならない可能性があります。ご容赦ください */
/* 「編集後」の例ではフォントやpaddingの変更なども入っています */これでいい感じに配信画面に表示されると思います！
視聴者を煽ってじゃぶじゃぶポイントを溶かさせましょうね。
【実装例】
実装している参考例はこんな感じ（投票開始～投票締切まで）……しゃべっている内容はあまり気にしないでください。
＜おまけ＞リクエストキューをブラウザソースで取り込む
同様の手順でリクエストキューも取り込めます。
前提条件：「チャンネルポイントカスタム報酬」で「聴者にテキストの入力を要求」を有効にしている項目が存在していること。
音楽ゲーム配信においては、楽曲リクエストをチャンネルポイントで受け付けている場合が多いです。（他ジャンルはどうなんでしょう…？）
手順については「予想」と同じです。
自分のチャンネルのモデレータービュー( https://www.twitch.tv/moderator/【配信者ID】 ) を開きます。「報酬リクエストキュー」アイコンをクリックして展開するパネルの3点メニューボタンをクリックします。「ポップアウト」をクリックします。
別窓が開くので、そのURLを利用します。
これのCSS成形については……非表示にしたい要素のclass名が配信者によって異なるかもしれないので、ご自身で試してもらうことになるかもしれないですが、一応私の環境をメモしておきます。
.redemption-list-item__checkbox {display: none; visibility: hidden;}
.jjAyLi {display: none; visibility: hidden;}
.kjARyu {display: none; visibility: hidden;}
.iwAgDg {display: none; visibility: hidden;}
/* class名が配信者ごとに生成されているかもしれないので、狙った挙動にならないかも… */
/* 「編集後」の例ではフォントやpaddingの変更なども入っています */API引っ張ってきてブラウザソース用のローカルHTMLとか作れたら美しい解決方法だとは思うので……技術力のある方はぜひやってみてください。Twitch Developer Documentationと向かい合う時です。
＜おまけ2＞のこりの要素
どちらもシンプルチカラワザなのでさくっと書きます。静止画だと挙動がわかりづらい部分なので、後述の動画も見てもらえると嬉しいです。
③ 勝敗表示……スプレッドシート（手動で逐次編集）をブラウザソースで取り込み。グリッド線を非表示にしてフォントなどをそれっぽいのに変えるだけでスプレッドシート感は減ると思います。見せる用なので臆せずにセルの結合をしちゃいましょう！ そして多分、もっと頭のいいやりかたがあるから模索してみてください。
④ OBSソースの表示/非表示を簡単に操作……私はStream Deckで操作しています。同アプリ版のほか、同様の機能を有するソフトウェア/Webサービス等いろいろあるのでお好きなもので。
手動でソースを切り替えているのでスマートではないですねえ……音声認識でコマンド飛ばしてやるとか、面白い改善方法はありそうです。ご自身の実装したい内容に合わせていい方法を見つけてください。
＜参考動画＞
事例1 チャンネルポイント賭博 対決企画：ゲームの対戦結果について、勝敗を視聴者に予想してもらう企画です。「ゲストを招いた配信をしたいが、いいネタが思いつかない」という方、ぜひやってみてください！ 事例では音楽ゲームの1曲ごとのスコアで勝敗を決めています。およそ2分で1サイクルなのでテンポよく進みます。他ジャンルのゲームだと工夫が必要かも。
事例2 チャンネルポイント賭博 個人企画……については特段アーカイブを残していません。下記チャンネルで毎月18日に実施しているので良ければ見に来てください。「1曲ごとに設定されたTargetに対して、2回以内の試行で達成できるか」を予想する企画です。
ゲームのジャンルによっていろいろな目標設定が考えられそうですね。ぜひ視聴者が盛り上がる企画を考えて実施してみてくださいね！
この記事を書いた人：Avril17th
音楽ゲーム「SOUND VOLTEX」を主に配信しています 賭博、賭ける側になりたい過ぎてこの記事を書きました 皆さんぜひ賭場を開いてください！ 胴元やるの楽しいよ！ 内容についてご質問があればお気軽にご連絡くださいね。また、もっといい方法なども教えてもらえると嬉しいです。
そして、このnoteは基本的に 漫画家・諸星大二郎に関する記事をメインで書いています。ぜひついでに見ていってくださいね！
それではよい胴元ライフを。
※賭博は適度に楽しむ遊びです。のめり込みに注意しましょう。
※当記事は賭博を推奨するものではありません。視聴者に未成年者が多い場合などは、倫理的に適切な配慮を心がけましょう。
※各種プラットフォーム、その他利害関係者の規約・ガイドラインなどを遵守してください。
※この記事の技術内容や配信企画の導入を起因とした不具合やトラブルについて、保障はできかねます。技術内容のご質問には可能な範囲で対応します。