Zenn
🐇

NodeCGでスポーツコーダ#1:環境構築(Reactなしver)

2024/11/24に公開
JavaScript
Node.js
NodeCG
tech

概要

NodeCGを使ってスポーツコーダが作れるか検証していきます。
今回はNodeCGをJavascirpt(Reactなし)で構築します。

背景

スポーツコーダとは

スポーツコーダはスポーツ中継やライブ配信時に使うテロップシステムです。今までは専用機や専用システムを使っていましたが、NodeCGで代替できないか実際に構築しながら検証をしていきます。

NodeCGとは

NodeCGは、主にライブ配信やeスポーツ大会で使われるオープンソースのツールで、配信画面に表示するオーバーレイや情報パネルを簡単に管理・作成できるフレームワーク(Node.js)です。

主な特徴：

  • スコアやタイマーなどのリアルタイム情報を管理・表示できる
  • 配信のグラフィックを効率的に制御できる
  • 配信者が操作しやすいカスタムダッシュボードが作成できる

なぜNodeCGで構築するのか

  1. 無料で使える(複数会場同時に使える)
  2. オペレーションに専用機が不要(複数会場同時に使える)
  3. 会場のビジョンや放送席に映像を送れる
  4. OBSやvMixでブラウザソースが使える
  5. OBS経由でベースバンドのスイッチャーにフィルキーを送出できる

NodeCGのデメリット

  1. プログラミングの知識が必要(Javascript, HTML, CSSなど)
  2. インターネット上で使う場合、サーバー構築の知識が必要

環境構築:NodeCG起動まで(windows)

2024.11.24時点の環境構築方法です

Node.js(version18)をインストール

Gitをインストール

  • Gitのダウンロードからダウンロードしてインストールします
  • インストール後にPCを再起動して環境変数のPATHが通っているか確認します。PATHが通っていない人は"Git 環境変数 PATH"で検索して調べてください
>git -v
git version 2.43.0.windows.1
# バージョンが表示されればOK

npmでnodecg-cliをインストール

コマンドラインから操作します

npm install --global nodecg-cli@latest

nodecgのインストール先フォルダを作成して移動する

場所とフォルダ名は任意です(私はデスクトップで作りました)

# 事前にcdコマンドでデスクトップなどに移動する
mkdir nodecg
cd nodecg

nodecgをインストールする

開発用のWebサーバなど必要なパッケージは自動で追加されます

nodecg setup

起動チェック

nodecgを起動してブラウザで動作確認します

nodecg start

実行後ブラウザでhttp://localhost:9090にアクセスしてダッシュボードが表示されるか確認します。
確認ができたらサーバを起動したコマンドラインで[Ctrl]+[c]を押してWebサーバを終了します。このとき修了確認が表示されたときは"Y"を選びます

環境構築:バンドルの作成(windows)

NodeCG独自の考え方にバンドル(bundle)があり、次の3つの機能を1つにまとめたものをバンドルといいます。グループやパッケージみたいなイメージでいいと思います

バンドルの機能:

  • ダッシュボード(dashboard): オペレータ用、テロップ制御フォーム
  • グラフィック(graphics): テロップ画面、ビジョン画面など実際に表示する画面
  • エクステンション(extension): データベースアクセスや計算処理、変数の管理などをします

bundlesフォルダに移動する

nodecgのルートフォルダにbundlesフォルダがあるので移動する

cd bundles

バンドル(名前は任意)フォルダを作り移動する

これから作るバンドルのフォルダ(名前は任意)を作り移動します。ここではmy-first-bundleという名前のバンドルを作成しています

mkdir my-first-bundle
cd my-first-bundle

ジェネレータを使いバンドルを作成する

  • バンドルは1から作るのではなく、generator-nodecgというジェネレータが用意されているのでインストールします。
  • なお、ジェネレータはYeoman（ヨーマン）というツールを使います。Yeomanはソフトウェア開発で使われるテンプレート生成ツールです。
  • [重要!]ジェネレータを実行すると対話形式で設定を行いますが、Typescriptを使うかどうか?の質問はデフォルトで"Y"(yes)になっているので、"N"(No)を選びます。他の質問はデフォルト値でOKです
yo nodecg
# Typescriptを使用するか?の質問は"N"を選ぶこと

動作確認

  • Webサーバを起動してダッシュボードに移動します。"Panel"が表示されることを確認します。この画面がテロッパーが操作する制御画面です
  • 続いて画面右上のGraphicsボタンを押下して、index.htmlがあることを確認します。ここにテロップ用やビジョン用やプレビュー用などのHTMLファイルをそれぞれ作っていきます
  • 続いてindex.htmlを押下してブラウザに真っ白な画面が表示されることを確認します。この画面が配信や放送に送出する画面です。OBSを使うと背景の白色は透過されます

留意点や感想など

  • 本記事は開発者向けでなく現場テロッパーが作れるようになることを想定していますので、ReactやTypescriptは使わない方針です(ちなみに今勉強中ですw)
  • 私がスポーツコーダで苦労したことは、複数試合同時にテロップを出す方法でした。NodeCGを使うとリモートでテロップ送出もできそうなので落ち着いたらそういった記事も書きたいですね

Discussion