scoreboard

eXtremeなどSplathonのオンラインイベントで使うスコアボードを表示するブラウザアプリ

全体構成

• GitHubPagesでホストされるビューワー（フロントエンド）
  • https://splathon.github.io/scoreboard/
  • /src配下にあるものをビルドすると、/docs配下に生成されます
• GoogleDocsで管理されるデータ入力画面（バックエンド）
  • 読み取り専用で公開されたスプレッドシートを、CSVフォーマットの共有URLで取得
  • 書き込み権限は別途、任意で設定することで第三者からは変更されません
  • そのためスプレッドシートの設定に注意してください

フロントエンドの構成（と、使い方）

• 2つの画面（機能）を提供します
  • main画面とpreview画面
  • 2つで1セットのため、片方だけの使用は想定していません
• main画面
  • 例: https://splathon.github.io/scoreboard/?ev=extreme-union-match-1
  • OBSなどで直接表示され、ユーザー入力を期待しない画面
  • 初回表示時は何も表示されません
  • preview画面からデータを受け取る専用の画面だからです
• preview画面
  • 例: https://splathon.github.io/scoreboard/?ev=extreme-union-match-1&preview
  • スプレッドシートの入力内容を文字通りプレビューする画面
  • スプレッドシートの内容を、定期的に取得し自動で表示を更新します
  • 「データ反映」ボタンを押すと、その表示内容がmain画面にSYNCされます
    • preview画面であることを表す表示はもちろんSYNCされません
  • main画面との差分は、このUIがあるかどうかだけです
• 各イベントごとにソースコード、URLを変えています
  • スコアボードのレイアウトがイベントごとに異なることが想定されるため
  • データを取得する先のスプレッドシートのURLは、ソースコードの中に記載