大会やイベントの配信をする際、ディスプレイに表示させるウィンドウの管理も大変です。
ゲーム画面、OBSと二つあるところにトーナメントツールやスコアボードのコントローラー……少しでもウィンドウの数を減らしたいところです。
そういう時に、OBSにYMSBのコントローラーを合体させて表示させれば少しは負担軽減につながるのではないでしょうか。今回はその手順について解説します。
事前準備
Node.jsとjson-serverのインストール
本機能を利用するにはNode.jsとそのツールであるjson-serverのインストールが必要になります。
インストール方法等はこちらのページの事前準備①②をご参照ください。
OBSのカスタムブラウザドックの設定
次にOBS側の設定に移ります。
OBSの上部メニューから「ドック」→「カスタムブラウザドック」を選択します。
次に、どのページを開くのかの指定をします。
ドック名は何でもかまいません。ここでは便宜上「YMSB」としています。
URLは「streamcontrol\YMSB_Expert.html」を絶対パス（「C:」とか「D:」とかから始まるやつ）で記入してください。
下図は例です。お使いの環境に合わせてご入力ください。
Windowsの方で「絶対パスがわからない！」という方は、エクスプローラーでYMSBの「streamcotrol」フォルダを開いた状態で、ここをクリックすると絶対パスが表示されますので、そのままコピーして先ほどのURL欄に貼り付け。そのあとに「\YMSB_Expert.html」を追加すればOKです。
これで「適用」ボタンをクリックするとYMSBコントローラーが表示されるはずなので、OBSのお好みの位置に配置してください。
ちなみに冒頭の図のような配置にしたい場合、YMSBコントローラーを下図の矢印が示すあたりにドラッグしてくるとハマります。
カスタムブラウザドックからの使い方
json-serverの起動
YMSBコントローラーからの操作を有効にする為に、json-serverを起動する必要があります。
先ほどの「Stream Deck」ページの「json-serverの起動」をご参照ください。
簡単に説明すると、Windowsユーザーの方は「JsonServer.bat」をダブルクリック、その他のOSの方は以下のコマンドを実行してください。
npx json-server --watch streamcontrol.json -p 2997
ここで開かれた画面はYMSBを使う間閉じないでください。一番前でなくても大丈夫です。
YMSBコントローラーの初期設定
json-serverが起動できたら、今度はYMSBコントローラーの初期設定を行います。
YMSBコントローラーの「Config」タブの「Stream Deck 設定」にある「Stream Deck」の項目を「使う」に設定してください。
その後、INITボタンをクリックして「INIT完了！」のメッセージがでればOKです。
あとはYMSBコントローラーから従来通りの操作が可能となります。