【Firebase+Vue.js】大学の謝恩会の余興でリアルタイムアンケート・クイズイベントを企画した話
こんにちは、sixdです。
この記事では、大学の学科の謝恩会の余興でリアルタイムアンケート・クイズイベント「FMS感謝祭」を行った話をします。
※実はこの記事は4月頭に書いてました。雰囲気がわかるダイジェスト動画を作っていたのですが、システムのBGMが著作権的に問題になりそうだったので、公開を保留していました。(会場での楽曲利用は、会場が利用料を払っているので問題ありません。) 最近時間が取れてGIFにできたので公開します。記事の熱量は当時のままです!!
まず、イベントの様子を御覧ください。
こんな感じでめっちゃ盛り上がりました。
「FMS感謝祭」の"FMS"とは 明治大学 総合数理学部 先端メディアサイエンス (Frontier Media Science) 学科のことです。私達が3期生で、比較的新しい学科です。Twitterを見ると雰囲気がわかると思います。
企画について
もともと一緒に開発したRyo Takeiが、謝恩会の幹事をしており、仲がいいこともあり、12月頃から謝恩会の準備をちょっぴり手伝うようになりました。
そこで、謝恩会の余興で何かおもしろいことができないかと相談を受けていました。余興でよくあるものといえば、ビンゴ大会やスライドショーなどだと思いますが、FMSの謝恩会なので技術を使っていきたいと2人で話していました。
私は、誰もが参加できるような手軽さがほしいなと思っていたので個人のスマホで参加できるものがいいと考えていました。
卒業研究の実装でFirebase と Vue.js を使っていたので、これらを使えば簡単に実装できそうだなと目星もついていました。(ちなみにmetaBoxといって、ユーザが使い方を自由に定義して使えるUIレスなIoT Boxを卒業研究として研究していました。)
"Firebase"と"Vue.js"をクエリに入れてググるとそれっぽいものがたくさん出てきました。
Ryo Takeiにこんな感じのことをしたいと記事を見せたところ、
良いね〜！
めっちゃやりたい！！
と食いついてきたので、この方向で進めることにしました。
色々話し合った結果、以下の理由からリアルタイムアンケート・クイズイベントを行うことにしました。システム的には3つ目の記事と結構近いです。
多くの人に参加してもらいたい
▶ Webページを開くだけで参加できるアンケート・クイズ形式に
一体感、参加している感を出したい
▶ リアルタイム性重視のイベントに
盛り上げたい
▶ クイズで正解数を競わせる
▶ アンケートでみんなの思い出を可視化する
実装について
このシステムは、大きく分けてフロントとプロジェクタ用のビューに別れます。
Webができる私がフロントとFirebase、インタラクティブな演出が得意なRyo Takeiがプロジェクタ用のビューを担当しました。
システムの要件
● アンケートとクイズに対応(クイズの場合は正解 or 不正解の集計を行う)
● アンケート・クイズは事前に登録
● 管理者画面で問題の開始と終了を行う
● プロジェクタで問題の出題、解答時間終了のカウントダウン、集計、解答発表を写す
● 管理者画面から集計データをWebSocketでスクリーン用ビューに送信
● 選択肢の数は2～6個
● 最後にクイズの正解者上位の発表
● フロントはSPA(ページ遷移なし、解答時間になると自動的に画面が変わる)
● フロントではステート管理をしない (途中でカメラ起動、リロード等してもOK)
● 初回アクセス時にFirebase AuthでGoogle認証 + ニックネーム登録
● 回答漏れの許容
プロジェクタ用のビューは途中で画像や動画を挟む演出のためopenFrameworksで製作したようです。Firebase Realtime DatabaseにアクセスするのがコストだったそうなのでWebSocketで送信することにしました。この辺はあまり良くないですね。
フロントエンド (ユーザ画面) の実装
私の担当したところを解説していきます。
ユーザ画面と管理者画面は先述の通り、Firebase と Vue.js を用いました。
ユーザが初めてアクセスするとFirebase Authenticationにリダイレクトされ、Googleログインでの認証を促されます。これは、ユーザ管理のために必要なのですが、Googleログインでの認証を若干嫌がる人もいました。こういう人もいると思っていたので、SNS連携などをせずにユーザを識別できる匿名認証に後ほど変更としていましたが、時間がなく変更できませんでした。結果的にはGoogle認証を理由に参加しなかった人はいなかったと思います。すごい。
次にニックネームの入力画面が現れます。Firebase Realtime Databaseを読んで、ニックネームが登録されていないと入力画面が現れるようになっています。
名前を登録すると「イベント開始までお待ち下さい!」と表示されます
管理者画面でイベント開始ボタンを押すとこんな感じで質問文(問題文)と選択肢が表示されます。
SPA(シングルページアプリケーション)なので、ページ遷移はしておらず、Firebase Realtime Database に格納している state の値に合わせて、画面を変更しています。具体的には、Firebase Realtime Database はデータベースが更新されるとイベントを発火させることができるので、そのイベントに合わせてVue.jsがDOMをリアクティブに更新しています。
全ての端末がデータベースの state の値を参照しているので、リアルタイムにアンケートやクイズができる訳です。もちろん途中でカメラなどのアプリを開いたり、リロードしたりしても問題なく動きます。
ちなみに、選択すると
ボタンがdisabledになったり、
問題と問題の間には
このような画面になったりと、UXもちょっと意識して作りました。
スタティックなページだったのでFirebase Hostingでホスティングしました。
話が逸れますが、Firebase Hostingすごいですね。Firebase-CLIにログインして
firebase deployと打って、ちょちょっと Yes / No を答えるだけでデプロイできちゃうんですよ！手軽すぎる！
そもそも Firebase の他のサービスもすごいですよね。JavaScriptさえ書ければ、サーバサイドを考えずに学生でもこんなシステムが作れてしまうんですから。
フロントエンド (管理者画面) の実装
管理者画面はイベント実施時に問題の開始と終了を操作する PLAY MODE とアンケート・クイズの編集ができる EDIT MODE を作りました。
自分しか見ない割にそこそこちゃんと作ってしまいました。
PLAY MODE
「現在 第 1 問 を出題中です。 締め切りますか? 『締め切る』」の部分がデータベースの state の値によって変わるようになっています。また、「締め切る」ボタンを押すことで データベースの state を書き換えています。
下はスクリーン用ビューの連携部分になっています。
EDIT MODE
間に合わせな感じですが、
ラジオボタン(CSSが死んでる)を選択するとクイズに、なにも選択しないとアンケートという扱いになります。
スクリーン用ビューの実装と作問
この章はRyo Takeiが書いています。
こんにちは、Ryo Takeiです。普段は映像に関するプログラムを書いたりしていて、最近社会人になりました。
私が担当した部分は、スクリーンに表示する画面の作成がメインとなります。sixdから送られてくる解答情報に対し、openFrameworksを用いてアンケートなら円グラフ、クイズなら回答人数と正解の表示を行いました。こだわりは、問題に関する背景画像を用意し、ブラーを適用したところでしょうか。
また、問題も作成しました。学科の謝恩会ということで、大学や学科に関するクイズを出すほうが盛り上がるだろうと考えました。
主に三つのパターンを用意しました。
1つ目に、単純なクイズ。
2つ目に、誰もが一度は利用したであろう施設や、一度は見聞きしたことのある大学関連の問題。食堂のメニューの金額や、校歌の歌詞などを出題しました。
3つ目に、誰も知らないし、知ったとして誰も得しない、問題です。先生の飼っている犬の名前や、先生を年齢順に並び替える(1年差)、大学マスコットのゆるきゃらランキングなどを出題しました。
これの何が面白いかって、必ず選択肢にあり得ないだろう選択肢を追加しておくことです。すると、ネタに走りたい人たちは、あり得ない選択肢を押すことで、ウケを狙いにいくわけです。あり得ない選択肢の解答人数が、全体の1/4を占めた時は面白かったですね。
長々と書きましたが、学科に関する問題を出すのは大変でした。学科で何か共通のことをしたといえば、授業くらいであり、問題のネタがあまりないわけです。いや〜疲れた。
最終問題はオチとして、面白くはない問題をセレクトしました。個人的には気に入ってるオチです。
最後に結果発表しました。時間なくてかなり雑になったので、ここは改善していきたいですね。今回はoFを使いましたが、画面出力もブラウザで動いた方が、より手軽なシステムになると思います。
本番
余興が始まるときにユーザ用のページURLをQRコードにしてスクリーンに表示しました。簡単にアクセスできます。
本番は始めにかいたとおりとても盛り上がりました。
参加者は61人中56人でした。ログを確認してみると私と幹事を含めた3人とFirebaseの認証後に何も表示されなくなってしまうユーザ、バッテリー切れユーザの2人を除くと、全員参加していました！
「多くの人に参加してもらう」「一体感を演出する」「盛り上がる」という企画考案時の目標がクリアできていると思います。良かった。
最後に
実はこのシステム、開発時間もそれほど取れず、本番の4日前くらいから本腰を入れて開発しはじめました。また、テストしようにも大勢の人を集めることもできなかったので、結構ぶっつけ本番でした。
それでも本番では問題なく動いてくれて、めっちゃ盛り上がったので個人的に大成功でした。
今回、謝恩会でFMS感謝祭をやってよかったです。多くの先生方に良かったと声を頂いたり、同期にも大変楽しんでもらえました。
FMS学科では、1, 2年生のときに個人もしくはグループでプログラムを制作して学科全員の前で発表する機会が4回あります。どの発表会も「こんなすごいもの作ったぞ！」と言わんばかりのテンション高めのワイワイした発表会です。今回もテンション高めで自分たちで制作したプログラムを学科内で発表する場面だったので、内心感慨深いものがありました。というか、「最後の発表会だ！楽しませてやる！」とかちょっと考えていました。
一緒に開発したRyo Takeiとは、これまで3本の映像と3本のVJソフトを共に製作してきた仲だったので、彼が社会人になる前に最後に共同開発できて良かったと思います。
最後まで読んでいただきありがとうございました。
もしよかったら フォロー をお願いします！
この記事が気に入ったらサポートをしてみませんか？