NodeCGでスポーツコーダ#5:ワンショット表示を作る(1:概要説明)
概要
NodeCGを使ってスポーツコーダが作れるか検証していきます。
今回はワンショットテロップの表示を実装します。
また、Replicant(レプリカント)を使い、dashboard, graphics, extension間でデータの受け渡し方について解説します。
ワンショットとは?
画面にひとりしか映っていないときに出すテロップのことをワンショットといいます。
ちなみに2人のときはツーショット、4人のときはフォーショットといいます。
ワンショットの要件
- 肩書と名前の入力欄を設置する
- 送出ボタンを設置して、押下時にテロップを表示する
- 非表示ボタンを設置して、押下時にテロップを非表示にする
ワンショットを出すまでの処理フロー
実際に構築する前にNodeCGでテロップを表示するまでの流れを紹介します
-
グラフィックのHTMLファイルを編集して、テロップの表示画面を構築する
- HTMLとCSSを使い静的画面を構築します
- Webサイト構築ではないので、ごりごりに位置固定しても大丈夫です
-
テロップ表示で変更する箇所を調べて、エクステンションでレプリカントを作成し初期化する
- 変更する箇所とは、例えば名前やチーム名、紹介文のことです
- レプリカントはグローバル変数みたいなものです(下で説明します)
- エクステンションはNodeCGを起動したとき最初に実行されるので初期化に適しています
-
ダッシュボードの制御用フォームを構築する
- コントロールの設置内容は今回の要件をご覧ください
-
ダッシュボードのコントロールにレプリカントの値をセットする
- レプリカントの値をセットしないと、画面更新をするとテキストボックスは空欄になります
-
送出ボタン押下時にダッシュボードで入力した値をレプリカントにセットして、テロップを表示するメッセージをグラフィックに送る
- 送出ボタン押下時に、テキストボックスの値をレプリカントにセットします
- CSSで制御しているため、表示・非表示はグラフィックで処理を行います
-
非表示ボタン押下時に、テロップを非表示にするメッセージをグラフィックに送る
- CSSで制御しているため、表示・非表示はグラフィックで処理を行います
-
グラフィックはレプリカントの値が変更されたり、表示・非表示のメッセージを受け取ったときに画面を更新する
- 変更やメッセージを受け取るにはリスナーを使います
- ブラウザを全画面表示(F11)にすることで、実際にテロップの位置や大きさの確認ができます
-
ワンショットテロップの動作確認をする
- OBSのブラウザソースにグラフィックスのURLを設定することで動作確認ができます
- CSSやJavascriptを使ったクライアントサイドの処理(アニメーションなど)はOBSに反映さないのでご留意ください
レプリカント(Replicant)とは
レプリカント（Replicant）は、ダッシュボードやグラフィック間で同じデータをリアルタイムに共有・同期するための仕組みです。感覚的にはNodeCGで使う共通の変数=グローバル変数です。
ダッシュボードやグラフィックでレプリカントを更新すると他の全ての接続先にも即反映されます。なお、変更されたデータはリスナーを使って取得します。
また、レプリカントの値はNodeCG内にあるデータベースに自動的に保存されるので、NodeCGを再起動してもデータは消えません。
// Replicantの作成
nodecg.Replicant('Name', { defaultValue: '' })
// Replicantに値をセット
nodecg.Replicant('Name').value = "山田 太郎"
// Replicantの値を取り出すリスナーの設定
let name = ''
nodecg.Replicant('Name').on('change', (newValue) => {
name = newValue
})
メッセージとは
ボタンを押下したときなどにメッセージ(任意の文字列)の送信ができ、リスナーを使って受信をします。レプリカントとの違いは、レプリカントは表示する値や数値をセットしますが、メッセージは処理を開始するトリガーなどをセットします。
例えば、レプリカントは"肩書"や"名前"をセットしますが、メッセージは"テロップを表示する"や"テロップを非表示にする"などをセットします。
なお、メッセージはデータベースに保存ないため、NodeCGを再起動すると値は消えます。ですので、画面表示するような値はレプリカント、制御情報などはメッセージと使い分けるのがいいと思います。
// メッセージの送信(テロップを非表示にする)
nodecg.sendMessage('teropDisable')
// メッセージを受信して実行するリスナーの設定
nodecg.listenFor('teropDisable', ()=>{
[テロップを非表示にする処理]
})
留意点や感想など
- 今回の記事はTechかな?Ideaかな?と悩みながら書いています
- フローを書き出してみると手順が多くびっくりしました。長い連載になりそうです・・
- 次回はHTMLとCSSを使ってテロップのデザインをします
Discussion