Zenn
Open3

NodeCG入門

deusdeus

環境はwindowsです。

とりあえず公式サイトに準拠して進めてみます。
https://www.nodecg.dev/

Nodeやnpmは入ってるモノとします（Node > 8.3、npm > 2）。
テストに使うディレクトリはnodecg_testとしました。

npm install --global nodecg-cli
mkdir nodecg_test
cd nodecg_test
nodecg setup

CLIを使ってセットアップするようです。
とりあえずnodecg setupが終われば起動出来るみたいなので下記コマンドで起動します。

nodecg start

どういうわけか、下記のJSONレスポンスが返ってくるだけで、うまく起動しません。

{"apiVersion":1,"fileVersion":{"major":2,"minor":1,"patch":18}}

注記に「プロダクションではDockerとか推奨やで！」と書いてあるのでDockerで起動してみます。

docker build -t nodecg_test
docker run -it -p 9090:9090 nodecg_test

とりあえずそれっぽい画面が起動しました。

bundleのセットアップも記載がありますが、lange/lange-notifyが消滅してるみたいなので次（Bundleの作成）に回します。

deusdeus

Yeomanとgenerator-nodecgというツールを併用することでbundleのひな形を作成することが出来るようです。YeomanはWebでは有名なんでしょうか？ちょっと調べると色々記事が出てきます。

とりあえずチュートリアルに沿って作業します。

npm install --global yo generator-nodecg
cd bundles
mkdir my-first-bundle
cd my-first-bundle
yo nodecg

誰なんだあんた一体！
質疑応答形式でいろんな設定をしていきますが、基本全てデフォルトで大丈夫だと思います。
配信で利用するという事を考えて、幅と高さだけ変更しておきます。

? Your graphic's width (in pixels) 1920
? Your graphic's height (in pixels) 1080

ちゃんと作成出来ているか起動して確認してみます。
いちいちdocker buildするのもめんどくさいのでbundleをマウントして起動します。dockerレベルが低いのでdokcer run -vでwindowsのディレクトリをうまくマウントできないのでdocker-composeで作ります。docker-compose.ymlを作成します。

version: "3.9"
services:
  nodecg:
    build: .
    volumes:
      - type: bind
        source: "./bundles"
        target: "/usr/src/app/bundles"
    ports:
      - "9090:9090"

docker-compose upでとりあえず起動してみます。

とりあえず中身をいじくり回すのは次のポストで。

deusdeus
docker-compose up

でNodeCGのコンテナを起動しておいて、作成したbundleを変更してみます。
その前に一応どのように表示されているのかを確認します。上部ツールバーの「GRAPHICS」をクリックすると追加したbundleが表示されています。

左の「1」という数字は現在別のタブでこの「my-first-bundle」の「index.html」を表示しています。おそらく閲覧してる総数だと思います（試しにタブを増やして表示すると増えると思います。）
このindex.htmlを開くには「COPY URL」から該当URLを表示します。

初期状態です。
「To edit me, open "nodecg/bundles/my-first-bundle/graphics/index.html" in your favorite text editor or IDE.」と記載されていますので、該当ファイルを編集してみます。

先ほど表示されていたページのHTMLらしきものです。こちらを編集します。

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>Hello NodeCG!</div>
    <script>
      nodecg.log.info("Here's an example of using NodeCG's logging API!");
    </script>
  </body>
</html>

とりあえず全体をシンプルに書き直しました。
保存してから先ほど開いていた「GRAPHICS」の「RELOAD」をクリックすると、ブラウザを更新しなくても表示が最新状態に切り替わります。

OBS内蔵のChromiumでレンダリングした後でも更新出来そうなので、ある意味納得の機能です。

実際の表示は良いとして、Panelの方も編集出来そうです。
まだ学習の途中ですが、NodeCGの利用方法としては下記のような想定をしています。


↑たぶんこう・・・

おそらくPanelに表示されている箇所もカスタマイズ可能です。なのでここを編集してみます。
「WORKSPACE」に表示されている「Panel」には「To edit me, open "nodecg/bundles/my-first-bundle/dashboard/panel.html" in your favorite text editor or IDE.」と記載されていますので、該当ファイルを編集します。

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>Hello NodeCG Panel!</div>
    <script>
      nodecg.log.info("Here's an example of using NodeCG's logging API!");
    </script>
  </body>
</html>

graphicを編集したときと同様に本文のみをシンプルにします。

折角Panelを編集しているのでPanelで変更した値をgraphicに適応するサンプルを書いてみます。
技術的にはReplicantという機能を利用するようです。

https://www.nodecg.dev/docs/classes/replicant

ドキュメントに沿って適当に実装します。まずはPanelから

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>Hello NodeCG Panel!</div>
    <div>
      <form id="update-my-rep">
        <label for="my-rep">myRep</label>
        <input id="my-rep" type="text" />
        <button type="submit">update</button>
      </form>
    </div>
    <script>
      const myRep = nodecg.Replicant("myRep", { defaultValue: 123 });
      const myRepForm = document.getElementById("update-my-rep");
      const myRepTextBox = document.getElementById("my-rep");

      myRep.on("change", (newValue, oldValue) => {
        console.log(`myRep changed from ${oldValue} to ${newValue}`);
        myRepTextBox.value = newValue;
      });

      myRepForm.addEventListener("submit", (e) => {
        e.preventDefault();
        myRep.value = myRepTextBox.value;
      });

      nodecg.log.info("Here's an example of using NodeCG's logging API!");
    </script>
  </body>
</html>

続いてgraphic

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>Hello NodeCG!</div>
    <div id="my-rep">default</div>
    <script>
      const myRep = nodecg.Replicant("myRep");

      myRep.on("change", (newValue, oldValue) => {
        console.log(`myRep changed from ${oldValue} to ${newValue}`);
        document.getElementById("my-rep").innerHTML = newValue;
      });

      nodecg.log.info("Here's an example of using NodeCG's logging API!");
    </script>
  </body>
</html>

Panelがこんな感じになります。

適当に値を変えてgraphicを見てみます。
ついでにconsole.logも書いたのでブラウザでコンソールも開いておきます。

実際に運用する際は「GRAPHICS」からロードするのではなく「WORKSPACE」のPanelで全ての値を管理出来そうです。
とりあえずなんとなくの挙動は分かったので、次は公式ドキュメントの「Guides」を読み進めたいと思います。