Web を利用可能なデバイスは、自身の方向を特定できるようになってきました。つまりデバイスは、重力との関係による自身の向きの変化を示すデータを報告できます。特に携帯電話のようなハンドヘルドデバイスは、表示内容が直立し続けるよう自動的に回転させるためにこの情報を使用でき、画面の幅が高さより大きくなるようにデバイスを回転させたときは、Web コンテンツをワイドスクリーン表示にします。
方向の情報を制御する JavaScript イベントが 2 つあります。ひとつは DeviceOrientationEvent
であり、加速度センサーがデバイスの方向の変化を検出したときに発生します。Orientation イベントが報告するデータを受け取って処理することで、ユーザがデバイスを動かすことによる方向や高さの変化に対してインタラクティブに応答できるようになります。
もうひとつのイベントは DeviceMotionEvent
であり、加速度が変化したときに発生します。こちらは方向ではなく加速度の変化を監視することが、DeviceOrientationEvent
との違いです。一般的に DeviceMotionEvent
を検出できるセンサーには、可動部があるストレージ装置を保護するためラップトップパソコンに内蔵するものも含みます。DeviceOrientationEvent
は、モバイルデバイスでとても一般的です。
orientation イベントを処理する
方向の変化を受け取り始めるには、deviceorientation
イベントをリッスンします:
注記: gyronorm.js は、モバイルデバイスの加速度センサーやジャイロスコープのデータを正規化するためのポリフィルです。これは、デバイスの方向のサポート状況の違いを克服するのに役立ちます。
window.addEventListener("deviceorientation", handleOrientation, true);
イベントリスナ (この例では handleOrientation() という名前の JavaScript 関数) を登録すると、リスナ関数は最新の方向データとともに、周期的に呼び出されます。
Orientation イベントは 4 つの値を持ちます:
DeviceOrientationEvent.absolute
DeviceOrientationEvent.alpha
DeviceOrientationEvent.beta
DeviceOrientationEvent.gamma
イベントハンドラ関数は以下のようなものです:
function handleOrientation(event) {
var absolute = event.absolute;
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
// 新たな方向データに基づいて処理を行う
}
方向として示される値
それぞれの軸で報告される値は、標準座標系の軸を中心にした回転量を表します。これらは方向および動きとして示されるデータの記事で詳しく説明しており、ここでは概要を記載します。
DeviceOrientationEvent.alpha
の値は z 軸を中心にしたデバイスの動きを表し、0 から 360 の範囲による度数で表されます。DeviceOrientationEvent.beta
の値は x 軸を中心にしたデバイスの動きを表し、-180 から 180 の範囲の値による度数で表されます。これはデバイスの前後の動きです。DeviceOrientationEvent.gamma
の値は y 軸を中心にしたデバイスの動きを表し、-90 から 90 の範囲の値による度数で表されます。これはデバイスの左右の動きです。
例
このサンプルは方向を検出可能なデバイス上で、deviceorientation
イベントをサポートするブラウザを実行する場合に動作します。
庭にボールがあると考えます:
<div class="garden">
<div class="ball"></div>
</div>
<pre class="output"></pre>
庭の幅は 200 ピクセルであり (小さな庭です)、ボールは中心にあります:
.garden {
position: relative;
width : 200px;
height: 200px;
border: 5px solid #CCC;
border-radius: 10px;
}
.ball {
position: absolute;
top : 90px;
left : 90px;
width : 20px;
height: 20px;
background: green;
border-radius: 100%;
}
デバイスを動かすと、その動きに応じてボールが移動します:
var ball = document.querySelector('.ball');
var garden = document.querySelector('.garden');
var output = document.querySelector('.output');
var maxX = garden.clientWidth - ball.clientWidth;
var maxY = garden.clientHeight - ball.clientHeight;
function handleOrientation(event) {
var x = event.beta; // -180 から 180 の範囲で角度を示す
var y = event.gamma; // -90 から 90 の範囲で角度を示す
output.innerHTML = "beta : " + x + "\n";
output.innerHTML += "gamma: " + y + "\n";
// デバイスをひっくり返したくはないため、
// x の値を -90 から 90 の範囲に制限する
if (x > 90) { x = 90};
if (x < -90) { x = -90};
// 計算を容易にするため、x および y の値の範囲を
// 0 から 180 に変換する
x += 90;
y += 90;
// 10 は、ボールのサイズの半分である。
// これにより、配置場所をボールの中心に合わせる
ball.style.top = (maxX*x/180 - 10) + "px";
ball.style.left = (maxY*y/180 - 10) + "px";
}
window.addEventListener('deviceorientation', handleOrientation);
結果を以下に示します:
警告: Chrome と Firefox では角度の扱い方が異なり、一部の軸の向きが逆になっています。
motion イベントを処理する
motion イベントは orientation イベントと同じ方法で扱えますが、イベント名は devicemotion
になります。
window.addEventListener("devicemotion", handleMotion, true);
実際どのように変化したかの情報は、HandleMotion 関数のパラメータとして渡す DeviceMotionEvent
オブジェクトが提供します。
motion イベントは 4 つのプロパティを持ちます:
動きとして示される値
DeviceMotionEvent
オブジェクトは Web 開発者に、デバイスの位置や方向が変化した速度の情報を提供します。変化量は 3 つの軸 (詳しくは方向および動きとして示されるデータをご覧ください) に沿って表します。
acceleration
および accelerationIncludingGravity
で対応する軸は以下のとおりです:
x
: 西から東へ向かう軸を表します。y
: 南から北へ向かう軸を表します。z
: 地面から直立する軸を表します。
rotationRate
では状況が若干異なります。こちらの情報はそれぞれ以下のように対応します:
alpha
: スクリーン (デスクトップ環境ではキーボード) から直立する軸を表します。beta
: スクリーンの面 (デスクトップ環境ではキーボード) の左から右へ向かう軸に沿った回転量を表します。gamma
: スクリーンの面 (デスクトップ環境ではキーボード) の下から上へ向かう軸に沿った回転量を表します。
最後に interval
は、デバイスからデータを取得する間隔をミリ秒単位で表します。
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
DeviceOrientation Event Specification | 編集者草案 | 最初の仕様 |