Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vue.js + Firebaseで結婚式余興用のクイズアプリを作った話 / wedding quize on vue firebase
ryo
December 14, 2018
0
3.1k
Vue.js + Firebaseで結婚式余興用のクイズアプリを作った話 / wedding quize on vue firebase
2018TeckTalk発表資料
ryo
December 14, 2018
Tweet
Share
More Decks by ryo
See All by ryo
suppress-ts-errors を使って TypeScriptの型チェックを漸進的に強化する / Introducing-suppress-ts-errors
kawamataryo
2
120
Python の dotted path をコピーするVS Code 拡張を作ってみた / I made a copy python path.
kawamataryo
0
82
OSS活動ことはじめ / begin oss activities
kawamataryo
7
970
閲覧履歴、ブックマーク、タブを 横断的に検索できる Chrome拡張を作った話 / introduction to chikamichi
kawamataryo
3
210
esa+VuePressでJamstackなドキュメントサイトを作る / Build Jamstack site with VuePress & esa
kawamataryo
2
1.6k
Vue.js 状態管理の選択肢 - そのVuex本当に必要ですか - / Vue.js State Management Options
kawamataryo
7
3.4k
Firebase + Bolt で もくもく会用のSlack botを作った話 / Build slack bot with firebase + Bolt
kawamataryo
2
5.3k
Ref vs Reactive Vue3 Composition APIのリアクティブ関数の探究 / ref vs reactive Vue Composition API Deep in
kawamataryo
12
13k
僕とQiitaと、ときどきLT 〜アウトプット駆動でスキルを磨く〜
kawamataryo
0
320
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Designing for Performance
lara
597
63k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
24
15k
Teambox: Starting and Learning
jrom
123
7.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Producing Creativity
orderedlist
PRO
334
37k
Design by the Numbers
sachag
271
17k
Web development in the modern age
philhawksworth
197
9.3k
Navigating Team Friction
lara
175
11k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
The Pragmatic Product Professional
lauravandoore
19
3k
Transcript
結婚式余興用に クイズアプリを作ってみた話 川俣 涼 @kawamataRyo
Unit-4 Java, Kotlin, Vue.js 川俣 涼 @kawamataRyo
早速ですが
まだ、結婚式の余興で 消耗していますか?
時代は Vue.js + Firebase ですよ。
[FYI]
前職の余興の鉄板ネタは”愛の消火活動” 出動指令で始まり、小ネタを入れつつ、 会場を走り回り、最終的に、 「隊長!!二人の愛の炎は 消火出来ません!!」 で消火失敗。新郎新婦を煽り終わる。
今日話すことは?
結婚式の余興用に 作ったWEBアプリの紹介 + 使って見た結果
どんなアプリ?
新婦 参列者 管理者 スクリーン スマホ スマホ バックエンド フロント 問題・解答 問題・解答
遷移の制御
なぜクイズアプリを?
・集まって練習が必要ない ・大学時代の新郎の魅力を伝えられる ・新婦・参列者皆に楽しんでもらえる ・Vue.jsとFirebaseの勉強になる
工夫した点は?
・Webアプリで参加を容易に => ダウンロード不要、事前にQRコードを共有 ・新婦だけ使える特別アイテムを追加 => クイズミリオネアを参考に。 ・遷移制御で同期的にクイズを実施 => Firestoreでリアルタイムに制御
当日配布した QRコード入りの案内 (開始前に事前にテーブルごとに配布)
新婦だけが使える 特別アイテム (参列者回答後、新婦が回答) 2択に変更 会場の回答状況 が見れる 新郎に電話
実際の画面は?
DEMO
結果は?
思わぬ仕様変更 失敗 トラブルの連続 (会場の盛り上がりは上々)
トラブル1 突然の仕様変更
ここ音楽追加や!! 集計分かりにくいわ 無理。。 挙式開始30分前に 追加機能実装
トラブル2 ネットワーク問題
終わらない集計中
トラブル3 まさかの不正(ハック)
「プラウザバック」で リトライ可能 最高得点が 170点に (1問20点、全5問)
まとめ
結婚式で余興アプリを 作るときの注意事項!!!
・打ち合わせは念入りに ・会場のネットワーク環境に注意 ・不正利用対策を忘れずに ・商品付けると人間性出るのであかん
これで 完璧な余興が行えるはず