1．主催者がアプリのURLをブラウザで開き、クイズ大会を開始。
2．画面にパスコードが表示されるのでアプリのURLとパスコードを参加者に伝える。
3．各参加者はスマホのブラウザでアプリのURLを開いてパスコードを入力。
4．人数が集まったら主催者が「開始」ボタンを押す。
5．参加者の画面に問題が同時に表示される。
6．最初の正解者が3点、2番目の正解者が2点、3番目が1点獲得。不正解はマイナス1点。
7．5〜6を繰り返す。
8．全ての問題が終わったら結果発表画面を表示。
という流れで動きます。
ソースコードはこちら。
https://github.com/mikehibm/EnkaiQuiz
ホスティングはもちろんAzure Web Sites。
コーディングは全てVS Online上で行いました。Azure Web SitesとVS Onlineを組み合わせるとNode.jsアプリの開発はローカルに環境を一切作らなくても出来るのでとても便利です。
 |
| 快適にコーディング出来たVS Onlineの画面 |
一応、同時に複数のクイズ大会をホスト出来る様になっています。
今回初めてsocket.ioを使ってサンプルのチャット以外のアプリを作りましたが、思っていたよりスムーズに作る事が出来ました。
とは言っても、サーバー側からクライアントにメッセージを送るのに io.emit() を多用してしまっているのはまずいかも。本来なら特定のクイズ大会に参加している人のみに送信するべきですね。
リファレンスを見ると、「Custom namespaces」を使う方法と「Rooms」を使う方法の2種類あるのかな(?)
http://socket.io/docs/rooms-and-namespaces/
実は他にも色々と改善が必要な点が。(笑)
- サーバー(Node)のプロセスが落ちたら全部消える。→ サーバー側のデータはDBに永続化しないと。
- クライアント側のデータも出来ればLocalStorageに格納したい。
- エラー処理をもっとちゃんとしないと。
- 単体テストは... ...
見直せば見直すほどいろいろ出て来ますが、また余裕が出来たら改善しようかと思います。今回の忘年会では参加者10人で問題なく動いてくれたのでとりあえずいいかなと。
残念ながら今年の忘年会シーズンはほぼ終わってしまいましたが、新年会で使えるかも(?)
クイズの問題と解答のデータは public/js/data.js にJSON形式で入っているので変更するのも簡単です。
実行時に動的に外部からデータだけ読み込める様に改造するのも良いですね。
動かしてみたい方はぜひGitHubのソースをForkして試してみて下さい！
.