格ゲー配信オーバーレイ：3on画面、googleスプレッドシート連携アップデート

全部入りダウンロードはこちら。今回から容量がnoteの上限をオーバーしたのでグーグルドライブの共有を使っています。

fg_layout.zip

Macなどで自力でnodecg入れてる方のバンドルはこちら

bardothodol77 / fighting-game-layout / Downloads — Bitbucket

今回、いくつかライブラリを入れていますのでコピーするだけでなくnpm updateを忘れないでください。

3on対応について

格ゲー配信に最適なオーバーレイのアップデートを行いました。
3onについては単純に画面が増えただけで、運用方法などは2onとほぼ一緒です。

GLAPHICSの3on.htmlが新規の3on用画面になります。手入力で運用する場合は以下の記述は必要ありません

スプレッドシート連携はチームやプレイヤー名をあらかじめ記入しておく事で呼び出しが簡単になり運用での間違いを減らし手間を省く、効率的なオペレーションが出来る様になります。

連携準備1：スプレッドシート作成

googleアカウントでスプレッドシートを作成します。

Google Drive: Sign-in

新規ボタンでスプレッドシートを作成します。名前はなんでも良いので適当につけてください

ヘッダー部分に
・id
・team
・player1（人数に合わせて数字部を増やす）

idには連番、teamにはチーム名、playerには選手の名前を記入します。

図のような感じです。記入し終わったら範囲を選択して右クリック→「名前付き範囲を選択」で「team」と名前をつけます。

連携準備2：シートの共有設定とidを調べる

画面の右上に「共有」ボタンがありますので、クリックして「リンクを知っている全員に変更」にします。

あとは、idを控えておきます。URLの文字列は以下のようになっていると思います。

https://docs.google.com/spreadsheets/d/この部分の英数字がシートID/edit#gid=0

「この部分の英数字がシートID」と記載されている部分です。あとで必要になりますので控えておいてください。

以上でスプレッドシートの設定ができました。

連携準備3：APIキーを取得する

次はこれを利用するためのAPIキーを取得します。

Google Cloud Platform

こちらにアクセスします。スプレッドシートが作れるならすぐのはずです。

追記：重要(2021/09/02)

ここで左メニューのライブラリを選択し、「google sheet API」を選択、有効にします。これをしないと制限項目で出てきませんのでご注意ください！

追記ここまで---

新しいプロジェクトを作成します。作成ボタンを押すだけで良いです

認証情報のページに行きますので「＋認証情報の作成」から「APIキー」を選びます

APIキーが作成されました。このままだと使えませんので右下の「キー制限」をクリックします。

アプリケーションの制限→なし　のままでOK（2021/09/02追記）

APIの制限→キーを制限→ google sheets APIにチェック

これで「保存」でOKです

このように緑のマークがついていたら成功です。キーがコピーできるのでこれも控えておきます。これがAPIキーになります。

もし、制限を忘れて閉じてしまった場合も赤い「！」マークをクリックする事で再度設定できます。青いチェックマークになるようにしてください。

これでAPI側の準備ができました。

連携準備4：NodeCG側の設定をする

オーバーレイ側に設定をしていきます。設定ファイルはchallongeの時と同じcfgフォルダになります

今回から全部入りをDLをした方には最初から入れることにしました。直接DLしている方はバンドル内のcfgフォルダにあるものをコピーしてください

fg_layout/nodecg/cfg/

こちらのfighting-game-layout.jsonをVScodeなどで開き、控えていたキーとシートIDを記入します。

    "googleApi": {
       "spreadsheetId": "ここにシートID",
       "apikey": "ここにAPIキー"
       }

以上で設定完了。起動します。

スプレッドシート連携の動作確認と使いかた

ここでオーバーレイを起動します。エラーが出た場合、設定が間違っています。どうしても起動できなくて連携を諦める場合はシートIDとAPIキーを削除（元通り）にしてください。通常起動はできるはずです。

こちら、下部に呼び出しセレクターとボタンが確認できると思います。
2onの時にも説明しましたが、基本はライフポイント対抗戦と同じ仕組みで動いています。

オーバーレイのスプレッドシート連携、noteに上げる説明用動画。noteには直接動画をアップする機能がないんでツイッター間借りします。入力の手間がなくなるんでだいぶ楽になると思うよ pic.twitter.com/kOCiaxxUby

— ばるど bardothodol (@bardothodol) August 25, 2021

チーム名を選んで呼び出しボタンを押すことでチーム名は上書き、既存のチームがあった場合は削除されます。「追加」を押さないと反映されません。
さらにチーム名はフォーム上で上書きされただけなので、全て反映したいときは「保存・更新」ボタンを押します。あとの操作は勝ち数を減らしたりアクティブ状態にしたりと変わりません。

スプレッドシート側でplayer2までなら2onの対応になりますし、5onなどもplayer5まで記入・範囲を指定すれば可能です（その場合ライフポイント対抗戦の画面を使ってください）参加者が増えた・減った場合などで範囲指定を変更する場合は右クリックで範囲指定を呼び出し、画像のようにグリッドの番号を指定すればいいです。

範囲指定はリアルタイムでは反映されません。オーバーレイ起動時のみ反映されます。ご注意ください

終わりに

もし、運用でどうしてもわからない事やエラーがありましたらツイッターやここのコメントで連絡くだされば幸いです。それでは配信頑張ってください