Inside
“World Wide Maze”

2013/8/26 @ 第41回 HTML5とか勉強会
by Saqoosha

Saqoosha

（さくーしゃ）
Katamari Inc. / CTO / Technical Director / Programmer
Flash 歴 10 年

IS Parade

androp “Bell” music video game

http://androp.jp/bell

World Wide Maze

スマートフォンを使ってボールを転がし、
3D 迷路化された Web サイト上でゴールを目指すゲーム
http://chrome.com/maze

WWM で使っている HTML5 の機能

（おもなもの）

制作に苦労したポイント

すべて

スマホの傾き情報を

リアルタイムに PC に送信するには？

スマホの傾き情報を取得する


DeviceOrientation イベントをつかう

window.addEventListener("deviceorientation", function (e) {
    // e is DeviceOrientationEvent object
    // do something with e.alpha, e.beta or e.gamma.
});

呼び出される間隔
iOS + Safari : 100ms
Android 4 + Chrome : 200ms

サポートされてる環境
http://caniuse.com/#feat=deviceorientation

DeviceOrientationEvent

alpha, beta, gamma が XYZ それぞれの軸まわりの
回転角 (degree) をあらわす。

0 度から 360 度まで
[0, 360)
-180 度から 180 度まで
[-180, 180)
-90 度から 90 度まで
[-90, 90)

実装が違う！


緑が W3C の仕様と同じ、赤が違う
（beta と gamma が逆？）

対応


beta と gamma を逆に扱う

iPhone を基準に Android の値を補正

if android and event.gamma > 180 then event.gamma -= 360

取得した回転角度を PC におくる


WebSocket

  • つなぎっぱなし
  • リアルタイム
  • サーバーからもpush

スマホ→PC直接おくれない

WebSocket はクライアント・サーバー間のプロトコル


Socket.io

http://socket.io/

node.js での WebSocket 実装

  • さまざまな draft protocol にも対応
  • heartbeat, timeout, reconnect
  • 生 WebSocket にはない便利機能いろいろ

モバイルとPCのペアリング

たくさんのクライアント、どれとどれをつなげる？

番号によるペアリング

PC からフローを開始した場合

  1. PC がサーバーに接続。
  2. ランダムに生成した番号を PC に渡す。 
    サーバーは番号と PC のペアを覚えておく。
  3. モバイルから番号を指定してサーバーに接続。
  4. 指定した番号に対応する PC が存在すれば、
    それとペアを作る。 なければエラー。
  5. モバイルからデータが流れてきたら、
    ペアとなる PC に送る。

デモ!


http://saqoo.sh:13000/

ソースコード

レイテンシー

スマホから送信したデータが
PC に届くまでにどれぐらいの時間がかかるか

開発環境（ローカル）: 〜5ms
日本のサーバー : 〜30ms
USのサーバー : 〜200ms

極力、ネットワーク的に近いサーバーを使うこと！

サーバーを経由せずに

スマホからPCにデータを送る方法


WebRTC

  • Data Channel をつかう
  • ペアリングするためのサーバーはやっぱり必要

もっと Inside “World Wide Maze”

HTML5 Rocks に記事を書きました

Thank you!



Saqoosha

http://saqoo.sh/a
http://twitter.com/Saqoosha

http://saqoo.sh/a/labs/inside-wwm/