Azure, Node.jsとsocket.ioで作る早押しクイズ大会アプリ

先日の忘年会のネタに早押しクイズ大会アプリを作りました。




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して試してみて下さい！







　
.

Nexus 6を買って14日目の感想

大きさと重さについては「案ずるより産むが易し」

慣れれば大丈夫。と言うよりこの画面の大きさはクセになる。

重さに関してはもちろん軽いに越したことはないけれど、タブレットみたいに重さで手が疲れるとかそういう事は無いので気にならない。

でもポケットから取り出す時には落とさない様にちょっと気を付ける必要があるかも。

Webサイトの閲覧はますますスマホ中心に

縦持ちでも結構広いし横持ちにすれば大体どんなPC用サイトでもそのまま閲覧出来る。

今までは「スマホではブログやニュース記事のタイトルだけチェックして中身はPCで後から読む」というスタイルだったのが、「スマホでその場で読む」に変わりつつある。

縦向き

横向き

やっぱり画面が広いのは良い事だ。

大きいキーボードで文字入力が速く快適に！

2年以上愛用したGalaxy S3と比べて一番変わったのはこの点かも知れない。
今までは
「スマホで文字を入力する事」=「極力避けたい事」
だったのが、これからはそうでもなくなりそうだ。

充分に高機能なカメラ

カメラについては、前に使っていたGalaxy S3と比べるとかなりスペックが上がっているので特に不満は無し。かと言って正直感動するほどでもなかったかな。

パノラマ撮影

ぼかし効果付きの写真も簡単に撮影可能。

あとGalaxy S3はカメラのシャッター音が大きくて不便だったけれど、Nexus 6の場合は端末のボリュームを下げてバイブにしておけば無音で撮影出来る。これは嬉しい。

キーボードとマウス、外部ディスプレイを繋げばPCになる(?)

Chromecast があれば無線で簡単に画面全体を外部ディスプレイへ出力する事が可能だ。大画面で見ると 2560×1440px というNexus 6の解像度の高さがますます活きてくる。
(訂正: Chromecastを経由すると解像度が落ちるので2560x1440pxの画面がそのまま表示される訳ではない。)

会社のPCにRemote Desktopで接続すればPC無しでデスクトップ環境を再現する事も出来そうだ。(遅延がどれくらいになるかはまだ試していないので分からない。) 　
(*試した結果は下の「後日談」参照)


Nexus 4や5では、MicroUSBポートに「SlimPort」という規格に対応したアダプタを挿せばHDMIのディスプレイに画面をミラーリング出来たらしい。ところがどうも調べた所 Nexus 6ではケーブル接続での外部ディスプレイ出力には対応していないみたいだ。

なので外部ディスプレイとの接続には Chromecast か Miracast* を使うしかなさそうだ。

* Googleのサポートページによると、なんと 『Nexus 6とNexus 9はMiracastをサポートしていません』との事。

https://support.google.com/nexus/answer/2865484?hl=en

** なぜか工場出荷時にMiracastを使用不可にしてあるらしく、Root化してbuild.propというファイルに1行追加すれば使える様になるとの情報が下のページにあった。

http://forum.xda-developers.com/nexus-6/help/nexus-6-miracast-t2952461/page2

我が家には1年以上前に買ったChromecastがあったので、試しにそれで居間のテレビに画面をミラーリングしてみた。

通知エリア内の「Chromecast」ボタンを押すと画面のミラーリングが始まる。

Chromeブラウザの画面。スクロールすると一瞬のタイムラグを感じる。

Youtubeの動画をミラーリングして観るだけなら遅延はほとんど感じない。

画面を出力する事が出来たら、次はキーボードとマウスだ。

1. USBケーブルで有線接続する
2. Bluetoothで無線接続する

の2通りの方法がある。
どちらでも良いのだけれどとりあえずOTGアダプタ(こんなやつ)とUSBハブを買って1つめの方法で試して見ようと思っている。これだといつもPCで使い慣れているキーボードとマウスをそのまま使える。



*後日談
PCにRemote Desktopで接続してChromecast経由でディスプレイ出力するというのを試して見た。MicrosoftのRemote DesktopクライアントとGoogleのChrome Remote Desktopの両方を試した。

結果、やっぱりあまり実用的には使えない事が判った。キーボードはそれなりに使えるのだけど、マウスの動作がどうしても1テンポ遅れてしまう。これでは細かな作業には使いづらい。

Remote Desktop自体はNexus 6の画面上ではストレス無く動いているので、Chromecastを経由する事による遅延が原因だと思う。もちろん無線LANの速度にも影響されるだろう。試した環境は11n(300Mbps)だったので、これが11ac(6.9Gbps)とかになれば改善されるのかも知れない。と思ったらChromecastは11acに対応していないらしいので現状ではこれ以上は無理そうだ。

また、遅延の問題以前に解像度の問題もある。Chromecastを経由する事で解像度が落ちてしまい文字がボヤケて表示されるのだ。

こういう用途はそもそも想定外で、Chromecastはあくまで写真・動画の鑑賞やプレゼンなどに使うものという事だろう。

もしSlimportかMHLでの有線接続が出来ていたらもっと便利に使えただろうと思うとちょっと残念だ。

3日目に遭遇したトラブル

買ってから2日目の夜にバッテリーが残り20%ぐらいの状態でそのまま寝てしまった。朝になってから使っていると何か画面の反応がおかしい。スクロールすると縦半分だけが取り残されて表示が崩れたりする。最後には白黒の砂嵐状態になってしまった。ちょうど電波が無い時の地上波テレビみたいな感じだ。

慌てて電源アダプターをつなぐ。それから完全にシャットダウンして再起動してもしばらくすると同じ現象が起きる。しかも全く電話が繋がらない。「これはキャリア(Sprint)の店舗に行って交換してもらうしか無いかな〜」と焦っているうちにうんともすんとも反応しなくなってしまった。

結局、電源アダプターをつないだまま2時間ほど触らずに置いておく事でこの現象は直った。それ以降は必ず1日1回は充電する様にしている。それから再発はしていないので、多分大丈夫だと思う。

総合的には今のところ「ほぼ満足」

端末代は高いけれど、最先端のAndroidを体験したい人には強くおすすめ出来る。実はiPhone 6 Plusにしようかこっちにしようかかなり迷ったけど、Nexus 6にして良かった。Android 5.0は完成度が高くてとても使い易い。

Remote Desktop接続を多用する超小型PC好きとしては、有線で遅延/劣化の無いディスプレイ出力が出来ないのだけがちょっと残念だ。(笑)