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);
![Interface (インターフェース) 2011年 01月号 [雑誌]](https://images-fe.ssl-images-amazon.com/images/I/51qd0Wk1jrL._SL160_.jpg "Interface (インターフェース) 2011年 01月号 [雑誌]")
