Discord.jsとNodeCGでM-1ライクな採点システムを作って生放送する
この記事は、『ニコニコメドレーシリーズ Advent Calendar 2022』に参加しています。
はじめに
2022年のGW、ニコニコ生放送においてMed-1グランプリと銘打って最強のニコニコメドレー作品を決める企画に副主催として参加しました。
この企画を実施するにおいて、Discord.jsとNodeCGを使って審査員の採点を集計するシステムを作りました。
企画自体が気になる方は公式HPや生放送アーカイブを見てね！！
補足 Discord.js / NodeCGとは
Discord.js：Discord APIをいい感じにラップしてbotを制御したりできるNode.jsライブラリ
NodeCG：OBS Studioのブラウザソース機能を利用して生放送に動的なコンテンツを表示したり、ダッシュボードによる裏方からの操作が出来たりするNode.jsライブラリ
実際の放送画面
やりたいこと
- 1作品に対し1〜5人の審査員がそれぞれ0〜100の間で点数を入力
- ニコニコ生放送上で実施したアンケート（5段階評価）結果を平均し最大10点に丸めた上で、視聴者採点とする
- 各審査員の入力点数・視聴者採点の結果・合計点数をNodeCGを介して放送画面に表示
- 採点履歴・順位をNodeCGのダッシュボードに表示
- （公式サイトの更新・バックアップ用）結果のjsonファイルをインポート・エクスポート出来る
放送時の構成
放送者(26K氏)
- 文字通り、ニコニコ生放送に動画をストリーミングします。NodeCGの画面はOBSのブラウザソースから取得しています。
- (本当は1箇所に集まれれば一番良かったのですが)放送者(26K氏)と離れた場所での本番となるため、NodeCGが動いているポートを開放してOBSを繋いでいました。今考えるとngrokとか使った方が絶対良いですね。
サーバー機
- サーバー機はRaspberry Pi 4 4GBを使っています。元々自宅サーバー機としてローカルGitやWikiを運用していたのでそれの上にアプリを乗っけた形になります。
NodeCG本体
- サーバー機上で動作しています。
- 最初はHerokuでのホスティングを検討したのですが、無料プラン(当時)だと再起動間隔などで使い勝手が悪かったので今回は使用を見送っています。
- (当然ですが)Discord.jsを追加で
npm installする必要があります。実際の処理はバンドル側でやっています。
med1reviewingバンドル
- 実際の処理はこいつが大体担っています。
- ダッシュボード(dashboard)：放送画面には出て来ないダッシュボードで、各審査員の採点情報や現在の順位などが表示されています。
- 採点管理(Extension)：点数の計算、Discord用botの制御を担っています。
- 放送画面(Graphics)：実際にOBSのブラウザソースに接続し、点数を表示します。実際の放送画面では小数点以下は丸められています(視聴者採点はアンケートの結果から算出するので、小数点以下が点数として出てくる)が、内部では計算されています。
- ダッシュボードと放送画面はVueとVuetify(v2)を使っていますが、
NodeCGのハンドリング周りの機能を良くわかってなかった実装期間が短かったのと、Webpackのビルドに時間をかけるのが嫌だったのでCDNから直接持ってくるという中々愉快な事をしています。
Discord
- 採点開始、各審査員の採点入力などはbotアカウントにスラッシュコマンドを使用する事で実施出来ます。
- ニコニコ生放送のアンケート結果を別途スラッシュコマンドに入力する事で、視聴者採点も計算します。
- 万が一の審査員欠員などに対応出来るよう、審査員の人数や採点を表示する位置もこちらで変更可能になっています。
採点中の様子
実装の変遷
最初はNodeCG無しでDiscord.js+express+ejsというかなりカオスな構成をしてました（今もカオスですが…）。
ただこの構成では採点結果のホットリロードが出来ず、毎回配信者にブラウザの更新をして貰わないといけないという重大な欠点があり、実用に足るものではありませんでした。
なんとかならないかと解決策を探した所、NodeCGの存在を知り「これだ！」と導入を決めました。
NodeCGの実装には先人の記事に大変お世話になりました。ありがとうございます。
できたこと
放送者の負担軽減
点数集計から放送画面表示までの流れに必要な操作が減った事で、放送者（26K氏）の負担がそれなりに軽減されたのではないかと思います。ただでさえOBSの操作や司会進行もろもろをたった一人でやっているので……
今回の経験で人員が分散している状況下での生放送における負荷分散・削減が非常に重要な課題だと感じました。もし次があるならもっと踏み込んで出来れば司会者はトークに専念出来るような環境を作っていきたいですね。
採点ミスの一部防止
企画の内容上、誰が何点採点したかという情報は極めて重要です。 何らかの要因でミス（計算間違えた、点数入れる場所間違えたetc）が発生した場合、混乱が発生してしまいますし、そもそも慌ただしい本番の流れの中で気付けないかもしれません。今回は採点者の情報をDiscordのIDと紐つけた事、点数入力時のバリデーションを行うことで、ミスの発生を一部未然防止出来ました。
ただ、視聴者採点は生放送の結果を目で見て入力しないといけなかったので、完全にミスの原因を撲滅出来なかったのが反省点ですね。
公式サイトへの迅速な採点反映
内部で保持している採点のjsonデータを吐き出すコマンドを用意したので、これを用いて公式サイトでの採点表示がスムーズに行えました。
できなかったこと
視聴者採点の反映
前述の通り、視聴者採点の入力はニコニコ生放送アンケートの結果から目視でbotに入力するという形式でした。当初はニコニコ生放送からうまいことコメントを取得して自動計算したかったのですが、時間や自分の実装力の問題で今回は見送っています。
もしやるとしたらこの辺り↓が参考になるかも。
スプレッドシートへの採点反映
この採点システムとは別に、Googleスプレッドシートで各種データを管理していたのですが、結果として本番ではシステムとスプシの二重管理になってしまいました。
早めに気付いて実装出来てたらな…という感じです。次があれば機能追加したいところ。
まとめ
- NodeCGたのしい
- 企画系の生放送はとても大変
- 結果としては大成功してとてもうれしい
お読み頂きありがとうございました。
Discussion