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

JavaScript

こんにちは、@yoheiMuneです。
今日は、iPhoneのSafariにて、iPhoneアプリのように加速度センサーを使う方法を学んだので、ブログに残しておきたいと思います。



加速度センサーとは

加速度センサーとはその名の通り、iPhoneが移動した際の加速度を検知するセンサーです。加速度とは、メートル/秒×秒の値であり、加速度が正数であれば速度が増している状態であり、加速度が負数であれば速度が減速している状態。加速度については、wikipedia:加速度も参照してみてください。
iPhoneのSafariブラウザで加速度センサーを使う場合には、iOSが4.2以上である必要があります。


加速度センサーの使い方

iPhoneのSafariで加速度センサーを使うには、以下のようなJavaScriptを記載します。

window.ondevicemotion = handling;
function handling (event) {
  var x = event.accelerationIncludingGravity.x; // 左右
  var y = event.accelerationIncludingGravity.y; // 前後
  var z = event.accelerationIncludingGravity.z; // 上下
  
  var coords = "xyz: " + x + "," + y + "," + z + "<br/>";
  document.querySelector("#area").innerHTML += coords;
}

windowオブジェクトのdevicemotionというイベントに、自分で記載した関数を設定する事で、加速度センサーが動くたびに、設定した関数は加速度の情報を得ることが出来ます。
自分で記載した関数には、eventという引数を設定する事で、eventから加速度センサーの値を取得出来ます。eventから取得出来る情報は、加速度やそれ以外の情報など、以下のようなものがあります。

event.accelerationIncludingGravity.x 左右の移動の値。正数は右方向
event.accelerationIncludingGravity.y 上下の移動の値。正数は上方向
event.accelerationIncludingGravity.z 前後の移動の値。正数は前方向
event.acceleration ジャイロセンサーによる移動の値。ジャイロセンサーなしの場合はnull
interval 前回加速度センサーが動いた時間からの経過ミリ病
rotaionRate デバイスの回転に関する値。ジャイロセンサーなしの場合はnull

詳細は、以下のSafari Developer Libraryを参考にしてみて下さい。
http://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html



最後に

上記の方法は現時点ではSafariのみで動作するようで、Androidとかでは、加速度センサーをWebページで使えないのかな〜？Webページでも、加速度センサーやカメラなど、iPhoneアプリで使えるような機能が使えるようになると、もっと面白くなりそうです。
加速度センサーは、まずはゲームで使ってみるかー♪(´ε｀ )


運営しているサイトです。どうぞよろしくお願いします(*´∇｀*)
Facebook
HTML5Learners：HTML5を学び合うFacebookPage
HTML5サンプルページ：作成したサンプルを載せているサイト
YoheiM.NET：技術情報を中心に情報発信サイト
cooking_bot：料理情報をつぶやくTwitterアカウント