スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

HTML5 加速度センサAPIを試してみた

HTML5 加速度センサAPIを試してみたので忘れないようにメモ。


主に参考にしたサイト
DeviceOrientation Event Specification(W3C)
http://www.w3.org/TR/orientation-event/

This End Up: Using Device Orientation & Device Motion(html5rocks)
http://www.html5rocks.com/en/tutorials/device/orientation/


気づいたこと

・実装は結構簡単。("devicemotion"というイベントをwindow.addEventListenerで感知し、
関数に渡されるaccelerationIncludingGravityオブジェクトから簡単に重力加速度が取れた。)

// 加速度センサーの値を取得する
window.addEventListener("devicemotion", function(evt){
var ele = document.getElementById("result");
var x = evt.accelerationIncludingGravity.x; // 横方向
var y = evt.accelerationIncludingGravity.y; // 縦方向
var z = evt.accelerationIncludingGravity.z; // 上下方向
ele.innerHTML = "x:"+x+"
y:"+y+"
z:"+z;
}, true);

axes.png


・まだ、workingdraft(草案)段階だけあって、結構ブラウザの実装が変わっている模様。
→いくつかのサイトではFirefoxの場合、"MozOrientation"というイベントを捉える記述になっているがFirefox 9.01ではiphoneとかと同様、"devicemotion"というイベントを補足するように変わっていた。


・実装がされているブラウザは少ない。
→確認時点ではFireFoxとipadのみ(iphone4は”devicemotion”,"deviceorientation"ともに取得できるらしい)
→FireFox(9.0.1)とipad(ios5)でも"accelerationIncludingGravityオブジェクト"のみしか使えなかった。

firefoxdeviceorientation.jpg

実装がはやくいろいろなブラザにされることを祈ってます。。。。

その他参考サイト
WebブラウザでiPhone/iPadの加速度センサーの値を取得する
http://www.haikararou.com/lab/?p=817

加速度センサーの値を取得する(iphone4だと取れているみたい)
http://ascii.jp/elem/000/000/573/573478/index-2.html

DeviceOrientation Evenでシェイク!iphoneウェブアプリで使ってみる
http://2843.jp/blog/technical-note/deviceorientation-event-on-iphone-app-201001061258.html

[Firefox 3.6][加速度センサー]Firefox 3.6から搭載の加速度センサーのサンプルを試してみた
http://d.hatena.ne.jp/nakamura001/20100122/1264130744

MozOrientation(MDN)
https://developer.mozilla.org/ja/DOM/MozOrientation

iPhone(iOS4.2)の加速度センサーとジャイロセンサーの値をJavascriptで取得する
http://blog.alt-scape.com/archives/397


デバッグコンソール(iphone,ipad)
http://wiki.sohaya.com/index.php/%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB

Android でも使おうー!Firebug!
http://actyway.com/5727

W3C勧告プロセスの概要
http://www.w3.org/TR/orientation-event/

Web標準とその周辺技術の学び方
http://gihyo.jp/design/serial/01/web-standards/0001

ウェブ開発者必携の「Firebug」をiPhone, iPadで利用する方法
http://20kaido.com/archives/5514469.html

IEなどすべてのブラウザで使えるCSSデバッガー「Firebug Lite」
http://blog.webcreativepark.net/2010/07/07-134217.html
(上記ブックマークの方法が使えなかった(IE9,crome16.0.912.75 m)のでソースコードのタグ貼り付けにした)

javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

FirefoxのJavaScriptデバッガ拡張Firebugの進化がすごい
http://efcl.info/2011/0424/res2647/

【コラム】
イマドキのIDE事情
102 Google ChromeのDeveloper Toolsを使いこなそう
http://news.mynavi.jp/column/ide/102/index.html

SafariのWebインスペクタでJavaScriptをデバッグする
http://d.hatena.ne.jp/replication/20100612/1276600707

Opera Dragonfly 1.1
http://www.opera.com/dragonfly/
スポンサーサイト

テーマ : ひとりごとのようなもの - ジャンル : 日記

コメント

コメントの投稿

管理者にだけ表示を許可する

トラックバック


この記事にトラックバックする(FC2ブログユーザー) URL

プロフィール

ogatomi

Author:ogatomi
部署移動に伴い、SE8年目にしてホストマシーンからオープン系システムの転身。
一からの勉強しなおしの記録を出来る範囲でブログにつづりたいと思います。

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
全記事表示リンク

全ての記事を表示する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。