ざっと分かるセトノブログ

備忘録として日記やオススメ紹介を書いてます。

OBSにMacでもWindowsでもスコアボードを表示するオーバーレイ「BraceBracket」の説明(Googleスプレッドシートで管理)

こんにちはセトノです

ゲーム大会の配信で選手名やスコアを表示したい…!って方多いんじゃないでしょうか?

今回はスコア表示を「Googleスプレッドシート」で管理する方法を紹介します。

なんと遠隔でも操作可能です。

なんとなんとWindowsでもMacでも使用できるのでぜひ試してみてください。

 

説明は「Googleスプレッドシート」を使う方法の導入に限定します。

最低限の説明だけです。

プログラマにも分かるように説明するのでご安心ください。

 

BraceBracket」の詳しい仕様や説明は↓の

作者様(Masaki Ando)の説明ページ↓

https://github.com/blacktails2/BraceBracket

を参照してください。

目次

【手順0】レイアウトのデザインを決める

【手順1】下準備1(ダウンロード&インストール)

【手順2】下準備2(ファイルの配置)

【手順3】「Googleスプレッドシート」をいじる

【手順4】「OBS」の設定

【手順5】動作テスト

【手順6】イベント当日の操作(手順5と同様の操作)

【手順7(追加オプション)】大会ロゴを表示

【導入手順】

【手順0】レイアウトのデザインを決める

使用したいレイアウトデザインを4種類から選んでください。↓

https://github.com/blacktails2/BraceBracket

・Dualレイアウト →「index.html」

・Singleレイアウト →「single.html」

・Solidレイアウト →「solid.html」

・Simpleレイアウト →「simple.html」

ここで選んだ「htmlファイル」をあとでいじります。(【手順3-4】です)

【手順1】下準備1(ダウンロード&インストール)

【手順1-1】「リリースページ」から「Source code (zip)」をダウンロード↓

Releases · blacktails2/BraceBracket · GitHub

【手順1-2】「Visual Studio Code」をダウンロード↓

無料の開発者ソフトウェアとサービス - Visual Studio

【手順1-3】「Visual Studio Code」をインストール

【手順2】下準備2(ファイルの配置)

「Source code (zip)」を展開

「BraceBracket-1.1-beta」の中にある「BraceBracket-1.1-beta」を好みの場所に移動(設定したのちに移動させると動作しなくなるので注意)

【手順3】「Googleスプレッドシート」をいじる

【手順3-1】「Googleアカウント」にログインする

イベントで使う「Googleアカウント」でログインする↓

ログイン - Google アカウント

【手順3-2】 作者の「Googleスプレッドシート」をコピーする

作者の「Googleスプレッドシート」「score_test」にアクセス(シート内容の変更は禁止)↓

score_test - Google スプレッドシート

「ファイル」(画面左上)

「コピーを作成」(シートに好みの名前を付ける「~用スコアボード」など)

コピー元の「score_test」シートを閉じる

コピーしたGoogleスプレッドシートをブックマーク(お気に入りに登録)

【手順3-3】コピーした「Googleスプレッドシート」のscriptをコピーする

拡張機能」(画面上)

「Apps Script」

「デプロイ」(画面右上)

「新しいデプロイ」

「アクセスを承認」

「次のユーザーとして実行」が「自分」(イベントで使うアカウント)

「アクセスできるユーザー」が「全員」

「デプロイ」

「(安全ではないページ)に移動」

「詳細」

「許可」

「ウェブアプリ」の「URL」をコピー

【手順3-4】 共有者に編集権限を与える

「共有」(画面右上)

「変更」

「編集者」に変更

【手順3-5】 レイアウトの「htmlファイル」をいじる

【手順0】で選んだ

「index.html」or

「single.html」or

「solid.html」or
「simple.html」

を「Visual Studio Code」で開く(右クリック→「プログラムから開く」)

表示された文字の中から↓箇所を探して変更してください。

const endpoint = "localscore.json";

を↓に変更

const endpoint = "【手順3-3】でコピーしたGoogle Apps ScriptのURL";


変更出来たらファイルを保存してください。

【手順4】「OBS」の設定

「OBS」を起動

「ソース」で右クリック

「追加」

「ブラウザ」

好きな名前を付ける(「スコアボードBraceBracket」など)

「ローカルファイル」にチェックを入れる。

「幅」を「1920」

「高さ」を「1080」にする

「参照」

【手順0】で選んだ

「index.html」or

「single.html」or

「solid.html」or

「simple.html」

を指定

「OK」

「ソース」にある「鍵マーク」を押す(ロックを掛ける)

【手順5】動作テスト

【手順5-1】 内容を反映する

【手順3-3】でコピーしてブックマークした「Googleスプレッドシート」を開く

選手名などの値を変更する。(変更後に入力欄以外のところを選んで左クリック)

【手順5-2】 反映されない場合

【手順4】「OBS」で作った「ブラウザ」(「スコアボードBraceBracket」など)をクリック

「再読み込み」を押す。

【手順6】イベント当日の操作(手順5と同様の操作)

【手順7(追加オプション)】大会ロゴを表示

【手順7-1】大会ロゴを表示する

ロゴマークの画像(透過PNGの物)の名前を「logo.png」に変更。

「logo.png」を「BraceBracket-1.1-beta」のフォルダの「image」フォルダに移動。

Visual Studio Code」を開き、【手順0】で選んだhtmlファイルの↓箇所を変更(「disable」を「able」)

<div class="dual_logobox"><img src="image/logo.png" alt="" class="dual_logo disable"></div><!-- 大会ロゴ なしの場合はクラスにdisableを追加 -->

↓変更

<div class="dual_logobox"><img src="image/logo.png" alt="" class="dual_logo able"></div><!-- 大会ロゴ なしの場合はクラスにdisableを追加 -->


【手順4】の「OBS」で作った「ブラウザ」(「スコアボードBraceBracket」など)をクリック

「再読み込み」を押す。

【手順7-2】大会ロゴを非表示する

「BraceBracket-1.1-beta」のフォルダの「image」フォルダの「logo.png」を削除。

【手順4】「OBS」で作った「ブラウザ」(「スコアボードBraceBracket」など)をクリック

「再読み込み」を押す。

 

【完成】

以上です。

Googleスプレッドシート」を使うので遠隔でもスコアボードを変更できるのが革命的だと思います。

ぜひぜひ使用してみてください。

作者様(Masaki Ando)に感想を伝えてもらえると私も嬉しいです(´∇`)

Masaki Ando (@wolphtype) | Twitter

ではではセトノでしたー。

2022年5月4日 追記 導入を手伝った大会で使用されました。

 

2022年5月5日 追記 篝火#7(裏方)で使用されていました。

www.twitch.tv

 

2022年5月28日 追記 「BraceBracket-1.0.4-beta」の内容を「BraceBracket-1.1-beta」に対応したものに差し替えました。