こちらは旧版の解説記事です。
最新版は↓からWeb版をどうぞ。
BraceBracket – Webベースの対戦ゲーム用スコアボードツール
↓旧版の解説
こんにちはセトノです
ゲーム大会の配信で選手名やスコアを表示したい…！って方多いんじゃないでしょうか？
今回はスコア表示を「Googleスプレッドシート」で管理する方法を紹介します。
なんと遠隔でも操作可能です。
なんとなんとWindowsでもMacでも使用できるのでぜひ試してみてください。
説明は「Googleスプレッドシート」を使う方法の導入に限定します。
最低限の説明だけです。
非プログラマにも分かるように説明するのでご安心ください。
「BraceBracket」の詳しい仕様や説明は↓の
作者様(Masaki Ando)の説明ページ↓
https://github.com/blacktails2/BraceBracket
を参照してください。
目次
【手順0】レイアウトのデザインを決める
【手順1】下準備1(ダウンロード＆インストール)
【手順2】下準備2(ファイルの配置)
【手順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アカウント」でログインする↓
【手順3-2】 作者の「Googleスプレッドシート」をコピーする
作者の「Googleスプレッドシート」「score_test」にアクセス(シート内容の変更は禁止)↓
「ファイル」(画面左上)
「コピーを作成」(シートに好みの名前を付ける「～用スコアボード」など)
コピー元の「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日 追記 導入を手伝った大会で使用されました。
○トーナメント表
— パラスマ@非公式スマブラオフトーナメント大会 (@PARASUMA_SSBU) 2022年5月3日
パラスマ#3 https://t.co/opFGz8DzFs @challongeより
○配信アーカイブhttps://t.co/4mPAXrQXpa
2022年5月5日 追記 篝火#7(裏方)で使用されていました。
2022年5月28日 追記 「BraceBracket-1.0.4-beta」の内容を「BraceBracket-1.1-beta」に対応したものに差し替えました。
