iPhoneのSafariで加速度センサーを使う
こんにちは、@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アカウント