Zenn
🐱

初心者コーダーがNodeCGを学ぶ（概念編）

2020/10/18に公開
JavaScript
Node.js
NodeCG
tech

はじめに

自分は普段ゲームのイベントなどで主にライブ配信周りの技術的なお手伝いなどをさせていただいていたのですが
その中でNodeCGという配信画面をWebの技術で構築する仕組みを知り学んでみたのでその内容をまとめておきたいと思います。

同じような記事もあるかとは思われますが自分の学習の振り返りとして書いているためご了承ください。
私自身もNodeCGを触りながらJavascriptの学習を進めていたので内容に誤りがありましたらコメントやDiscord[ken7253#4915]などでお教えいただければと思います。

NodeCGとは

公式ドキュメントは英語ですがGoogle翻訳やDeepLでなんとかなったりするのでひとまずこちらを読んでみましょう。

NodeCGがどういったものなのか、導入方法についてはHoishinさんやCmaさんが記事を書かれていますので
まずはそちらの記事を見ていただいた方が内容を理解できるかと思います。

学習を始める前に

この記事ではHTML/CSS/JSのみでNodeCGのbundleを作成する場合の解説になります。
各種フレームワーク（React/Vue/Angular）等を利用してbundleを作成する方法もありますが
webサイトを作った事があるぐらいの人でも活用できる内容にしたいためHTML/CSS/JSでの解説を進めていきます。
ちなみにエディタはVScodeをおすすめします。

対象

  • HTML/CSSの基本的な知識（簡単なサイトが作れるぐらい）
  • Javascriptはまだそこまで分からない
  • NodeCGの導入と起動までは行える

Node.jsやGitについてある程度分かっている必要があります（そこまで使いません）

bundle作成の前の準備

bundleとは何か

NodeCGで配信レイアウトを作成するということはNodeCGに読み込ませるbundleを作成するということになります。
bundleとは何かというと、配信レイアウトの構築に必要なファイルをまとめてパッケージとしてまとめたもので
この中に管理画面の情報や表示されるレイアウトをコードとして記述していくことになります。

nodecg/bundles/の中は最初はフォルダなどがなく.empty_directoryというファイルがあるかと思われますが
この場所に新たにフォルダを作成してbundleを作っていくことになります。

ディレクトリ構成

まずは実際にbundleを作成してみましょう。
nodecg/bundles/バンドル名にて新しいフォルダを作成します。

ファイル構成としてまずは最低限このようなファイルが必要になります。
またHTMLにスタイルなどを直接記述してCSSやJSをまとめても問題ありません。

sample-bundle
├ dashboard
│ ├ sample-panel.html //管理用のパネルのhtml本体
│ ├ style.css //dashboard用のスタイルシート
│ └ main.js //dashboard用のJavascript
├ graphics
│ ├ sample.html //レイアウト画面（OBSで読み込むのもこのページになります）
│ ├ style.css //graphics用のスタイルシート
│ └ main.js //graphics用のJavascript
└ package.json //設定ファイル

また、gitで管理する場合はsample-bundle内をgitで管理してあげれば配布なども容易になるかと思われます。

package.jsonの記述

package.jsonの内容は下記のような感じです。
公式ドキュメントではこちらのページに解説が書かれています。

package.json
{
  "name": "バンドル名",
  "version": "0.0.0",
  "description": "バンドルの概要",
  "main": "../../index.js",
  "scripts": {
    "start": "node ../.."
  },
  "nodecg": {
    "compatibleRange": "^1.1.1",
    "dashboardPanels": [
      {
        "name": "管理画面のパネル名",
        "title": "管理画面のパネルタイトル",
        "width": 1,
        "file": "sample-panel.html"
      }
    ],
    "graphics": [
      {
        "file": "sample.html",
        "width": 1920,
        "height": 1080
      }
    ]
  }
}

ちょっと内容について解説

基本的にpackage.jsonですので内容としてはnpmを利用する際に生成されるpackage.jsonと同じです。
NPMを使ったことが無い人からすると分かりづらいですが
他にも様々な項目を記述することができたりパッケージ管理などもこのファイルで行われるんだなという認識で問題ないと思います。

自分は下記の記事などで調べたので興味のある方は読んでみてください。
【初心者向け】NPMとpackage.jsonを概念的に理解する

基本的な項目

package.json
{
  "name": "バンドル名",
  "version": "0.0.0",
  "description": "バンドルの概要",

bundleの名前やバージョン、概要などを記述します。

bundleからNodeCGを起動できるようにする

package.json
  "main": "../../index.js"
  "scripts": {
    "start": "node ../.."
  }

この部分は必須ではありませんが記述しておくとbundleの中身だけをVScodeで書いていても
NPMスクリプトからすぐにNodeCGを起動できます。

NodeCGの設定項目

package.json
  "nodecg": {
    "compatibleRange": "^1.1.1",
    "dashboardPanels": [
      {
        "name": "sample-panel",
        "title": "sample-panel",
        "width": 1,
        "file": "sample-panel.html"
      }
    ],
    "graphics": [
      {
        "file": "sample.html",
        "width": 1920,
        "height": 1080
      }
    ]
  }

NodeCGの設定項目としては上記の部分が中心で上から

項目 内容
"compatibleRange" このbundleが対応しているNodeCGのバージョン
"dashboardPanels" dashboard（管理画面）の設定
"name" 管理画面のパネル名
"title" 管理画面のパネルタイトル
"width" パネルの幅を指定できます[1]
"file" パネルのhtmlファイルを指定
"graphics" graphics（配信レイアウト側）の設定
"file" 配信レイアウトのhtmlファイルを指定
"width" レイアウトの横幅
"height" レイアウトの縦幅

このような項目があります。
他にもオプション項目などもありますので必要に応じて記述する必要があります。

ここまできたら後はsample-bundle/dashboard/とsample-bundle/graphics/内で
レイアウトとロジックを書いてあげればbundleを作成することができます。

実際に動的なbundleを作る場合には特にNodeCGの中のReplicantなどの仕組みを使う必要があるのですが
ここまで書いて気力が尽きたので、そちらについてはまた改めて書かせていただきます。。。

更新履歴

  • 2020-11-01 記事のリンクを更新
  • 2020-10-29 NodeCGのWebサイトリンクを更新
脚注

  1. オプション項目ですがパネルを１つしか使わない場合は大きめに設定しておくといいかと思います。デフォルト値は2です。 ↩︎

GitHubで編集を提案

Discussion