Slide 1
Slide 1 text
結婚式余興用に
クイズアプリを作ってみた話
川俣 涼
@kawamataRyo
Slide 2
Slide 2 text
Unit-4
Java, Kotlin, Vue.js
川俣 涼 @kawamataRyo
Slide 3
Slide 3 text
早速ですが
Slide 4
Slide 4 text
まだ、結婚式の余興で
消耗していますか？
Slide 5
Slide 5 text
時代は
Vue.js + Firebase
ですよ。
Slide 6
Slide 6 text
[FYI]
Slide 7
Slide 7 text
前職の余興の鉄板ネタは”愛の消火活動”
出動指令で始まり、小ネタを入れつつ、
会場を走り回り、最終的に、
「隊長！!二人の愛の炎は
消火出来ません！！」
で消火失敗。新郎新婦を煽り終わる。
Slide 8
Slide 8 text
今日話すことは？
Slide 9
Slide 9 text
結婚式の余興用に
作ったWEBアプリの紹介
+
使って見た結果
Slide 10
Slide 10 text
どんなアプリ？
Slide 11
Slide 11 text
新婦
参列者
管理者
スクリーン
スマホ
スマホ
バックエンド
フロント
問題・解答
問題・解答
遷移の制御
Slide 12
Slide 12 text
なぜクイズアプリを？
Slide 13
Slide 13 text
・集まって練習が必要ない
・大学時代の新郎の魅力を伝えられる
・新婦・参列者皆に楽しんでもらえる
・Vue.jsとFirebaseの勉強になる
Slide 14
Slide 14 text
工夫した点は？
Slide 15
Slide 15 text
・Webアプリで参加を容易に
=> ダウンロード不要、事前にQRコードを共有
・新婦だけ使える特別アイテムを追加
=> クイズミリオネアを参考に。
・遷移制御で同期的にクイズを実施
=> Firestoreでリアルタイムに制御
Slide 16
Slide 16 text
当日配布した
QRコード入りの案内
（開始前に事前にテーブルごとに配布）
Slide 17
Slide 17 text
新婦だけが使える
特別アイテム
（参列者回答後、新婦が回答）
2択に変更
会場の回答状況
が見れる
新郎に電話
Slide 18
Slide 18 text
実際の画面は？
Slide 19
Slide 19 text
DEMO
Slide 20
Slide 20 text
結果は？
Slide 21
Slide 21 text
思わぬ仕様変更
失敗
トラブルの連続
（会場の盛り上がりは上々）
Slide 22
Slide 22 text
トラブル1
突然の仕様変更
Slide 23
Slide 23 text
ここ音楽追加や！！
集計分かりにくいわ
無理。。
挙式開始30分前に
追加機能実装
Slide 24
Slide 24 text
トラブル2
ネットワーク問題
Slide 25
Slide 25 text
終わらない集計中
Slide 26
Slide 26 text
トラブル3
まさかの不正（ハック）
Slide 27
Slide 27 text
「プラウザバック」で
リトライ可能
最高得点が
170点に
（1問20点、全5問）
Slide 28
Slide 28 text
まとめ
Slide 29
Slide 29 text
結婚式で余興アプリを
作るときの注意事項!!!
Slide 30
Slide 30 text
・打ち合わせは念入りに
・会場のネットワーク環境に注意
・不正利用対策を忘れずに
・商品付けると人間性出るのであかん
Slide 31
Slide 31 text
これで
完璧な余興が行えるはず