WebSocketとDeviceMotion Eventで遊ぶ

iPod touch(第2世代と第4世代)のiOSを4.2.1にアップデートした。Safari on iPhone & iPad 4.2: Accelerometer, WebSockets & better HTML5 support | Breaking the Mobile Webによれば、SafariのHTML5対応が強化されたらしい。
試しに遊んでみる。
WebSocketとDeviceMotion Eventの組み合わせに着目して、複数のボールがiPod touchのモーションによって動き、そのボールの位置がWebSocketを通してWebページを閲覧している全てのデバイスに通知/共有される、というシナリオを考えた。
図にすると以下のような感じ。1つのデバイスが1つのボールを制御し、WebSocketを通じて共有されるデータは「どのボールがどの位置にあるか」という単純なデータとする。

完成したものがこちら。
まず、1つのiPod touchとGoogle Chromeで同じWebページを開き、iPod touchでボールを動かした。WebSocketを通して、Google Chromeにもボールの動きが反映されている。

次に、2つのiPod touchとGoogle Chromeで同じWebページを開き、それぞれのiPod touchで別々のボールを動かした。左のiPod touchが赤ボールで、右が青ボール。WebSocketを通して、2つのiPod touchとGoogle Chromeでボールの動きが共有されている。

積んだ本の上にデジカメを置いて両手でiPod touchを操作する様子を撮るのは、結構大変だった (もうちょっと上手く撮りたかった)。

WebページはHTML5で以下のように書いた。ボールはもちろんcanvasで書いている (ただの塗り潰した円だけど)。WebSocketサーバが動いていない時の挙動など、エラー処理は省いてある。

Webページが通信するためのWebSocketサーバにはTornado (ver.1.1)を用いた。

Webページに直書きしてあるが、IPアドレスとして192.168.254.23を持つMacbookでWebサーバとWebSocketサーバを動かし、デバイスは"http://192.168.254.23/balls.html"を参照しWebページを開くと、"ws://192.168.254.23:8888/balls"で参照されるWebSocketサーバにコネクションを張る。WebSocketサーバがコネクション(Webページを開いているデバイス)を管理して、ある端末から送信されたデータを他の端末に転送する。

WebSocketはCometと比べて、ずっと簡単だった。

ところで、同じバージョンのiOSでも、出来ることと出来ないことがあってちょっと戸惑っている。Safariなら第4世代だとDeviceOrientation Eventが取れて、第2世代だと取れないとか。まあ古いものはどう頑張っても段々と時代遅れになるということらしい。