YoheiM技術やらずに終われまテン

2011-07-30 [JavaScript] iPhoneのSafariで加速度センサーを使う

こんにちは、@yoheiMuneです。

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

f:id:yoheiM:20110731005608j:image




加速度センサーとは

加速度センサーとはその名の通り、iPhoneが移動した際の加速度を検知するセンサーです。加速度とは、メートル/秒×秒の値であり、加速度が正数であれば速度が増している状態であり、加速度が負数であれば速度が減速している状態。加速度については、wikipedia:加速度も参照してみてください。

iPhoneSafariブラウザで加速度センサーを使う場合には、iOSが4.2以上である必要があります。



加速度センサーの使い方

iPhoneSafariで加速度センサーを使うには、以下のような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

HTML5LearnersHTML5を学び合うFacebookPage

HTML5サンプルページ:作成したサンプルを載せているサイト

YoheiM.NET:技術情報を中心に情報発信サイト

cooking_bot:料理情報をつぶやくTwitterアカウント