Quizzool
管理者・参加者・会場表示をリアルタイムにつなぎ、ブラウザだけでクイズ大会を開催できるイベントプラットフォーム。
OVERVIEW
出題、回答、正解発表、ランキングまでを複数端末で共有し、その場にいる人が手軽に参加できるクイズイベントを成立させる。
ORIGIN
発端
クイズ大会には、問題を用意する人、進行する人、回答する参加者、全員が見る会場画面という複数の役割があります。これらを専用機材ではなく、それぞれのブラウザから利用できるひとつのサービスとしてまとめました。
IDEAL EXPERIENCE
目指した体験
主催者がイベントと問題を作成し、参加者は手元のスマートフォンから回答する。会場では問題や正解、ランキングがテレビ番組のように切り替わる。インストール不要のWebアプリだけで、この一連のクイズイベントを開催できる状態を目指しました。
STRUCTURE
役割ごとに画面を分離
- 管理者画面：イベント作成、問題編集、出題進行、参加者・回答・ランキングの管理
- 参加者画面：イベントへの参加と、手元の端末からの回答
- 会場画面：問題、回答数、正解、解説、ランキング、個人成績の表示
参加者はGoogleまたはTwitterアカウントのほか、サインインせずに参加できる構成としました。管理者は問題文、4択の選択肢、正解、解説、問題画像を登録し、イベント中は各画面の状態を一括して切り替えます。
IMPLEMENTATION
実装
Vue.jsで画面を構築し、Vue Routerで役割別の画面を分離、Vuexで状態を管理しました。Firebaseを利用してイベントルーム、出題状態、参加者、回答、ランキングを端末間で同期しています。
進行状態は、待機、出題、回答受付、正解発表、ランキング表示、個人成績通知などに分け、管理者の操作に応じて参加者画面と会場画面が同時に切り替わる構成です。
OPERATION
公開と運用状況
個人運営の無料サービスとしてFirebase Hostingへ公開し、β版として提供しました。現在はサービス本体を停止しており、ランディングページのみ当時の紹介内容を残しています。ランディングページでは、忘年会、結婚式の二次会、オンライン飲み会、習熟度チェックテストなどでの利用を想定していました。
LEARNING
得られたこと
複数人が同じ場で使うシステムでは、機能をひとつの操作画面へ集めるより、主催者、参加者、会場という役割ごとに分離し、共有する状態だけをリアルタイムに同期する方が体験を単純にできます。後の参加型イベントコンテンツにもつながる、役割分担とリアルタイム設計の実践になりました。
FACTS
