Web App2024

Celeritas - Sports Event Web Manager

学校のスポーツ祭運営の課題を解決する総合Webシステム。リアルタイムスコア更新、スケジュール管理、トーナメント表示をFirebase Realtime Databaseで実現。生徒会と一般生徒の双方にメリットを提供。

React v18TypeScriptMUI MaterialFirebase Realtime DatabaseFirebase Authenticationg-loot/react-tournament-brackets
Celeritas - Sports Event Web Manager

Celeritas とは

Sports Event Web Manager は、学校・企業・地域コミュニティのスポーツイベント運営を、準備から当日進行、記録出力まで一気通貫で扱うためのWebアプリケーションです。

目的はシンプルで、運営の現場で起こる以下をなくすことでした。

  • 情報更新の遅延
  • 紙と口頭連絡に依存した運用
  • 担当者だけが状況を把握している状態
  • 進行変更時の伝達ミス

Celeritas - Dashboard

管理画面のダッシュボード。イベント全体の状態を俯瞰しながら編集作業に入れます。


主な機能

イベント管理

  • イベントの作成・編集・削除(日程、場所、説明、予備日)
  • アクティブイベントの切り替え
  • グリッド表示、スケジュール表示、タイムライン表示
  • 役割ごとの担当者管理
  • 管理者と一般閲覧者の権限分離

競技管理

  • トーナメント形式(3位決定戦、敗者復活のオプション)
  • 総当たり形式(得点ルールのカスタマイズ)
  • リーグ形式(グループステージ + プレーオフ)
  • ランキング形式(独自基準の順位付け)
  • 競技ごとのルール・マニュアル記録
  • 競技単位での担当者割り当て

参加者・チーム管理

  • 学年・クラス単位の名簿管理
  • チーム・選手登録
  • チームカラー設定
  • 名簿データからのチーム自動生成

試合進行・スケジュール管理

  • 複数コート同時進行の管理
  • 試合枠、休憩枠、昼休み枠の管理
  • 準備・片付け時間の取り込み
  • 試合数と利用可能時間に基づく時間配分
  • イベント全体タイムライン表示

スコアリング・結果管理

  • リアルタイムスコア更新
  • 試合状態(予定 / 進行中 / 完了)の管理
  • 自動順位計算(勝ち点、得失点差)
  • 3位決定戦の処理
  • スコア変更履歴の管理

Celeritas - Timeline

複数競技と複数コートの進行を、時間軸で追えるタイムライン表示。


運営向け機能

  • 集中管理ダッシュボード
  • スコア入力・修正
  • バックアップパネル
  • ヘルプページ内蔵
  • Firebase Authentication による認証
  • Excelエクスポート(公式記録向け)

管理画面の機能は「当日使い切れること」を優先し、細かい設定より操作負荷の低さを重視しています。

Celeritas - Operations

運営向け編集画面。試合情報の更新や進行管理を短い動線で実行できます。


観戦側(生徒側)体験

  • 全生徒向けの閲覧導線
  • 試合の進行状況をリアルタイムで確認
  • 遅延や変更の反映を待たずに把握
  • プレーオフ進出状況を視覚的に追跡

「暑い中いちいち試合会場まで見に行く必要がある」という不便を減らし、どこで何が進んでいるかを画面上で判断できる設計にしています。

Celeritas - Tournament

トーナメント表示。勝ち上がりと進行状況をひと目で確認できます。


技術スタック

  • React 18
  • TypeScript
  • Material UI
  • Firebase Realtime Database
  • Firebase Authentication
  • Framer Motion
  • i18next / react-i18next
  • ExcelJS
  • @g-loot/react-tournament-brackets

実装スコープ

リポジトリには、以下の実装レイヤーを含みます。

  • 管理系コンポーネント群
  • スコアボード・タイムライン・競技詳細画面
  • 認証 / テーマ / DB連携のContextとHook
  • スケジュール生成ユーティリティ
  • 形式別のエクスポート実装(トーナメント、リーグ、ランキング等)
  • 多言語ロケール管理(ja / en / fr / de / zh)

本番運用での成果

  • 想定ピーク約150同時接続で運用
  • 本番運用時の重大インシデントなし
  • 手作業ベースの集計・連絡負荷を削減
  • 運営側と閲覧側の情報格差を縮小

Link