search
LoginSignup
2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

ubiregiUbiregi Advent Calendar 2019 Day 11

posted at

updated at

Organization

React/Redux + Firebase で結婚式二次会で使う余興用のクイズアプリを改造して使った時の話

Ubiregi Advent Calendar 2019 の 11日目です

React/Redux + Firebase で結婚式二次会で使う余興用のアプリを使った時の話を書きます

2019年9月20日に結婚式をやった

大宮で挙式しました。

オールスター大感謝祭風のクイズを2次会でやりたい

2次会の余興でオールスター大感謝祭風のクイズゲームをやりたいと思いまして、

  • 会場のディスプレイを映して、回答者は手元のスマホでリアルタイムに回答
  • 選択肢の画像と文字が表示される
  • ランキングが表示される
  • なるべく楽な方法で

既存のサービスでそういうのがあればそれを使おうと思ったのですが、検索してみたのですが良さそうなのがなく、
一つだけ、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から一つずつ最新に上げていきました。

画像がでるようにした。

元のソースコードは4択は文字のみだったので、画像を表示できるようにしました。
これもバックエンド的には大したことはやってなく、むしろCSSでデザイン調整するのが大変でした。

実際の様子

2次会の幹事の人には受付時にこのようなコピー用紙を参加者に渡してもらいました。

70422940_2571039389646274_3264623389221847040_n.jpg

クイズ中の様子です
image.png

70614698_2571039376312942_1160533195972673536_n.jpg

反省点

文字が小さすぎて、問題が読めなかった

ディスプレイに映すのが本番一発勝負だったのと、実際にクイズをやるときにどのようにやるかのイメージがついてなかったです。
思ったよりプロジェクターが小さく、参加者の席もディスプレイから5m以上離れていたので、画像ぐらいしか認識できなかったのではと思います。

問題数が多くて意外と時間がかかった

10問出題したけど、問題の解説したりしてたら30分以上掛かってしまいました。成績優秀者にプレゼント渡したりしていると小一時間掛かっていました。
会場借りられる時間が決まっていて、2時間しか借りられなかったので、ちょっと時間使いすぎでした。

やってみてわかったこと

ゼロからアプリ作ると時間も掛かっちゃってなかなか大変なのですが、そういう時は既存のアプリを改造するのも勉強になってよいと思いました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2
Help us understand the problem. What are the problem?