スマブラSP大会用ライブ配信レイアウト "ssbutw" を使うまで【NodeCG】

こんにちは。普段はゲームのオフライン大会運営をしながら、日曜大工的に浅瀬でプログラムの勉強をしている者です。

今回NodeCGに関する学びが僅かながら蓄積してきたことと、大変便利そうなライブ配信レイアウトの存在に知ったことをきっかけに筆を取りました。

記事の目的

• スマブラを始めとする対戦ゲーム勢に「ssbutw」を紹介し、アプリを起動し使うところまでの方法を共有する
• 備忘録の作成

（アプリの中身を書く話はしません。あくまで使うまで）

想定読者（自己紹介）

• StreamControlを使ったことがある、またはOBSのテキストソースでスコア管理をしたことがあり、BANステージなどよりリッチな配信レイアウトを使ってみたい
• スマブラSPをはじめとする対戦ゲームのライブ配信に興味がある
• 自分で配信レイアウトを作成するほどの技術はないが、調べながらありものを動かすことはできそう

ssbutwとは

ssbutwは、スマブラSP大会用ライブ配信レイアウトの表示・操作・管理を行うアプリです。

ウメブラ・ヒロスマ等のStreamControlをNodeCGで動くように改造したもので、BANステージ表示やSmash.gg連携など機能が追加されています。

オリジナルのページにはスコアボードや操作UIのスクリーンショットがたくさん載っています。
StreamControl等を見慣れている人なら直感的に理解できると思います。（英語です）

ssbutw
https://github.com/crs38c28/ssbutw

作者様
https://github.com/crs38c28

※StreamControlって何？という方は「日本 StreamControl 学会」をご参照ください。

日本 StreamControl 学会
http://streamcontroljapan.blog.jp

できること

従来のStreamControlでもできたこと：

• 選手情報の表示（名前、Twitter、国旗、スポンサー）
• スコア表示
• 大会名、ラウンド表示
• ファイターアイコン表示
• Lower thrids表示

ssbutwで追加されていること：

• BANステージ表示
• 複数オーバーレイ対応（ウメブラ2種、GENESIS6、FB2019ダブルス、ヒロスマ）
• 参加者情報インポート（Smash.gg API、Challonge API ※Smash.ggの方は不具合あり？）
• 参加者情報リスト管理（名前1、名前2、チーム、Twitter、国、使用ファイター）
• 3言語対応（繁体中国語、英語、日本語）

従来のStreamControlと比較したメリット・デメリット

概して、

「必要な機能を揃えて誰でも使えるようにシンプルにまとめたStreamControl」
vs
「導入までに学習コストがあるが多機能なNodeCGレイアウト」

というイメージです。

メリット

• BANステージを表示できる
• 選手情報を分かりやすく管理できる
• オーバーレイ更新をリモートで役割分担できる

デメリット

• アプリを起動するまでの環境構築や準備が必要
• サーバーを用いる場合は接続トラブルが発生する可能性がある

前提知識

基本的にありものを用いるのでプログラムをいじることはありません。
ターミナル, git, node.js, NodeCG, Webサーバに関する浅瀬の知識があると作業の全体像が掴みやすい程度です。

ここでは本記事を読む上で最低限必要なNodeCGに関する情報を簡単に説明します。
ちゃんと知りたい人はHoishinさんの記事やコミュニティDiscordを参照して下さい。というか推奨します。

ライブ配信レイアウトを作るNode.jsのフレームワーク
https://qiita.com/Hoishin/items/36dcea6818b0aa9bf1cd
Twitter
https://twitter.com/nodecg
記事群
https://qiita.com/search?q=nodecg

NodeCGとは、Webの技術を使って動的でリッチな配信レイアウトを作成・管理する技術の様式です。
国内だとRTA in JapanをはじめとするRTA勢の方々が中心になって使用・開発されています。

主な構成要素はDashboardとGraphicsの2つで、2つをまとめたものをBundleと呼びます。
Dashboardは操作部分で、Graphics配信レイアウト部分です。
前者をブラウザで開き、後者は配信ソフトでブラウザソースとして開きます。
前者を操作すると後者に反映されるという流れになります。

色々な方々がBundlesを開発しています。
RTA用、格ゲー用など様々なBundlesが作られています。
今回のssbutwは主にスマブラSP用に作られたもので、

中身としては、Dashboard（操作部分）は

• スコア入力
• 選手情報管理
• 選手情報インポート
• BANステージ選択

が、Graphics（配信レイアウト）は

• スコア・プレイヤーネーム表示（ウメブラ・ヒロスマ・GENESISなど各大会仕様のレイアウト）
• BANステージ表示

が入っています。

普通のWebページと同じようにWebサーバを立ててアプリを起動すれば、配信PC以外の端末（リモート端末や選手用のタブレットなど）から操作が可能です。

使用パターン

主な使い方としては3パターンくらいがあるかと思います。

1. 配信PC（ローカル）で完結
2. LAN内で完結
3. Webサーバを利用

パターン1は配信PC上でNodeCGアプリを起動し、同PC上でスコアボード更新など全てを行う場合です。
パターン2は配信PCと同一LAN内のPC（配信PCでも可）でNodeCGアプリを起動し、そのLAN内の端末からスコアボードを操作したり、選手がBANステージを入力したりする場合です。
パターン3はWebサーバ上でNodeCGアプリを起動し、配信PCやスタッフ／選手用の操作端末から操作する場合です。

BANステージを配信画面に表示させるとしたら、パターン2か3を採用するのが良さそうです。

著者の環境

今回はMacを用います。

macOS Catalina 10.15.4
nodebrew 1.0.1
node.js 12.18.3
npm 6.14.6
NodeCG 6.1.0
zsh

Windowsでもgit bashを用いて動作確認しています。

起動までの流れ

続いて起動までの流れを説明します。
主な流れは以下の通りです。

1. 必要なものをインストール（git, node.js, nodecg-cli, NodeCG, ssbutw-bundles）
2. 使用パターンに応じた設定（LAN内の配信 or AWS EC2 上で起動）
3. アプリを起動

ローカルで完結させる場合と、Webサーバを用いる場合に分けて説明します。

起動までの流れ（ローカル版）

オリジナルのページのInstallation最下部「Directly Download Build Bundle (If you want to add your own dashboard/layout)」の流れに沿っています。

ssbutw Installation
https://github.com/crs38c28/ssbutw/wiki/Installation

0. ターミナルを起動

所謂「黒い画面」のターミナルを起動します。
ここから文字を入力して、必要なものをインストールしたりファイルを操作したりします。

操作する上で cd ls open mkdir などコマンドが必要になります。
必要あれば「ターミナル コマンド」などで調べて下さい。

1. nodebrew, node.jsをインストール

nodebrew: node.jsをバージョンを管理するもの、node.jsを効率よくインストールするのに必要
node.js: javascriptの仲間、NodeCGを使うために必要

1.1. nodebrewのインストール

nodebrewをインストールするためのパッケージ管理ツールであるhomebrewをインストールします。
ターミナルに下記を入力します。

$ sudo /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

nodebrewをインストールします。

$ brew install nodebrew

1.2. node.js をインストール

node.js (v12.18.3) をインストールします。

$ nodebrew install 12.18.3

バージョンを確認してインストールできていることを確認します。

$ node --version
v12.18.3
$ npm --version
v6.14.6

npmは、node.jsを使う上で便利な機能のまとまりを飛び道具的に扱いやすくしてくれる管理システムのようなものです。

参考

初めてのコマンドライン=>npmの利用まで
https://qiita.com/y_sekitoba/items/f0d50afe3884bd22f6d5

2. nodecg-cliをインストール

NodeCGをターミナルから操作するために必要な「nodecg-cli」をインストールします。

$ npm install -g nodecg-cli bower

3. NodeCGをインストールするフォルダを作成

"your-nodecg-project-name" の部分はフォルダ名です。
分かれば何でも良いです。
ターミナルを特に操作していないとフォルダはhomeフォルダに作成されます。
作成する場所を変更したい場合は、あらかじめ cd を用いて移動してください。

$ mkdir your-nodecg-project-name
$ cd your-nodecg-project-name

4. NodeCGをセットアップ

作成したフォルダにNodeCGをセットアップします。

$ nodecg setup

このコマンドを実行して、対象のフォルダに様々なファイルやフォルダが作成されればセットアップは成功です。
※your-nodecg-project-nameが空のフォルダでないとエラーが出ます。

5. bundleをセットする

"your-nodecg-project-name" フォルダ直下の "bundles" フォルダに移動します。

$ cd bundles

ssbutwのbundleをダウンロードします。

$ git clone https://github.com/YujiAIda/ssbutw-bundle

フォルダ名をssbutwに変更します。

$ mv ssbutw-bundle ssbutw

8. ssbutwをnpmで管理できるようにする

$ cd ssbutw 
$ npm install

9. your-nodecg-project-nameに階層を合わせてアプリを起動

$ cd ../..
$ nodecg start

問題なく起動すれば "http://localhost:9090" で起動している旨が表示されます。
ブラウザのアドレスバーに "http://localhost:9090" を入力して起動を確認できます。

11. 同一LAN内の別端末で開く

同一LAN内の別端末で開く場合は、(ホストのIPアドレス):9090をブラウザから開きます。
ホストのローカルIPアドレスは下記コマンドで調べます。

$ ifconfig

ずらっと文字が表示されますが、"en0(Wi-Fiの場合)" の "inet" の横の数字がローカルIPアドレスです。
Wi-Fi接続でない場合は、それっぽい項目かを試すか、 "ifconfig" でググってください。

12. アプリを終了

Ctrl + Cを入力

起動までの流れ（AWS EC2版）

注意：AWS EC2は利用料金が発生する場合があります。基本的に無料枠の範囲で利用すれば気にする必要はありませんが、ご自身で調べてから使用することを推奨します。

基本的な流れはローカル版と同じです。
AWS EC2のインスタンス（仮想PCみたいなもの）を作成し、そこの上でアプリを起動し、そこにアクセスするという流れです。

1. AWS EC2インスタンス準備

AWSの設定はこちらの記事を参考にしました。

AWS EC2でNodeを動作させる
https://qiita.com/oishihiroaki/items/bc663eb1282d87c46e97

まずはこちらの5章まで進め、以下を完了させます。

1. AWSアカウント作成
2. EC2インスタンス作成
3. SSHでEC2 インスタンスへ接続
4. node.jsのインストール

2. アクセス関係の設定

次に、外部端末からアクセスする宛先に関する設定と確認を行います。

2.1. パブリックIPアドレスの確認

EC2ダッシュボードから確認します。

2.2. ポート(9090)解放

下記記事を参考にしました。

セキュリティーグループにルールを追加する (サーバーのポートを開放する) - Amazon AWSの使い方 Tips
https://www.ipentec.com/document/amazon-ec2-add-rule-to-security-group

1. EC2ダッシュボードを開く
2. 左メニューから「セキュリティグループ」をクリック
3. 実行中のインスタンスで使用するセキュリティグループ名をクリック
4. インバウンドルールをクリック
5. インバウンドルールを編集をクリック。
6. ルールを追加をクリック。タイプを「カスタムTCP」、ポートを「9090」、ソースを「任意の場所」とする
7. ルールを保存をクリック。

3.NodeCGの準備

無事AWS EC2インスタンスに接続できたら、上記「起動までの流れ（ローカル版）」の手順でnodecg start まで行います。

4.他のデバイスから開く

EC2ダッシュボードで確認したグローバルIPをブラウザ（ブラウザソース）に入力します。
例： http://[グローバルIP]:9090/

これで開かなければポート9090が開放されているか確認します。
問題なくと動いていれば、複数デバイスで同じページを開き、片方で操作したことがもう一方に反映されることを確認できます。

5.終了時

5.1. アプリの終了

Ctrl + C

5.2. EC2 インスタンスの終了

EC2ダッシュボードから「インスタンスの状態」→インスタンスの終了をクリックします。
インスタンスが終了（≒削除）されるます。
課金されなくなります。

「停止」だけだと、アプリを切っていても課金され続けるので注意。（Elastic IPを占有し続けるかららしい）

備考

• 元のgithubのbundlesブランチだけgit cloneする方法がわからなかったので、自分用にリポジトリ作りました。

• 上記のやり方だとnodecg startするとCtrl + Cするまでターミナル が占有されてしまうので、バックグラウンドでアプリを動かし続けるforeverみたいな道具を使うと安全かもしれません。

Node.jsアプリをLinux環境で常駐化させる　forever編
https://qiita.com/chihiro/items/24ca8ac81cb20c22b47e

• 今回は勉強がてらAWS EC2を利用しました。
  VirtualBoxや他のレンタル／クラウドサーバーとかでもっといい方法があるかもしれません……。

• オリジナルのNodeCGアプリはジョーカーが参戦したあたりで更新が止まっています。
  小戦場を追加する際は自身で画像を用意し、うまく名前を変更して画像フォルダに追加する必要があります。
  ファイターの追加はよくわかっていません……。

• JavaScriptの学習はこちらを利用しました。旧NodeCG Discordでお薦めされていました。

  • https://jsprimer.net