Zenn
🐇

NodeCGでスポーツコーダ#7:ワンショット表示を作る(3:レプリカントの作成とダッシュボードのデザイン)

2024/11/26に公開
JavaScript
CSS 3
HTML 5
NodeCG
tech

概要

NodeCGを使ってスポーツコーダが作れるか検証していきます。
今回はレプリカントの作成とダッシュボードのデザインを行います。

レプリカントのおさらい

レプリカントはダッシュボード、グラフィック、エクステンションなどの画面間でデータの共有・同期を行う機能です。グローバル変数とイメージしてもらえればわかりやすいと思います。
レプリカントには"名前"や"肩書"などテロップで変化する値をセットします

フォルダ構成

レプリカントの作成は、extensionフォルダ内のindex.jsを編集します。
また、ダッシュボードのデザインはdashboardフォルダを編集します

[bundle_name]
├── extension
|   └── index.js
└── dashboard
    ├── panel.html
    ├── panel.js
    └── style.css

レプリカントを作成する

レプリカントは、ダッシュボード、グラフィック、エクステンションで作成したり値の取得、セットをすることができますが、エクステンションで作成することをおすすめします。
なぜなら、エクステンションはNodeCG起動時に必ず実行されるため、データの作成、読み込み、初期化などに適しています。

レプリカント作成のポイント

  • レプリカントを作成するにはnodecg.Replicantを使います。
  • レプリカント名は変数名と同じように任意の名前をつけます。他の画面からレプリカントの値を取得したりセットしたりするときも同じレプリカント名を利用します。
  • 作成時にはdefaultValueを使って初期値の設定ができ、数字や文字列が使えます。
// 構文: レプリカントの作成
nodecg.Replicant([レプリカント名],{ defaultValue: [初期値]})

レプリカント作成コード

肩書と名前のレプリカントを作成します。
なお、もともと記述してあるコードは削除しても大丈夫です。

extention/index.js
// 肩書: レプリカントの初期化
nodecg.Replicant('oneShotTitle', { defaultValue: '肩書初期データ' })

// 名前: レプリカントの初期化
nodecg.Replicant('oneShotName', { defaultValue: '名前初期データ' })

ダッシュボードのデザイン

ダッシュボードのPanelに対して、テロッパーが使うテロップ制御フォームのデザインを行います。
前回の"テロップ送出で変更になる箇所を確認する"で洗い出したとおりにフォームを構築します。

必要なコントロール

  • テキストボックス: 肩書を入力する
  • テキストボックス: 名前を入力する
  • ボタン: テキストボックスの値をレプリカントに登録してテロップを表示する
  • ボタン: テロップを非表示にする

HTML(Panle)

初期構築を行うとダッシュボードにPanelが作成されるので編集していきます

HTML(Panel)設定のポイント

  • style.cssとpanel.jsを読み込むようにします。style.cssは作成してください。
  • HTMLのヘッダ情報は最低限の設定で問題ありません
  • コントロールを配置するためのformタグは不要です

HTML(Panel)コード

dashboard/panel.html
<!doctype html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="root">
      <div class="one-shot">
        <label for="one-shot__title">肩書:</label>
        <input type="text" id="one-shot__title" class="one-shot__title" />

        <label for="one-shot__name">名前:</label>
        <input type="text" id="one-shot__name" class="one-shot__name" />

        <button class="one-shot__take-button">送出</button>
        <button class="one-shot__disable-button">非表示</button>
      </div>
    </div>
    <script type="module" src="./panel.js"></script>
  </body>
</html>

CSS(panel)

ここでは一例として紹介します。テロッパーが使いやすいように自由にカスタマイズしてください。

CSS(Panel)コード

dashboard/style.css
.one-shot {
  display: flex;
  flex-wrap: wrap;
}
.one-shot label {
  display: inline-block;
  width: 20%;
  margin: 0 0 10px 0;
}
.one-shot input {
  display: inline-block;
  width: 70%;
  margin: 0 0 10px 0;
}
.one-shot button {
  display: inline-block;
  width: 40%;
  height: 50px;
}

留意点や感想など

  • 次回はダッシュボードに設置したコントロールの値をレプリカントにセットしたり、ボタンを押下したときの処理を記述します

Discussion