Chromeでも加速度センサー(DeviceOrientation Event)が使える様になってたみたい

昨日のGoogleのDoodle、ジュール・ヴェルヌの「海底二万里」をモチーフにした非常に凝ったものでした。
潜水艦から海底を覗いている様なデザインになっており、右側のハンドルで潜水艦が操作できました。

これだけでも凄くインパクトの有るDoodleですが、実は加速度センサーでの操作も可能でした。

例えば加速度センサーを搭載しているMacBookなどのノートPC本体を傾ける事で潜水艦の操作が出来ました。
iPhoneでも操作できたみたいです。最新版のMacBook AirではSSDなので加速度センサーは搭載されていないみたいで反応しませんでした。
※MacBookに搭載されている加速度センサーは本来はノートPCを落下した時にHDDの回転を止めるなどHDDの保護を目的として実装しされていたものです。そのためSSDになった最新のMacBook Airでは非搭載になったのでしょう。

こちらPCだとFirefoxとChromeで動作可能でした。
現在でもこちらで試せます。こちらで公開されているものは潜水艦の窓や全体のサイズも大きいものに成っています。

Firefoxは以前、自分もテストして使えるのを知っていたのですがChromeについては今回始めて知りました。

加速度センサー系のイベントでは「デバイスモーションイベント(Device Motion Event)」と「デバイスオリエンテーションイベント(Device Orientation Event)」の2つが有るのですが現在の最新版のChrome 9でサポートしているのは「デバイスオリエンテーションイベント(Device Orientation Event)」のみでした。

また、このイベントでは alpha、beta、gamma の3つのイベントを返すのですがalphaは常に0を返しており、有効な値は beta と gamma だけとなる様です。

実際にChromeで確認したい場合はこちらで確認出来ます。

今回解説した内容のW3Cの規格は以下。

DeviceOrientation Event Specification
http://dev.w3.org/geo/api/spec-source-orientation.html

それぞれのイベントについての詳細は以下。

デバイスモーションイベント(Device Motion Event)

イベントを処理する時は以下の様に記述。

      window.addEventListener("devicemotion", function(event) {
          // Process event.acceleration, event.accelerationIncludingGravity,
          // event.rotationRate and event.interval
      }, true);

iPhoneのSafariで加速度センサーを使う - 強火で進め
http://d.hatena.ne.jp/nakamura001/20101128/1290942715

デバイス オリエンテーションイベント(Device Orientation Event)

イベントを処理する時は以下の様に記述。

      window.addEventListener("deviceorientation", function(event) {
          // process event.alpha, event.beta and event.gamma
      }, true);

iPhoneのSafariで細かい回転量を取得する - 強火で進め
http://d.hatena.ne.jp/nakamura001/20101128/1290946966

強火で進め

このブログではプログラム関連の記事を中心に書いてます。

Chromeでも加速度センサー(DeviceOrientation Event)が使える様になってたみたい

デバイスモーションイベント(Device Motion Event)

デバイス オリエンテーションイベント(Device Orientation Event)

関連サイト