Tweet
Tweet

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

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