Hello 2017!! 今年もよろしくお願いしますという事で、年末は掃除、年始1日から仕事の対応でSQLを流しておりましたりっくんですこんにちは。

さて、その年始のお話です。

はじめに

今回は株式会社オプトが作成したクイズアプリを、実際に元旦に試したことを書いていきます。
主に使用感と、改善するなら~という点、躓いたところを書いていく予定です。

感想ですが、非常に良くできていて、親族全員で楽しめました。
このようなアプリケーションをMITで公開してくださったオプト様に感謝し、記事として残すことにします。

アプリケーションについて

会社の納会用にクイズアプリを作りました(React / TypeScript) - Opt Technologies Magazine
会社の納会用にクイズアプリを作りました(Akka HTTP) - Opt Technologies Magazine
opt-tech/noukai_quiz_app: オプトの納会でのクイズコンテンツのために作成したアプリを公開したものです。

これです。
詳しくはBlogとGithubのReadmeを参照してください。

react-akka-aws

環境

アプリケーションがWebSocketを使ったインタラクティブなクイズアプリだったので、自分のさくらVPSでは非力且つ、現環境を壊したくないなぁと思いAWSを利用しました。
t2.microのインスタンスを立ち上げ、Java8、Nginx、Node.js、その他もろもろのインストールを行って簡単に構築しました。

はじめ、Apache2.4でリバースプロキシを噛ませようとしましたがうまくいかず、フロントはNginxにしてあります。
また、キャッシュにより問題Jsonが更新されないことが多々あったため、キャッシュもOffにしました。

この辺は僕の知識不足に起因すると思いますので、(そもそも、Portを開けておけば、Javaの実行プロセスに直接アクセスできるんじゃないのか!!って思ってました。MacのローカルでテストしているときはLocalhost(HTTPサーバー無し)で動いていたので)うまくできる方はそちらでも良いと思います。

カスタマイズする部分について

こちらで変更する部分は

  • 問題用のJsonファイルの編集
  • ログイン時に”部署”を入力するようになっていたので、今回の親族でのクイズ大会という名目上、「○○ファミリー」という項目に変更してあります。
  • 「にゃーん」という音が出るボタンは、我が家用に「たらったらったー」という、まぁ身内ネタ用音声ファイルに変更してあります。
    ※この機能は最終的におまけで計測され、ランキング最後に発表されます。
  • 50位から表示されるが、デフォルトの名前が「開発 uryyyyyyy」となっていたので、点数と合わせて差し障りのない値に変更。(dev-server.es6)

上記の4点ほどです。

使用感

下準備

もともとは新しい家族が増えるにあたって、親族のことを少しで知ってほしいということで企画しました。
その為、問題は「自分・家族に関すること」に限定しておきました。
※半分くらいはドジ話とかだったような気がしますw

問題選定は、いろんなものを集めたかったので親族に頼み、はGoogleフォームに投稿できるようにしておきました。最終的に31問も集まってしまって、1時間弱はやっていたような気がします。
この辺は、せめて15問くらいに制限したほうが良かったですね。ただ、Googleフォームを使う選択は正解でした。

実際にやったときの事

うっかり写真を撮り忘れてしまったのですが(出題でテンパってて)、人数的には18人が接続し、大盛況でした!

AWSの無料枠でやろうと思っていたので、t2.micro(vCPU 1, Mem 1GB)で構築していたのですが、18人繋いだ時点でサーバーがハングしどうもSSHの画面も反応がない事態に・・・。
この点はAWSで良かったと思いましたね・・・。一度落として、すぐにm4.xlarge(vCPU4, Mem 16GB)に引き上げ、オーバースペックだなぁと思いつつもまぁ安定稼働するほうが優先、ということで最後まで動かすことができました。

うちの環境だったらこの方が良かった!ってやつ。

クイズに正解すると、画面が虹色にグラデーションします。
おそらくこれは、企業の納会用なので正解した人がわかりやすくなるような配慮だったと思うのですが、我が家の用途では、「選択肢と、回答、正解と、当たったかどうか」を表示してあげたほうが良かったと思います。

もしくは、ちゃんとプロジェクターを用意して、問題、回答用にスライドを作り、同時にめくってあげるとかでしょうか。

また、もし家族やコミュニティで利用する場合は「にゃーん」を絶対に変えたほうが良いです。
今回、我が家のテーマ(とも言えるような、謎の音楽 たらったらったー)の音源を利用しましたが、なかなかカオスな感じになります。

理想は2秒ほどのものが良いので、誰かに吹き込んでもらうのが良いかな。

終わりに

とてもとても、楽しめました!
特に実際やった感覚では問題は「経験した中で、やってないものを一つ選べ」が、今回うちのコンセプトとマッチしていました。(これなら3つは正解で、いろいろなことを伝えることができる)

また、AWSを使えばかなり小さい金額で行えるのも良いですね。
勉強がてらに触るのもありだと思いました。

再三になりますが、株式会社オプト様、ありがとうございました。
時間があれば上記した、Forkして結果画面のカスタマイズはやってみたいです(来年の課題として親族に言われてはいます・・・)