Ubiregi Advent Calendar 2019 の 11日目です
React/Redux + Firebase で結婚式二次会で使う余興用のアプリを使った時の話を書きます
2019年９月20日に結婚式をやった
大宮で挙式しました。
オールスター大感謝祭風のクイズを２次会でやりたい
２次会の余興でオールスター大感謝祭風のクイズゲームをやりたいと思いまして、
- 会場のディスプレイを映して、回答者は手元のスマホでリアルタイムに回答
- 選択肢の画像と文字が表示される
- ランキングが表示される
- なるべく楽な方法で
既存のサービスでそういうのがあればそれを使おうと思ったのですが、検索してみたのですが良さそうなのがなく、
一つだけ、GitHubで自分がやりたいことにちかいものをみつけました。
MITライセンスで公開されていたので、React-Reduxの学習がてらそれを改造しようと思いました。
元のソースコード
https://github.com/kenichirosuzuki/react-firebase-quiz-game
・・・今改めて検索して探してみると、会社の納会用、結婚式の余興用にクイズアプリ作っている記事が出てくるので、そちらを使ってみても良かったかも知れません。
改造したところ
元のソースコードをforkして改造したのがこちらです
https://github.com/kitaindia/react-firebase-quiz-game
packageを最新にアップデート
元のソースコードが2017年のもので、npm audit すると critical なpackageがいくつか有りました。
実際にこのクイズアプリ使うのって一日だけだし、このまま進めてもいいんですが少し気持ち悪いので直しました。影響範囲が少ないpackageから一つずつ最新に上げていきました。
画像がでるようにした。
元のソースコードは４択は文字のみだったので、画像を表示できるようにしました。
これもバックエンド的には大したことはやってなく、むしろCSSでデザイン調整するのが大変でした。
実際の様子
2次会の幹事の人には受付時にこのようなコピー用紙を参加者に渡してもらいました。
クイズ中の様子です
反省点
文字が小さすぎて、問題が読めなかった
ディスプレイに映すのが本番一発勝負だったのと、実際にクイズをやるときにどのようにやるかのイメージがついてなかったです。
思ったよりプロジェクターが小さく、参加者の席もディスプレイから５ｍ以上離れていたので、画像ぐらいしか認識できなかったのではと思います。
問題数が多くて意外と時間がかかった
10問出題したけど、問題の解説したりしてたら30分以上掛かってしまいました。成績優秀者にプレゼント渡したりしていると小一時間掛かっていました。
会場借りられる時間が決まっていて、2時間しか借りられなかったので、ちょっと時間使いすぎでした。
やってみてわかったこと
ゼロからアプリ作ると時間も掛かっちゃってなかなか大変なのですが、そういう時は既存のアプリを改造するのも勉強になってよいと思いました。