🐇

NodeCGでスポーツコーダ#8:ワンショット表示を作る(4:ダッシュボードで制御する)

2024/11/28に公開

 概要NodeCGを使ってスポーツコーダが作れるか検証していきます。

今回は前回デザインしたダッシュボードにボタン制御やデータの入出力を追加します。

 ダッシュボードに追加する機能今回追加する機能は次のとおりです
ダッシュボードを開いたときの処理
送出ボタンを押下したときの処理
非表示ボタンを押下したときの処理

 ダッシュボードを開いたときの処理ダッシュボードを開いたときに次の処理を行います
レプリカントの値を取得する
テキストボックスに取得した値をセットする

 レプリカントの値を取得する(readReplicant)レプリカントの値を取得する方法は、一度だけ取得する場合と、値が変化するたびに取得する場合の2通りがあり、今回はダッシュボード読み込み時に取得するので、レプリカントの値を一度だけ取得する方法を使います。

 readReplicantの構文レプリカント値を一度だけ取得するにはreadReplicantを使います
readReplicant(name, *bundle, cb)
name: レプリカント名
*bundle: 省略可能。バンドル名、デフォルト値はカレントバンドルなので省略します
cb: サーバーの処理を行うコールバック

 レプリカントの値をテキストボックスにセットするjavascriptのdocumen.querySelectorを使ってテキストボックスを取得して、valueプロパティにレプリカントの値をセットします。レプリカントの値をセットするには上記のreadReplicantのコールバックに記述します。テキストボックス.value = レプリカント.valueではないのでご留意ください。

 ダッシュボードを開いたときのコードdashboard/panel.js
// 肩書テキストボックスを取得
const inputOneShotTitle = document.querySelector('.one-shot__title')
// 名前テキストボックスを取得
const inputOneShotName = document.querySelector('.one-shot__name') 

// 肩書テキストボックスにレプリカントの値をセットする
nodecg.readReplicant('oneShotTitle', (value) => {
  inputOneShotTitle.value = value
})

// 名前テキストボックスにレプリカントの値をセットする
nodecg.readReplicant('oneShotName', (value) => {
  inputOneShotName.value = value
})

 送出ボタン押下時の処理送出ボタンを押下したときは、以下の処理を行います
テキストボックスの値をレプリカントにセットする
メッセージを使ってグラフィックにテロップ表示を指示する

 テキストボックスの値をレプリカントにセットするレプリカントに値をセットするにはnodecg.Replican([レプリカント名]).valueを使います。ややこしい話ですが、レプリカントのデータ取得はreadReplicantを使いますが、データをセットするときはReplican([レプリカント名]).valueを使います

 グラフィックのテロップを表示するダッシュボードから直接グラフィックを操作することはできないので、ダッシュボードから制御用のメッセージをsendMessageを使って別画面(グラフィックやエクステンション)に送り、今回の場合はグラフィックでメッセージを受け取り、テロップ表示の処理を実装します。今回はメッセージ送信側を実装して、次回グラフィックで受信側を実装します。

 sendMessageの構文sendMessage(messageName, *data, *cb)
messageName: メッセージ名
*data: 省略可、メッセージ内容
*cb: 省略可、サーバーの確認応答メッセージ（存在する場合）を処理するためのエラーファースト コールバック(今回は使わないため省略)

 メッセージ送信の例テロップの表示・非表示を例にとると、メッセージ名は"テロップ表示"、メッセージ内容は"表示"または"非表示"となります。ダッシュボードの表示・非表示のボタンがそれぞれ別でも、同じメッセージ名、別メッセージ内容で送信することにより、受信側(グラフィック)では同じメッセージ名として処理ができるので実装が楽になります。

 送出ボタン押下時のコードdashboard/panel.js
// 肩書テキストボックスを取得
const inputOneShotTitle = document.querySelector('.one-shot__title')
// 名前テキストボックスを取得
const inputOneShotName = document.querySelector('.one-shot__name') 

// 送出ボタンを取得
const buttonOneShotTake = document.querySelector('.one-shot__take-button')

// 送出ボタン押下時の処理
buttonOneShotTake.addEventListener('click', () => {
  // 肩書: レプリカントにテキストボックスの値をセットする
  nodecg.Replicant('oneShotTitle').value = inputOneShotTitle.value

  // 名前: レプリカントにテキストボックスの値をセットする
  nodecg.Replicant('oneShotName').value = inputOneShotName.value

  // 別画面にテロップ表示メッセージを送る
  nodecg.sendMessage('oneShotViewMessage', 'enable')
})

 非表示ボタン押下時の処理非表示ボタンを押下したときは、レプリカントの値は変更せずにテロップを非表示にするメッセージを他の画面に送信します。メッセージ送信の詳しい説明は上記の表示ボタン押下時の処理をご覧ください。

 非表示ボタン押下時のコードdashboard/panel.js
// 非表示ボタンを取得
const buttonOneShotDisable = document.querySelector('.one-shot__disable-button')

// 非表示ボタン押下時の処理
buttonOneShotDisable.addEventListener('click', () => {
  // 別画面にテロップ非表示メッセージを送る
  nodecg.sendMessage('oneShotViewMessage', 'disable')
})

 完成コードdashboard/panel.js
// 肩書テキストボックスの取得
const inputOneShotTitle = document.querySelector('.one-shot__title') 
// 名前テキストボックスの取得
const inputOneShotName = document.querySelector('.one-shot__name') 
// 送出ボタンの取得
const buttonOneShotTake = document.querySelector('.one-shot__take-button') 
// 非表示ボタンの取得
const buttonOneShotDisable = document.querySelector('.one-shot__disable-button') 

// 肩書テキストボックスにレプリカントの値をセットする
nodecg.readReplicant('oneShotTitle', (value) => {
  inputOneShotTitle.value = value
})
// 名前テキストボックスにレプリカントの値をセットする
nodecg.readReplicant('oneShotName', (value) => {
  inputOneShotName.value = value
})

// 送出ボタン押下時の処理
buttonOneShotTake.addEventListener('click', () => {
  // 肩書レプリカントにテキストボックスの値をセットする
  nodecg.Replicant('oneShotTitle').value = inputOneShotTitle.value

  // 名前レプリカントにテキストボックスの値をセットする
  nodecg.Replicant('oneShotName').value = inputOneShotName.value

  // 他画面にテロップ表示メッセージを送る
  nodecg.sendMessage('oneShotViewMessage', 'enable')
})

// 非表示ボタン押下時の処理
buttonOneShotDisable.addEventListener('click', () => {
  // 他画面にテロップ非表示メッセージを送る
  nodecg.sendMessage('oneShotViewMessage', 'disable')
})

 留意点や感想など記事を書くにあたり公式APIを読み返すと今までにない発見があり、外部に発信することの重要性を再認識しています
APIの戻り値や例外時の処理を書き出すとキリがないので、本記事では省略しています。これは、動くテロップシステム構築を体験してほしいからです
次回はグラフィックでレプリカントを取得したり、受信したメッセージによりテロップの表示・非表示をする処理を実装します

概要

ダッシュボードに追加する機能

ダッシュボードを開いたときの処理

レプリカントの値を取得する(readReplicant)

readReplicantの構文

レプリカントの値をテキストボックスにセットする

ダッシュボードを開いたときのコード

送出ボタン押下時の処理

テキストボックスの値をレプリカントにセットする

グラフィックのテロップを表示する

sendMessageの構文

メッセージ送信の例

送出ボタン押下時のコード

非表示ボタン押下時の処理

非表示ボタン押下時のコード

完成コード

留意点や感想など

Discussion