Vue.js + Firebaseで結婚式余興用のクイズアプリを作った話 / wedding quize on vue firebase

結婚式余興用にクイズアプリを作ってみた話川俣涼 @kawamataRyo

Unit-4 Java, Kotlin, Vue.js 川俣涼 @kawamataRyo

早速ですが

まだ、結婚式の余興で消耗していますか？

時代は Vue.js + Firebase ですよ。

前職の余興の鉄板ネタは”愛の消火活動” 出動指令で始まり、小ネタを入れつつ、会場を走り回り、最終的に、「隊長！!二人の愛の炎は消火出来ません！！」で消火失敗。新郎新婦を煽り終わる。

今日話すことは？

結婚式の余興用に作ったWEBアプリの紹介 + 使って見た結果

どんなアプリ？

新婦参列者管理者スクリーンスマホスマホバックエンドフロント問題・解答問題・解答
遷移の制御

なぜクイズアプリを？

・集まって練習が必要ない・大学時代の新郎の魅力を伝えられる・新婦・参列者皆に楽しんでもらえる・Vue.jsとFirebaseの勉強になる

工夫した点は？

・Webアプリで参加を容易に => ダウンロード不要、事前にQRコードを共有・新婦だけ使える特別アイテムを追加 => クイズミリオネアを参考に。・遷移制御で同期的にクイズを実施 => Firestoreでリアルタイムに制御

当日配布した QRコード入りの案内（開始前に事前にテーブルごとに配布）

新婦だけが使える特別アイテム（参列者回答後、新婦が回答） 2択に変更会場の回答状況が見れる新郎に電話

実際の画面は？

結果は？

思わぬ仕様変更失敗トラブルの連続（会場の盛り上がりは上々）

トラブル1 突然の仕様変更

ここ音楽追加や！！集計分かりにくいわ無理。。挙式開始30分前に追加機能実装

トラブル2 ネットワーク問題

終わらない集計中

トラブル3 まさかの不正（ハック）

「プラウザバック」でリトライ可能最高得点が 170点に（1問20点、全5問）

まとめ

結婚式で余興アプリを作るときの注意事項!!!

・打ち合わせは念入りに・会場のネットワーク環境に注意・不正利用対策を忘れずに・商品付けると人間性出るのであかん

これで完璧な余興が行えるはず

Vue.js + Firebaseで結婚式余興用のクイズアプリを作った話 / wedding ...