How to Use BraceBracket

BraceBracket（ブレースブラケット）は、アプリケーションをインストールすることなくブラウザ上でスコアボードを作成・URLを発行し、スコアを編集できます。さらに、編集画面を共有し、YoutubeやTwitchのライブ配信におけるモデレーターといった外部スタッフなどリモート編集を委託することなども可能です。

スコア編集の例

BraceBracketの編集画面の共有によって、以下のようなさまざまな形態でスコアの更新が可能になります。

一般的な、オフ会場で配信担当者がスコア編集と配信を担当する形式

一般的な配信担当者がスコアの編集も担当する形式です。BraceBracketはインターネットを通して更新しますが、ラグはほぼありません。

オフ会場で配信担当者とスコア編集担当者を分ける形式

配信担当者とスコア編集担当者を分ける形式です。URLを共有することで、PCだけでなくタブレットやスマートフォンでもスコアの編集が可能になります。

オンライン大会や配信の企画などで、配信者とは別に視聴者であるモデレーターがスコアを編集する形式

大会を視聴しているモデレーターにURLを共有することで、オンライン大会や配信の企画などで配信者は配信に集中し、スコア編集を任せることが可能です。

オフ会場で配信担当者とスコア編集担当者を分ける形式

編集内容は常に同期されるので、配信担当者がスコアを編集しつつ、間違いや遅れがあればモデレーターがスコアを修正する、といった使い方もできます。

お問い合わせ

分からないことがあれば、Helpを参照するか私たちのDiscordコミュニティまでお気軽にお問い合わせください。

スコアボードを作成する

まずはページ右上のスコアボードを作成するを押してみましょう。すると設定画面が開きます。設定画面で行う設定は後でも変更できます。

レイアウトとカラーを選択する

使用したいレイアウトとカラーを選択してください。現状は4種類のレイアウトがあり、それぞれいくつかのカラーバリエーションがあります。

4種類のレイアウトとそれぞれのカラーバリエーションを選択する

大会名を設定する

大会名を入力してください。Dual Layoutで大会名が中央に表示されるようになります（大会ロゴを設定している場合は表示されず、また他のレイアウトでも表示されません）。

カメラとTwitterIDの表示設定

「カメラ及び選手のTwitter IDを表示する」 にチェックを入れると、スコアボードのレイアウトにプレイヤーカメラ配置用のガイドとTwitter IDの表示ボックスが追加され、スコアボードの編集画面にTwitter IDの編集欄が追加されます。プレイヤーカメラをガイドに対して正確に配置したい時は、こちらを参照してください。

大会及びスポンサーのロゴを表示する

「大会及びスポンサーのロゴを設定する」 にチェックを入れると、ロゴ画像をスコアボードの中央に表示することができます（表示位置はレイアウトごとに固定です）。ロゴはJPG, PNG, GIF, SVG形式でアップロードできます。（背景が透明なPNGもしくはSVG形式でアップロードすることをお勧めします。）また、ロゴは複数個登録することができます。その場合は5秒ごとに表示が切り替わります。さらに、視認性を向上するためドロップシャドウをつけることが可能です。

トーナメント管理ツールと連携する

スコアボードをトーナメント管理ツール（現在はstart.ggのみ対応）と連携することで、スコアを編集する際にプレイヤー名やラウンドなどをstart.ggから取得することができます。下の画像のような、情報を拾いたいトーナメントのページURLを入力してください。URLは https://www.start.gg/tournament/トーナメント名/event/イベント名/brackets/0000000/0000000 のようになります。

start.ggと連携する際は、ブラケットが出ている画面のURLを入力する

対戦カードツイート機能のテンプレートを作成する

「対戦カードをツイートする」 にチェックを入れると、スコアに入力している試合情報を簡単にツイートすることができます。例えば下図左のようにテンプレートを作成すると、下図右のようにツイートできます。

テンプレートを作ることで試合中の情報を手軽にツイートできる

以上の設定項目を設定した後、 「スコアボードを作成」 ボタンを押してください。トーナメントのダッシュボードに移行します。

ダッシュボード

スコアボードを作成するとダッシュボードに移ります。ダッシュボードでは、

  1. スコアの編集画面を開く
  2. スコアボードの設定の編集
  3. OBSなどの配信ソフトに配置するURLの取得

ができます。

ダッシュボード上部では、スコアの編集画面への移動、編集画面の共有、設定の変更ができる

スコアの編集と共有

「編集画面を開く」 ボタンを選択すると別ウインドウが開き、スコアボードの内容を編集できます。（詳細はこちら） 編集画面共有URL を共有することで、別のデバイスからスコアボードを編集することができます。ただし、パスワードをかけることなどはできません。そのため、URLを知っている人は誰でもスコアを編集できるので流出にはご注意ください。また、ダッシュボードもURLを共有することで他のデバイスで開くことが可能です。

設定を変更

「設定を変更」 ボタンを選択すると「スコアボードを作成」の時と同様のページに移動し、スコアボードのデザインや大会のロゴ画像などの設定を変更できます。

配信ソフトに配置するURLをコピーする

ダッシュボードの 「配信用ブラウザソースURL」 から各レイアウトの配置用URLをコピーできます。

配信用ブラウザソースURLから配信ソフトに配置する各レイアウトのURLをダウンロードできる

配信ソフトにスコアボードを配置する

OBSに配置する例。「ブラウザ」のソースを追加し、URLをペーストし、幅を1920, 高さを1080に設定する

配信ソフトにブラウザソースを追加

配信用ブラウザソースURLを確認できたら、それらを配信ソフトに配置していきます。ここでは、例としてOBS Studioにスコアボードを配置します。

  1. OBSで 「ブラウザ」 ソースを追加する
  2. 先ほどコピーした配信用ブラウザソースURLをペースト
  3. 幅を1920, 1080に設定

これだけで設定は完了です！スコアボードがうまく読み込まれないときは、ソースを再読み込みしてみるかヘルプをご覧ください。

配信ソフトでのシーン設定例

BraceBracketでは、4種類のレイアウトが用意されています。

  1. Score Layout: 試合中に表示するスコアボード
  2. Interval Layout: 試合間に現在の試合の情報および次の試合の情報を表示
  3. MC Layout: 実況者やMCの情報を表示
  4. Top8 Layout: start.ggと連携し、Top8の情報を表示

大会の規模や配信スタッフの人員に応じて、以下の画像のように設定することを想定しています。

配信の規模に合わせてさまざまなレイアウトが可能

MC Layout及びTop8 LayoutはInterval Layoutと同時に表示することが可能です。あらかじめ上のようなシーンを配信ソフトで作成し、切り替えて使用することをお勧めいたします。

スコアを編集する

ダッシュボードの 編集画面を開く を押すと新しく編集画面が立ち上がり、その画面からスコアを編集することができます。

Scoreの編集画面では、ラウンドや選手の情報を手動で入力できるほか、start.ggから取得することもできます

編集画面: Score

  1. 編集内容をスコアボードに適用します。なお、編集してまだ適用されていない項目は薄いベージュのハイライトがつきます（この画像のRound部分のようになります）。
  2. 編集した内容を取り消し、前回適用した内容にリセットします。
  3. ラウンドの情報を入力できます。下のボタンをクリックすることで楽に入力ができますが、手入力も可能です。基本的に英文での入力を推奨しています。Set Infoも同様です。
  4. Round及びSet Infoを大文字で表記します。
  5. 1Pの情報です。上からチーム名、プレイヤー名、TwitterIDとなっています。なお、設定で「カメラ及び選手のTwitterIDを表示する」のチェックをしていない場合、TwitterIDの入力欄は表示されません。
  6. 2Pの情報です。内容は1Pと同様です。
  7. スコアの入力欄です。手入力のほか、+1及び-1ボタンでスコアの増減ができます。
  8. チーム名、プレイヤー名、TwitterID, スコアをリセットします。
  9. 1Pと2Pの情報を入れ替えます。
  10. スコアのみをリセットし、0にします。
  11. start.ggからStream Queueに入っている試合と現在進行中の試合を読み込みます。連携していない場合はこの表は表示されません。
  12. 進行中の試合です。クリックするとRound, チーム名、プレイヤー名に入力されます。
  13. 表をプレイヤー名やチーム名などで検索できます。
  14. 試合リストをstart.ggに合わせて自動で更新します。
  15. プレイヤーのデータなどを常にStream Queueの先頭のものに更新します。Stream Queueを正確に活用できる場合のみ使用してください。

Intervalの編集画面では、現在の試合状況と次の試合の情報を出し分けることができます

編集画面: Interval

  1. 編集内容をスコアボードに適用します。なお、編集してまだ適用されていない項目は薄いベージュのハイライトがつきます。
  2. 編集した内容を取り消し、前回適用した内容にリセットします。
  3. 編集画面下部の情報ではなく、Scoreのタブに入力されている現在の試合状況を表示します(Now表記)。この機能は、試合のセット間にプレイヤーやMCを映す時に便利です。
  4. Score同様、RoundとSet Infoをボタンと手入力で入力できます。 . ラウンドの情報を入力できます。下のボタンをクリックすることで楽に入力ができますが、手入力も可能です。基本的に英文での入力を推奨しています。Set Infoも同様です。
  5. Round及びSet Infoを大文字で表記します。
  6. 1Pの情報です。上からチーム名、プレイヤー名となっています。
  7. 2Pの情報です。内容は1Pと同様です。
  8. チーム名とプレイヤー名をリセットします。
  9. 1Pと2Pの情報を入れ替えます。
  10. start.ggからStream Queueに入っている試合と現在進行中の試合を読み込みます。連携していない場合はこの表は表示されません。
  11. 進行中の試合です。クリックするとRound, チーム名、プレイヤー名に入力されます。
  12. 表をプレイヤー名やチーム名などで検索できます。
  13. 試合リストをstart.ggに合わせて自動で更新します。
  14. プレイヤーのデータなどを常にStream Queueの次に設定されている試合のものに更新します。Stream Queueを正確に活用できる場合のみ使用してください。

MCの編集画面では、4人までMCの情報を入力できます

編集画面: MC

  1. 編集内容をスコアボードに適用します。なお、編集してまだ適用されていない項目は薄いベージュのハイライトがつきます。
  2. 編集した内容を取り消し、前回適用した内容にリセットします。
  3. MCの所属チームを入力できます（必須項目ではありません）。
  4. MCの名前を入力できます。
  5. MCのTwitterIDを入力できます。入力しなかった場合でも、枠が表示されるのでご注意ください。

MCの情報は必ずNo.1から順に入力してください。No.2だけが入力されている場合などは表示されません。また、何も入力されていない場合も何も表示されないのでご注意ください。

Top8の情報はstart.ggから取得して表示します

編集画面: Top8

  1. Top8の情報をstart.ggから取得し、適用します。
  2. チェックを入れると、Top8の情報を常にstart.ggから読み込み自動で適用します。

Top8の機能はstart.ggと連携している場合のみ使用できます。

スコアの編集内容は「適用する」をクリックするたび他の編集者とも同期されます。一般的なオフ大会だけでなく、窓対抗戦などのオンライン大会や身内企画などで幅広く使えますが、URLの流出にはご注意ください。

カスタマイズ

現在、Web版BraceBracketではスコアボードのデザインのカスタマイズは行えません（開発中）。しかし、BraceBracketはオープンソースソフトウェアとしてGithubにて公開しておりますので、そちらからクローンし、カスタマイズしていただくことが可能です。また、大会固有のデザインに変更したい場合は、Discordにて開発者までお問い合わせいただければ、デザインから専用の実装までいたします。新しくデザインを制作する場合、Github内の public>image>design_sample.ai を用いると文字の位置を把握しながらデザインが行えます。

旧バージョンのBraceBracketについて

jsonファイルおよびGoogle Spreadsheetを用いるバージョンのBraceBracketはGihutbのReleasesよりダウンロードできます。