【React】第一回 育英祭・競技大会の運営をサポートするリアルタイム統合管理システム「Manage Flow & Event Lens」の要件定義とアーキテクチャ設計

松元 颯大

作成のきっかけ

サレジオ高専では数百人規模の学生や来場が参加する「育英祭」、一度に何個もの競技が数十単位で開催される「競技大会」があります。これらの大規模なイベントの裏側では、役員たちがトランシーバーとスマートフォンのLINEを片手に会場を走り回り、紙のタイムテーブルを使って情報の共有を行っていました。しかし、こういった従来の管理方法では明確な問題点があります。

  • 情報のタイムラグ　

紙で配られていたタイムテーブルは、急な進行の遅れや気象状況による変更に対応できず、数時間後には意味をなさなくなってしまいます。

  • 情報伝達のボトルネック

「模擬店の混雑状況」や「競技の試合結果」といったリアルタイム性が求められる情報が、トランシーバーの音声やLINEグループのトークによって埋もれてしまい、全員が全体を把握できていませんでした。

  • 来場者体験(UX)の低下

来場者や一般の学生では、「今役員テントで対応してもらえるのかな？」や「さっきの試合はどっちが勝ったの？」といった最新情報を現地まで向かわなければ取得できない状況でした。

これらの問題は先輩による経験やOBの先輩方の力を借りてどうにかカバーできてはいたものの、全員がこれらの問題に対する具体的な解決策を持っていませんでした。そのため、私は「現場の役員が瞬時の情報を共有でき、それを会場のサイネージによって全員に共有する」システムの構築を決意しました。これが、統合管理システム「Manage Flow」とデジタルサイネージシステム「Event Lens」の始まりです。

システムの要件定義

本プロジェクトで構築するシステムでは、システムを「管理者用」と「閲覧者用」の2つのアプリケーションに分割し、イベントに応じた2つのモードを持たせる必要がありました。具体的なアプリケーションとモードは以下の通りです。

アプリケーション1 : 現場の司令塔「Manage Flow」(役員管理用画面)

  • モバイルファーストな設計

会場を回る役員たちは基本個人のスマートフォンを所有しているため、これを有効活用することで導入コストの削減に努めています。また、調理場や本部テントといった学生との関わりが生まれる場所ではタブレットを使用し操作性をあげる必要があります。これらのデバイスがOSなどによる制限を受けない、Webアプリの開発とストレスなく操作できるUIが必要でした。

  • 即時入力と即時反映

模擬店の混雑状況や、試合のスコア入力、全体へのお知らせなどはリアルタイム性と入力のしやすさが求められます。今回構築したシステムでは、Manege Flowに入力された内容がFirebaseを通して、瞬時に同期化される他、後述するEvent Lensとの連携にも使用されます。

  • 権限管理(RBAC)

個人のスマートフォンを用いてシステムを使用する以上、不正なデータ書き換えを防ぐため、ログイン認証と厳密なアクセス制御を行う必要があります。

UIとしてはこんな感じをイメージしています。スマートフォンでの使用を想定しているので、レスポンシブデザインを適応する必要がありそうです。画像はPCにて実行中…

アプリケーション2 : 基本放置の情報網「Event Lens」(来場者・学生向けサイネージ)

  • 完全自動・自立駆動

サイネージを役員たちがいちいち回って情報を書き換えるのは非常に面倒です。そのため、一度起動すれば、管理画面からのデータ書き換えをリアルタイムで検知し、画面を自動更新(リロード不要)し続ける必要があります。

  • 視認性とデザイン性

サイネージは視認性の高さが最重要です。遠くからでも目視できて、洗練されたアニメーションを備えたUIを心がける必要があります。

  • 情報のアグリゲーション

天気や時刻、再生中のBGM情報などのイベントに関する情報はAPIを経由して自動で取得し表示することで、役員たちが手入力する手間を省く必要があります。

UIとしてはこんな感じをイメージしています。Event Lensはサイネージとしての運用がメインのため、モバイルモニターやPC、テレビなどの大型のディスプレイを用いた運用を想定しています。画像は同様にPCにて実行中…。ちなみにQRコードはダミーです。

2つのモード : 「育英祭モード」と「競技大会モード」

育英祭と競技大会では管理するべきデータが全く異なります。そのため二つのモードに分けて、それぞれのイベントに特化した機能を搭載する必要があります。

  • 育英祭モード

各団体に貸す備品や食材の管理、模擬店の混雑状況やタスク管理などの情報をメインに扱います。

  • 競技大会モード

タイムテーブルの進行状況や、リアルタイムの試合結果・スコアボードをメインに扱います。

上記の内容に加えて両方のモードでは、役員のシフトや落とし物などの情報を扱います。それぞれのモードに分けてシステムを構築するのも良いですが、次年度以降の引き継ぎやシステムの使用方法の説明を1からするのは非常に面倒ですよね？そのため、一つのマスターデータベースで管理し、Manage Flowのスイッチ一つでEvent Lensのコンポーネントが動的に切り替わるアーキテクチャが必要です。ちなみに、Event Lensのモード切り替えをわかりやすく図解したものは以下の通りです。

採用した技術スタックと選定理由

先述した内容と現場の課題を最速かつ最も安定した形で解決するために、以下の技術スタックを選定しました。

フロントエンド : React × Tailwind CSS

  • React

複雑な状況を持つUIを構築する上で、コンポーネント指向のReactが最適と考えました。育英祭と競技大会という全く異なる表示モードでも、Reactの条件付きレンダリングによって単一ページ内でシームレスに切り替えることが可能です。

  • Tailwind CSS

UIを高速にイテレーションするため、インラインで直感的にスタイリングできるTailwindを採用しました。今回のシステム構築では、ダークモードや今最もナウいLiquid Glassなどの高度なデザインシステムも、独自の設定を拡張することによって保守性を高く実装することができました。

バックエンド・インフラ : Firebase(Firestore / Auth / Hosting)

  • Cloud Firestore

本システムの心臓です。NoSQLドキュメントデータベースとしての柔軟性とリアルタイム同期(onSnapshot)が標準搭載されいることから採用しました。WebSocketのサーバーを自前で建てることなく、データの変更をクライアントに即座にプッシュアップできることも採用した理由の一つです。

  • Firebase Authentication

役員のログイン管理をセキュアに、かつ用意に実装できるように採用しました。

  • Firebase Hosting

フロントエンドの成果物を高速に配信し、さらに独自ドメインと無料のSSL証明書をシームレスに統合できるインフラとして選定しました。

他にもログファイルの出力としてpdfmake、現在の気象情報の取得のためOpenWeather APIを使用しています。まとめるとこんな仕組みで動きます。

システムアーキテクチャ+データフロー

1, データ入力層(Manage Flow)

役員がスマートフォンからManage Flowにアクセスし、Firebase Authで認証を追加します。その後メインのManage Flow画面が現れ、モードを選択します。例えば試合結果を入力するとFirebaseの該当ドキュメント(例えばsettings/sports_festival)に対してUpdateリクエストが送信されます。

2, データ同期層(Cloud Firestore)

Firestoreはデータを受け取ると同時に、強固なセキュリティルール(のちに記述します)を評価します。権限が確認されデータが書き換わると、そのドキュメントを監視(Subscribe)しているすべてのクライアントに対して変更イベントを発火します。

3, データ表示層(Event Lens)

会場の各所に設置されたディスプレイ(Event Lens)は、ReactのuseEffect内でFirestoreのonSnapshotリスナーを起動し待機しています。変更イベントを受診すると即座にReactのStateが更新され、画面全体をリロードすることなく、必要なコンポーネント(スコアボードやプログレスバー)だけが再レンダリングされます。

この単一のデータソース(Single source of Truth)を中心としたリアルタイムなデータフローを確立したことによって、情報伝達のタイムラグという最大の課題を技術的に克服することができました。

ここまでの流れをもとに、Manage FlowとEvent Lensの仕組みを図解するとこんな感じです。

今後の計画

ということで、今回はアナログなイベント運営をDX化するための要件定義と、それを実現する技術基盤について解説しました。第二回では、システムが実際に使われる「現場」に焦点を当てた内容となります。具体的には「絶対に操作を間違えない」というUI/UX設計を、Tailwind CSSでいかに実装できたのか、そんなフロントエンドの核心に迫ります。お楽しみに！

宣伝

このサイトでは、他にも技術的な取り組みを定期的に更新しております。もしご興味がありましたら、ぜひご覧ください！

より詳細な構築について

今回構築した「Manage Flow」および「Event Lens」の構築にあたり、より詳細な質問に関しましては、ぜひ下記のコメント機能をご利用ください。また、学友会におけるDX化のノウハウについても積極的にお問い合わせいただけますと幸いです。

コメントする

Related Posts

PAGE TOP