--- title: NodeCGで配信を華やかに tags: Node.js NodeCG OBS author: secchanu slide: false --- [Splatoon2](https://www.nintendo.co.jp/switch/aab6a/index.html)の大会で運営として[OBS](https://obsproject.com/ja)を使って運営放送(配信)をする際に放送をかっこよくするために何か良いものはないかと探しているうちに[NodeCG](https://nodecg.com/)というものを見つけました。 # NodeCGで何ができる? **NodeCGを使うとOBS組み込みブラウザ(ブラウザソース)に用意したHTMLを表示させて、それを外部から操作することができます。** 文字じゃよくわからないと思いますが使ってみるとおおすげぇってなりますたぶん 自分の場合は以前ブラウザに表示させてそれをキャプチャして表示させていたんですが、書き換えている間は違うシーンに変えなきゃいけないし、誤ってウィンドウ閉じたりすると余計なものが映り込んだりしてしまっていたので、~~その方法もまた別に良いやり方があるのかもしれないが~~書き換えが必要なものをブラウザソースで表示させることができるのは凄い便利でした。 # 導入方法 については[cma2819氏](https://qiita.com/cma2819/items/e775bd8aa2a2fa911d4c)や[Hoishin氏](https://qiita.com/Hoishin/items/36dcea6818b0aa9bf1cd)が詳しく説明してくださっているのでそちらを参考にしてみてください。 # 実際につかってみる NodeCGのbundlesフォルダの中にフォルダを作ります。以後ここで作ったフォルダ名をexampleとして進めていきます。 その中に ```json:package.json { "name": "example", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "MIT", "nodecg": { "compatibleRange": "^1.0.0" } } ``` を置きます(NodeCGを動かす際に必要です)。 加えて、exampleフォルダの中にdashboardとgraphicsというフォルダを作っておいてください。 #### コメント表示 まずはdashboardフォルダの中に ```html:test.html ``` 次にgraphicsフォルダの中に ```html:index.html
``` を作成します。 できたら先程exampleフォルダに置いたpackage.jsonに書き加えます。 ```json:package.json { "name": "example", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "MIT", "nodecg": { "compatibleRange": "^1.0.0", "dashboardPanels": [ { "width": "1", "name": "test", "title": "コメント", "file": "test.html" } ], "graphics": [ { "file": "index.html", "width": 800, "height": 600 } ] } } ``` これで完成です。動かしてみましょう。 コマンドプロンプトを開いてNodeCGのディレクトリ(bundlesフォルダのが入っているディレクトリ)に移動して実行します。 ``` cd ここにNodeCGのディレクトリのアドレス node . ``` しばらくすると ``` NodeCG running on http://localhost:9090 ``` みたいに表示されるのでそのURL(この場合は`http://localhost:9090`)をブラウザで開きます。 すると ![dashboard](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519040/3c5cf145-8464-fbf7-8939-8cf779de39b2.png) 何かかっこいいのが表示されました。これがダッシュボードで、ここで操作します。 このままだと表示するやつがないので右上のGRAPHICSと書いてある目のマークをクリックしてください。 すると ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519040/ee340383-3750-15a7-6be3-e482948cb9a5.png) こんな感じの画面が出てくるのでCOPY URLをクリックし、OBSを起動してブラウザソースを追加してください。 ![obs](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519040/3ca1fdd8-1d5b-0b78-84bb-f4b8a91fd5a4.png) 追加した状態だと値が入っていないので何も表示されていません。 ひとまず先程開いたダッシュボードのWORKSPACEをクリックして操作画面に戻ります。 コメントと書いてある所に適当な文字を入力して反映ボタンをクリックしてみてください。 ![result](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519040/26e67bfc-c43f-82d2-377c-9e44ce85defc.png) **変わった!!!!!** と、こんな感じで動かせます。 もっといろいろやってみましょう。 #### 試合経過表示 HTMLやCSS部分はあんまりわかってないので参考にせずに、どんな感じに動かすかを見ていただければ… ※ここから先コードが長いので折りたたんでおきました。 まずはdashboardフォルダの中に
panel.htmlを作りました。
```html:panel.html





```
こんな感じで複数の値を送ることもできちゃいます。 次にgraphicsフォルダの中に
3games.htmlを作りました。
```html:3games.html
0
チーム名
メンバー

VS

0
チーム名
メンバー
-

1

? ? ?
? ? ?
-

2

? ? ?
? ? ?
-

3

? ? ?
? ? ?
```
みたいに作っていきます。 初期状態が映っても良いように適当な値を既に入れています。 また、`persistent: false`にすると前回分のデータが残らなくなるみたいです。 画像とかはまあ適当に用意してください。 上でも述べましたが、綺麗なコードではないので動かし方だけ参考にしていただければ… 先程と同様にpackage.jsonに書き加えていきます。 ここには書きませんが3games.htmlと同じように5games.htmlも作りました。 ```json:package.json { "name": "example", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "MIT", "nodecg": { "compatibleRange": "^1.0.0", "dashboardPanels": [ { "width": "3", "name": "panel", "title": "試合経過", "file": "panel.html" }, { "width": "1", "name": "test", "title": "コメント", "file": "test.html" } ], "graphics": [ { "file": "3games.html", "width": 1920, "height": 1080 }, { "file": "5games.html", "width": 1920, "height": 1080 }, { "file": "index.html", "width": 800, "height": 600 } ] } } ``` これでもう一度実行します。 すると ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519040/f5324ce0-99c7-f969-a5e4-dfd875dfea7c.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519040/fd2ce8a7-d04a-a308-2215-ad7f7c96b004.png) 項目が増えました。 またURLをコピーしてOBSにブラウザソースとして追加するんですが、今回は背景も含めたいのでカスタムCSSの部分を空白にします。サイズも数値を変更しておいてください。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519040/e8b53a40-c3d4-f1c4-3dc1-ee60e089057e.png) 入力欄に入力して反映ボタンをクリックすれば画面内でも変わります。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519040/648cac39-6680-9f85-e259-3ca00b890207.png) 同じように作った5games.htmlも同じ操作パネルで同時に変更できます。 # 感想とか 自分は作っていませんが、チーム名と勝数カウンターの部分を使って試合中に何対何なのかを表示できるようにしても面白そうです。あとは表示する部分にアニメーションとかも付けてみたいですね。上手くやれば書き換え自体も演出にできそう(?)。 間違っている部分とかあれば教えて下さい。