JavaScript で iPhone の加速度センサーを扱う方法

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

iOS 4 になって加速度をJavaScriptのみで取得できるようになったのでその方法を紹介します.

DEMO AND DATA

値を取得するサンプルはこちら

データはこちらからダウンロードできます

CODE

iOS 4 から JavaScript のイベントに “devicemotion” という 加速度変更時に呼ばれるイベントが追加されています. このイベントに加速度を使った処理をした関数を登録するだけで簡単に加速度を扱えるようになります.

“devicemotion”イベントに関数を登録するコード

var $id = function(id)
{
    return document.getElementById(id);
}

window.addEventListener('devicemotion', function(e){
    // 重力加速度(3軸)
    var gravity = e.accelerationIncludingGravity;
    $id("gravity").innerHTML = gravity.x + ', ' + gravity.y + ', ' + gravity.z;
    
    return ;
    
    // ここからはiPhone 4 以上でしか動かない
    // 私は iPhone 3GS なのでオフる(悔しいのでw)

    // 加速度(3軸)
    var accele = e.acceleration;
    $id("accele").innerHTML = accele.x + ', ' + accele.y + ', ' + accele.z;
    
    // 回転加速度
    var rotation = e.rotationRate;
    $id("rotation").innerHTML = rotation.x + ', ' + rotation.y + ', ' + rotation.z;
});
    

蛇足ではありますが, 以前はどう取得していたのかも紹介したいと思います.

ネイティブとJavaScriptでやりとりして加速度を取得

1年半前までは, JavaScript側で加速度センサーを扱うには ネイティブ(Objective-C)側からパラメータをJavaScriptに送って処理するしかありませんでした.

ネイティブとJavaScriptでやりとりして加速度を取得

js側で定義する関数

/**
 * ネイティブ側から呼び出す加速度センサーを使った処理
 */
var accelerometerChange = function(accelerometer){
    // TODO: 送られてきたパラメータを使った処理を行う
    var x = accelerometer.x;
    var y = accelerometer.y;
    var z = accelerometer.z;
}
    

ネイティブ側で加速度を取得してjsに送る

// 加速度パラメータを持ったjsonオブジェクト文字列を作成
NSString* accel = [NSString stringWithFormat:@"{x:%f,y:%f,z:%f}", acceleration.x, acceleration.y, acceleration.z];
// jsに送る文字列を作成
NSString* jsStr = [NSString stringWithFormat:@"accelerometerChange(%@)", accel];
// jsに命令を送る
[webView stringByEvaluatingJavaScriptFromString:jsStr];
    

詳しくは, http://d.hatena.ne.jp/uosoft/20100226/1267110536を参照

なんて方法で無理やり実装していました. しかしこれだと結局Objective-Cを使うので UIWebViewを生成したりWebページを読み込んだり, Appleへの申請が必要だったりとあまり意味がありませんでした.

上下左右どちらを向いているかを取得

1年前でも, iPhone が上下左右どの方向を向いているかだけだったら JavaScript のみで取得することができました. そのサンプルはこちらで見れます.

こちらがそのコード

var $id = function(id) { return document.getElementById(id); };

window.onorientationchange = function(){
    $id("angle").innerHTML = window.orientation;
};
    

いやー WebGL も 次の iPhone からは動きそうですし, これで Objective-C 離れが加速すれば嬉しいものですね♪

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT