iPhoneのSafariで加速度センサーを使う

iOS 4.2から加速度センサーをSafari上で使用出来るようになったみたなので以前作成したこちらのサンプルをiPhone向けに移植してみました。

Firefox 3.6から搭載の加速度センサーで画像を動かすサンプルを作ってみた - 強火で進め
http://d.hatena.ne.jp/nakamura001/20100123/1264234259

仕様書を確認したところほぼ同じ記述で良さそうですが微妙に変更が必要な箇所が有ったので書いておきます。

まずはイベントリスナーへの追加方法。

Firefoxの時はこの様に "MozOrientation" と書きましたが

      window.addEventListener("MozOrientation", mozHandleOrientation, true);

iPhone(現行のW3Cの仕様)では以下の様な記述となります。

      window.addEventListener("devicemotion", iosHandleOrientation, true);

後、iPhoneで傾けたときはMacBook上のFirefoxに比べ、大きく動いている様なので取得した加速度にかけるスケール値を低めに変更しました。

      	var accel_scale = 500.0;

      	var accel_scale = 30.0;

最後にY軸の値がMacBookでのものプラスマイナスが逆の様なので以下の部分の orientData.y を -orientData.y に変更。

      	pos_y = (orientData.y*accel_scale * filter_val) + (pos_y * (1.0 - filter_val));

　　　↓

      	pos_y = (-orientData.y*accel_scale * filter_val) + (pos_y * (1.0 - filter_val));

値について詳しくまとめると以下の様になります。X軸に関しては違いは無い様です。

傾ける方向	iPhone	MacBook上のFirefox
画面奥を下向きに	Y軸プラス	Y軸マイナス
画面手前を下向きに	Y軸マイナス	Y軸プラス
画面右を下向きに	X軸プラス	X軸プラス
画面左を下向きに	X軸マイナス	X軸マイナス

実際のプログラムはこちらで確認できます。iOS 4.2以降のiPhone/iPadで見てみて下さい。

どうせならFirefoxと両対応が良いなぁと両対応にしたプログラムがこちら。

addEventListener でiPhone/iPad用のとFirefox用のと両方を設定しています。

      // Firefox用のハンドリング関数
      function mozHandleOrientation(event) {
      	var orientData = event;
      	var accel_scale = 500.0;
      	var filter_val = 0.1;
      	 
      	// ローパスフィルタ
      	pos_x = (orientData.x*accel_scale * filter_val) + (pos_x * (1.0 - filter_val));
      	pos_y = (orientData.y*accel_scale * filter_val) + (pos_y * (1.0 - filter_val));
        var d = document.getElementById("display");
        d.innerHTML = "<p> x = " + orientData.x + "<br />y = " + orientData.y + "</p>";
      }

      // iPhone/iPad用のハンドリング関数
      function iosHandleOrientation(event) {
      	var orientData = event.accelerationIncludingGravity;
      	var accel_scale = 30.0;
      	var filter_val = 0.1;
      	 
      	// ローパスフィルタ
      	pos_x = (orientData.x*accel_scale * filter_val) + (pos_x * (1.0 - filter_val));
      	pos_y = (-orientData.y*accel_scale * filter_val) + (pos_y * (1.0 - filter_val));
        var d = document.getElementById("display");
        d.innerHTML = "<p> x = " + orientData.x + "<br />y = " + orientData.y + "</p>";
      }

      window.addEventListener("MozOrientation", mozHandleOrientation, true);
      window.addEventListener("devicemotion", iosHandleOrientation, true);

強火で進め

このブログではプログラム関連の記事を中心に書いてます。

iPhoneのSafariで加速度センサーを使う

関連リンク