DeviceOrientation Event について

・	DeviceOrientation Event について
・	加速度センサの情報について
・	地磁気センサの情報について
・	デバイスの加速度情報を取得する
・	デバイスの姿勢情報を取得する
・	デバイスの指す方角を取得する
・	デバイスの回転速度を取得する
・	地磁気センサの較正が必要になったか検出する

前のページに戻る

DeviceOrientation Event について

■ DeviceOrientation Event について

DeviceOrientation Event とは？

デバイスの加速度や姿勢情報を調べることができます。

モバイル向けの機能です。

https://www.w3.org/TR/orientation-event

加速度の計測には、「加速度センサ」が必要となります。

姿勢の計測には、「加速度センサ」と「地磁気センサ」が必要となるようです。

■デバイスのローカル座標系について

デバイス液晶平面の右方向は、+x 軸です。

デバイス液晶平面の左方向は、-x 軸です。

デバイス液晶平面の上方向は、+y 軸です。

デバイス液晶平面の下方向は、-y 軸です。

デバイス液晶平面の手前方向は、+z 軸です。

デバイス液晶平面の奥行方向は、-z 軸です。

ローカル座標系は、画面の見た目の向きに合わせて、自動的に切り替わる事はありません。

window.orientation プロパティを参考に、自前で補正する必要があります。

■現実世界のグローバル座標系について

現実世界の東方向は、+x 軸です。

現実世界の西方向は、-x 軸です。

現実世界の北方向は、+y 軸です。

現実世界の南方向は、-y 軸です。

現実世界の真上方向は、+z 軸です。

現実世界の真下方向は、-z 軸です。

上に戻る

加速度センサの情報について

■加速度センサで計測できる運動について

「重力加速度」と「慣性力」を計測できます。

■重力加速度について

重力加速度とは？

現実世界において、真下方向に常に働き続ける力です。

得られる長さの単位について

デバイスが静止している場合、約 9.8 という長さの３Ｄベクトルが得られます。

標準重力加速度は 9.80665 m/s2 と規定されています。

重力加速度を計測できない場合

デバイスが自由落下中である場合、重力加速度は計測できません。

■慣性力について

慣性力とは？

運動する物体に同乗した観測者から見て、発生したように見える力です。

遠心力を計測する

デバイスを手に持って、円状に振り回します。

回転運動を行っている間は、外側に向かって遠心力が常に働き続けます。

例えば、窓の無い車に乗って、左向きに急カーブしたとします。

同乗する観測者にとっては、静止していた運転者が、急に右側に吹っ飛んだように見えます。

加速移動を計測する

デバイスを手に持って、突きの操作を開始します。

静止している物体は、止まり続けようとする力が働きます。

例えば、窓の無い車に乗って、急発進したとします。

同乗する観測者にとっては、静止していた運転者が、急に後方に吹っ飛んたように見えます。

減速移動を計測する

デバイスを手に持って、突きの操作を行い、ピタリと止めます。

移動している物体は、移動し続けようとする力が働きます。

例えば、窓の無い車に乗って、急ブレーキをかけたとします。

同乗する観測者にとっては、静止していた運転者が、急に前方に吹っ飛んだように見えます。

慣性力を計測できない場合

テバイスを手に持って、等速で移動させます。

等速移動中は、慣性力は発生しません。

例えば、窓の無い車に乗って、同じ速度で運転し続けたとします。

同乗する観測者にとっては、運転者は静止し続けているように見えます。

■デバイスの傾きを計測する

重力加速度を計測できると、現実世界の真下方向が判明します。

これによりデバイスが、真下方向に対して、どれだけ傾いてるかが計算できます。

方角が不明な場合、デバイスの姿勢までは判別できません。

方角を知るには、地磁気センサが必要です。

上に戻る

地磁気センサの情報について

■地磁気センサの情報について

「地磁気センサ」で計測できる方向について

現実世界における、北方向を計測できます。

「加速度センサ」と「地磁気センサ」を組み合わせると？

現実世界における、デバイスの姿勢を計測できます。

■デバイスの姿勢について

姿勢の表現について

姿勢は、３つの角度パラメータ（オイラー角）で表現されます。

オイラー角なので、絶対的なロール・ピッチ・ヨーを意味しません。

プロパティ名	型	説明
alpha	Number	オイラー角における z 軸を回転軸とした回転量（単位：度数）
beta	Number	オイラー角における x 軸を回転軸とした回転量（単位：度数）
gamma	Number	オイラー角における y 軸を回転軸とした回転量（単位：度数）

オイラー角から現在の姿勢を組み立てる（OpenGL 的な合成順の場合）

デバイスをグローバル座標系の初期位置に配置する

↓

「デバイスのローカル座標系の z 軸」を回転軸にして、alpha 度回転する

↓

「デバイスのローカル座標系の x 軸」を回転軸にして、beta 度回転する

↓

「デバイスのローカル座標系の y 軸」を回転軸にして、gamma 度回転する

↓

「デバイスのローカル座標系の z 軸」を回転軸にして、-(orientation) 度回転する

DeviceOrientationEvent から回転行列を組み立てる（3行4列）


// ------------------------------------------------------------
// DeviceOrientationEvent から ３Ｄマトリックス（3行4列）を生成する関数
// ------------------------------------------------------------
function Matrix34_from_OrientationEvent(event){
	var rz =  (event.alpha || 0) * Math.PI / 180;
	var rx =  (event.beta  || 0) * Math.PI / 180;
	var ry =  (event.gamma || 0) * Math.PI / 180;

	var cz = Math.cos(rz);
	var sz = Math.sin(rz);
	var cx = Math.cos(rx);
	var sx = Math.sin(rx);
	var cy = Math.cos(ry);
	var sy = Math.sin(ry);

	return [
		 cy * cz - sy * sx * sz,
		-cx * sz,
		 sy * cz + cy * sx * sz,
		 0.0,

		 cy * sz + sy * sx * cz,
		 cx * cz,
		 sy * sz - cy * sx * cz,
		 0.0,

		-sy * cx,
		 sx,
		 cy * cx,
		 0.0
	];
}

オイラー角から現在の姿勢を組み立てる（DirectX 的な合成順の場合）

デバイスをグローバル座標系の初期位置に配置する

↓

「デバイスのローカル座標系の z 軸」を回転軸にして、-(orientation) 度回転する

↓

「グローバル座標系の y 軸」を回転軸にして、gamma 度回転する

↓

「グローバル座標系の x 軸」を回転軸にして、beta 度回転する

↓

「グローバル座標系の z 軸」を回転軸にして、alpha 度回転する

DeviceOrientationEvent から回転行列を組み立てる（4行3列）


// ------------------------------------------------------------
// DeviceOrientationEvent から ３Ｄマトリックス（4行3列）を生成する関数
// ------------------------------------------------------------
function Matrix43_from_OrientationEvent(event){
	var ry =  (event.gamma || 0) * Math.PI / 180;
	var rx =  (event.beta  || 0) * Math.PI / 180;
	var rz =  (event.alpha || 0) * Math.PI / 180;

	var cy = Math.cos(ry);
	var sy = Math.sin(ry);
	var cx = Math.cos(rx);
	var sx = Math.sin(rx);
	var cz = Math.cos(rz);
	var sz = Math.sin(rz);

	return [
		 cy * cz - sy * sx * sz,
		 cy * sz + sy * sx * cz,
		-sy * cx,

		-cx * sz,
		 cx * cz,
		 sx,

		 sy * cz + cy * sx * sz,
		 sy * sz - cy * sx * cz,
		 cy * cx,

		 0.0,
		 0.0,
		 0.0
	];
}

上に戻る

デバイスの加速度情報を取得する

加速度ベクトルを取得する（重力加速度を含む）

加速度ベクトルを取得する（重力加速度を含まない）

■加速度ベクトルを取得する（重力加速度を含む）

デバイスのモーション情報を取得する

ondevicemotion イベントを使用します。

このイベントは、定期的に繰り返し発行され続けます。

登録したコールバック関数の引数から、DeviceMotionEvent オブジェクトが得られます。

加速度３Ｄベクトルを取得する（重力加速度を含む）

DeviceMotionEvent.accelerationIncludingGravity プロパティを使用します。

DeviceAcceleration オブジェクトが得られます。

「重力加速度ベクトル」と「慣性力ベクトル」を加算した結果が得られます。

結果は逆ベクトルとなるようです。重力に対して逆方向を指します。

デバイスが、加速度センサをサポートしていない場合、取得できません。

取得例

重力加速度を含む加速度を取得する


<html>
  <body>

    x: <span id="x" ></span> <br>
    y: <span id="y" ></span> <br>
    z: <span id="z" ></span> <br>
    interval:  <span id="interval"  ></span> <br>
    timeStamp: <span id="timestamp" ></span> <br>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 各エレメントを取得する
	// ------------------------------------------------------------
	var element_x = document.getElementById("x");
	var element_y = document.getElementById("y");
	var element_z = document.getElementById("z");
	var element_interval  = document.getElementById("interval");
	var element_timestamp = document.getElementById("timestamp");

	// ------------------------------------------------------------
	// デバイスの現在のモーションを知らせるイベント（繰り返し発行される）
	// ------------------------------------------------------------
	window.addEventListener( "devicemotion" , function (e){

		// ------------------------------------------------------------
		// 各情報を取得する
		// ------------------------------------------------------------
		element_interval.textContent  = e.interval;
		element_timestamp.textContent = e.timeStamp;

		// ------------------------------------------------------------
		// 現在の瞬間的な加速度３Ｄベクトルを取得する（重力加速度を含む）
		// ------------------------------------------------------------
		var vec3d = e.accelerationIncludingGravity;
		element_x.textContent = String( vec3d.x );
		element_y.textContent = String( vec3d.y );
		element_z.textContent = String( vec3d.z );
	});

    //-->
    </script>

  </body>
</html>

■加速度ベクトルを取得する（重力加速度を含まない）

デバイスのモーション情報を取得する

ondevicemotion イベントを使用します。

このイベントは、定期的に繰り返し発行され続けます。

登録したコールバック関数の引数から、DeviceMotionEvent オブジェクトが得られます。

加速度３Ｄベクトルを取得する（重力加速度を含まない）

DeviceMotionEvent.acceleration プロパティを使用します。

DeviceAcceleration オブジェクトが得られます。

結果は逆ベクトルとなるようです。慣性力に対して逆方向を指します。

デバイスが、重力加速度の除去をサポートしていない場合、取得できません。

取得例

重力加速度を含まない加速度を取得する


<html>
  <body>

    x: <span id="x" ></span> <br>
    y: <span id="y" ></span> <br>
    z: <span id="z" ></span> <br>
    interval:  <span id="interval"  ></span> <br>
    timeStamp: <span id="timestamp" ></span> <br>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 各エレメントを取得する
	// ------------------------------------------------------------
	var element_x = document.getElementById("x");
	var element_y = document.getElementById("y");
	var element_z = document.getElementById("z");
	var element_interval  = document.getElementById("interval");
	var element_timestamp = document.getElementById("timestamp");

	// ------------------------------------------------------------
	// デバイスの現在のモーションを知らせるイベント（繰り返し発行される）
	// ------------------------------------------------------------
	window.addEventListener( "devicemotion" , function (e){

		// ------------------------------------------------------------
		// 各情報を取得する
		// ------------------------------------------------------------
		element_interval.textContent  = e.interval;
		element_timestamp.textContent = e.timeStamp;

		// ------------------------------------------------------------
		// 現在の瞬間的な加速度３Ｄベクトルを取得する（重力加速度を含まない）
		// ------------------------------------------------------------
		var vec3d = e.acceleration;
		element_x.textContent = String( vec3d.x );
		element_y.textContent = String( vec3d.y );
		element_z.textContent = String( vec3d.z );
	});

    //-->
    </script>

  </body>
</html>

■現在の画面の向きに合わせて加速度ベクトルを回転する

現在の画面の向きを取得する

window.orientation プロパティを使用します。

単位は、度数です。

z 軸を回転軸にして、３Ｄベクトルを回転する関数


// ------------------------------------------------------------
// z 軸を回転軸にして、３Ｄベクトルを回転する関数
// ------------------------------------------------------------
function Vec3d_rotateZ (vec,rad){
	var cz = Math.cos(rad);
	var sz = Math.sin(rad);
	return {
		x : vec.x * cz - vec.y * sz,
		y : vec.x * sz + vec.y * cz,
		z : vec.z
	};
};

取得例

重力加速度を含まない加速度を取得する


<html>
  <body>

    x: <span id="x" ></span> <br>
    y: <span id="y" ></span> <br>
    z: <span id="z" ></span> <br>
    orientation: <span id="orientation" ></span> <br>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// z 軸を回転軸にして、３Ｄベクトルを回転する関数
	// ------------------------------------------------------------
	function Vec3d_rotateZ (vec,rad){
		var cz = Math.cos(rad);
		var sz = Math.sin(rad);

		return {
			x : vec.x * cz - vec.y * sz,
			y : vec.x * sz + vec.y * cz,
			z : vec.z
		};
	};

	// ------------------------------------------------------------
	// 各エレメントを取得する
	// ------------------------------------------------------------
	var element_x = document.getElementById("x");
	var element_y = document.getElementById("y");
	var element_z = document.getElementById("z");
	var element_o = document.getElementById("orientation");

	// ------------------------------------------------------------
	// デバイスの現在のモーションを知らせるイベント（繰り返し発行される）
	// ------------------------------------------------------------
	window.addEventListener( "devicemotion" , function (e){

		// ------------------------------------------------------------
		// 現在の瞬間的な加速度３Ｄベクトルを取得する（重力加速度を含む）
		// ------------------------------------------------------------
		var acc = e.accelerationIncludingGravity;
		var vec3d = {
			x:(acc.x || 0),
			y:(acc.y || 0),
			z:(acc.z || 0)
		};

		// ------------------------------------------------------------
		// 現在の画面の向きを取得する
		// ------------------------------------------------------------
		var rad = (window.orientation || 0) * (Math.PI / 180);

		// ------------------------------------------------------------
		// z 軸を中心に回転した結果を取得する
		// ------------------------------------------------------------
		vec3d　= Vec3d_rotateZ(vec3d , rad);

		// 出力テスト
		element_x.textContent = String( vec3d.x );
		element_y.textContent = String( vec3d.y );
		element_z.textContent = String( vec3d.z );
		element_o.textContent = String( window.orientation );
	});

    //-->
    </script>

  </body>
</html>

上に戻る

デバイスの姿勢情報を取得する

■デバイスの姿勢情報を取得する

デバイスの姿勢情報を取得する

ondeviceorientation イベントを使用します。

このイベントは、デバイスの姿勢が変化するたびに発行されます。

登録したコールバック関数の引数から、DeviceOrientationEvent オブジェクトが得られます。

DeviceOrientationEvent から得られる情報について

計測不可能な場合、null 値（数値以外）が得られます。

プロパティ名	型	説明
alpha	Number	オイラー角における z 軸を回転軸とした回転量（単位：度数）
beta	Number	オイラー角における x 軸を回転軸とした回転量（単位：度数）
gamma	Number	オイラー角における y 軸を回転軸とした回転量（単位：度数）
absolute	Boolean	現実空間内における（絶対的な）姿勢情報が取得可能であるか

回転行列に変換するには？

こちらで解説しています。

取得例

デバイスの姿勢情報を取得する


<html>
  <body>

    alpha: <span id="alpha" ></span> <br>
    beta:  <span id="beta"  ></span> <br>
    gamma: <span id="gamma" ></span> <br>
    absolute:  <span id="absolute"  ></span> <br>
    timeStamp: <span id="timestamp" ></span> <br>
    orientation: <span id="orientation" ></span> <br>
    <br>
    axisX: <span id="axisx" ></span> <br>
    axisY: <span id="axisy" ></span> <br>
    axisZ: <span id="axisz" ></span> <br>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 各エレメントを取得する
	// ------------------------------------------------------------
	var element_alpha = document.getElementById("alpha");
	var element_beta  = document.getElementById("beta");
	var element_gamma = document.getElementById("gamma");
	var element_absolute  = document.getElementById("absolute");
	var element_timestamp = document.getElementById("timestamp");
	var element_orientation = document.getElementById("orientation");
	var element_axis_x = document.getElementById("axisx");
	var element_axis_y = document.getElementById("axisy");
	var element_axis_z = document.getElementById("axisz");

	// ------------------------------------------------------------
	// デバイスの姿勢が変化するたびに実行されるイベント
	// ------------------------------------------------------------
	window.addEventListener( "deviceorientation" , function (e){

		// ------------------------------------------------------------
		// 各情報を取得する
		// ------------------------------------------------------------
		element_alpha.textContent = String( e.alpha );
		element_beta.textContent  = String( e.beta  );
		element_gamma.textContent = String( e.gamma );
		element_absolute.textContent  = e.absolute;
		element_timestamp.textContent = e.timeStamp;
		element_orientation.textContent = String( window.orientation );

		// ------------------------------------------------------------
		// デバイスの現在の各軸ベクトルを計算する
		// ------------------------------------------------------------
		var ro = -(window.orientation || 0) * Math.PI / 180;
		var ry =  (e.gamma || 0) * Math.PI / 180;
		var rx =  (e.beta  || 0) * Math.PI / 180;
		var rz =  (e.alpha || 0) * Math.PI / 180;
		var co = Math.cos(ro);
		var so = Math.sin(ro);
		var cy = Math.cos(ry);
		var sy = Math.sin(ry);
		var cx = Math.cos(rx);
		var sx = Math.sin(rx);
		var cz = Math.cos(rz);
		var sz = Math.sin(rz);

		// ローカル x 軸ベクトル
		var axisX = {
			x: co * cy * cz - co * sy * sx * sz - so * cx * sz,
			y: co * cy * sz + co * sy * sx * cz + so * cx * cz,
			z:-co * sy * cx + so * sx
		};

		// ローカル y 軸ベクトル
		var axisY = {
			x:-so * cy * cz + so * sy * sx * sz - co * cx * sz,
			y:-so * cy * sz - so * sy * sx * cz + co * cx * cz,
			z: so * sy * cx + co * sx
		};

		// ローカル z 軸ベクトル
		var axisZ = {
			x: sy * cz + cy * sx * sz,
			y: sy * sz - cy * sx * cz,
			z: cy * cx
		};

		// 出力
		element_axis_x.textContent = "(x:" + (axisX.x).toFixed(4) + " y:" + (axisX.y).toFixed(4) + " z:" + (axisX.z).toFixed(4) + ")";
		element_axis_y.textContent = "(x:" + (axisY.x).toFixed(4) + " y:" + (axisY.y).toFixed(4) + " z:" + (axisY.z).toFixed(4) + ")";
		element_axis_z.textContent = "(x:" + (axisZ.x).toFixed(4) + " y:" + (axisZ.y).toFixed(4) + " z:" + (axisZ.z).toFixed(4) + ")";
	});

    //-->
    </script>

  </body>
</html>

上に戻る

デバイスの指す方角を取得する

■デバイスの指す方角を取得する

デバイスの姿勢情報を取得する

こちらで解説しています。

デバイスを水平に寝かせて閲覧している場合

デバイスの +y軸ベクトルが指す方角を計算します。

デバイスの指す方角を取得する（デバイスを水平に寝かせて閲覧している場合）


<html>
  <body>

    axisY(+): <span id="y" ></span> <br>
    angle: <span id="angle" ></span> <br>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 各エレメントを取得する
	// ------------------------------------------------------------
	var element_angle = document.getElementById("angle");
	var element_y = document.getElementById("y");

	// ------------------------------------------------------------
	// デバイスの姿勢が変化するたびに実行されるイベント
	// ------------------------------------------------------------
	window.addEventListener( "deviceorientation" , function (e){

		// ------------------------------------------------------------
		// 現在のデバイスの +y 軸ベクトルを計算する
		// ------------------------------------------------------------
		var ro = -(window.orientation || 0) * Math.PI / 180;
		var ry =  (e.gamma || 0) * Math.PI / 180;
		var rx =  (e.beta  || 0) * Math.PI / 180;
		var rz =  (e.alpha || 0) * Math.PI / 180;
		var co = Math.cos(ro);
		var so = Math.sin(ro);
		var cy = Math.cos(ry);
		var sy = Math.sin(ry);
		var cx = Math.cos(rx);
		var sx = Math.sin(rx);
		var cz = Math.cos(rz);
		var sz = Math.sin(rz);

		var x = -so * cy * cz + so * sy * sx * sz - co * cx * sz;
		var y = -so * cy * sz - so * sy * sx * cz + co * cx * cz;
		var z =  so * sy * cx + co * sx;

		// ------------------------------------------------------------
		// ２軸から角度に変換する
		// ------------------------------------------------------------
		var angle = Math.atan2(-x,y) * (180.0 / Math.PI);

		// ------------------------------------------------------------
		// 出力
		// ------------------------------------------------------------
		element_angle.textContent = angle;
		element_y.textContent = "(x:" + (x).toFixed(4) + " y:" + (y).toFixed(4) + " z:" + (z).toFixed(4) + ")";

	});

    //-->
    </script>

  </body>
</html>

デバイスを垂直に立てて閲覧している場合

デバイスの液晶裏（-z軸ベクトル）が指す方角を計算します。

デバイスの指す方角を取得する（デバイスを垂直に立てて閲覧している場合）


<html>
  <body>

    axisZ(-): <span id="z" ></span> <br>
    angle: <span id="angle" ></span> <br>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 各エレメントを取得する
	// ------------------------------------------------------------
	var element_angle = document.getElementById("angle");
	var element_z = document.getElementById("z");

	// ------------------------------------------------------------
	// デバイスの姿勢が変化するたびに実行されるイベント
	// ------------------------------------------------------------
	window.addEventListener( "deviceorientation" , function (e){

		// ------------------------------------------------------------
		// 現在のデバイスの -z 軸ベクトルを計算する
		// ------------------------------------------------------------
		var ry =  (e.gamma || 0) * Math.PI / 180;
		var rx =  (e.beta  || 0) * Math.PI / 180;
		var rz =  (e.alpha || 0) * Math.PI / 180;
		var cy = Math.cos(ry);
		var sy = Math.sin(ry);
		var cx = Math.cos(rx);
		var sx = Math.sin(rx);
		var cz = Math.cos(rz);
		var sz = Math.sin(rz);

		var x = -(sy * cz + cy * sx * sz);
		var y = -(sy * sz - cy * sx * cz);
		var z = -(cy * cx);

		// ------------------------------------------------------------
		// ２軸から角度に変換する
		// ------------------------------------------------------------
		var angle = Math.atan2(-x,y) * (180.0 / Math.PI);

		// ------------------------------------------------------------
		// 出力
		// ------------------------------------------------------------
		element_angle.textContent = angle;
		element_z.textContent = "(x:" + (x).toFixed(4) + " y:" + (y).toFixed(4) + " z:" + (z).toFixed(4) + ")";

	});

    //-->
    </script>

  </body>
</html>

上に戻る

デバイスの回転速度を取得する

■回転速度を取得する

デバイスのモーション情報を取得する

ondevicemotion イベントを使用します。

このイベントは、定期的に繰り返し発行され続けます。

登録したコールバック関数の引数から、DeviceMotionEvent オブジェクトが得られます。

回転速度を取得する

DeviceMotionEvent.rotationRate プロパティを参照します。

DeviceRotationRate オブジェクトが得られます。

デバイスが、角速度の計測をサポートしていない場合、取得できません。

デバイスのローカル座標系を基準としたオイラー角です。

取得例

回転速度を取得する


<html>
  <body>

    alpha(yaw):  <span id="alpha" ></span> <br>
    beta(pitch): <span id="beta"  ></span> <br>
    gamma(roll): <span id="gamma" ></span> <br>
    interval:  <span id="interval"  ></span> <br>
    timeStamp: <span id="timestamp" ></span> <br>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 各エレメントを取得する
	// ------------------------------------------------------------
	var element_alpha = document.getElementById("alpha");
	var element_beta  = document.getElementById("beta");
	var element_gamma = document.getElementById("gamma");
	var element_interval  = document.getElementById("interval");
	var element_timestamp = document.getElementById("timestamp");

	// ------------------------------------------------------------
	// デバイスの現在のモーションを知らせるイベント（繰り返し発行される）
	// ------------------------------------------------------------
	window.addEventListener( "devicemotion" , function (e){

		// ------------------------------------------------------------
		// 各情報を取得する
		// ------------------------------------------------------------
		element_interval.textContent  = e.interval;
		element_timestamp.textContent = e.timeStamp;

		// ------------------------------------------------------------
		// 回転速度を取得する
		// ------------------------------------------------------------
		var angle = e.rotationRate;
		element_alpha.textContent = String( angle.alpha );
		element_beta.textContent  = String( angle.beta  );
		element_gamma.textContent = String( angle.gamma );
	});

    //-->
    </script>

  </body>
</html>

上に戻る

地磁気センサの較正が必要になったか検出する

■地磁気センサのキャリブレーションが必要になったか調べる

oncompassneedscalibration イベントを使用します。

使用例

磁気センサにキャリブレーションが必要であるかを検出する（イベントプロパティの場合）


// ------------------------------------------------------------
// 地磁気センサのキャリブレーションが必要になった際に実行されるイベント
// ------------------------------------------------------------
window.oncompassneedscalibration = function (e){

};

磁気センサにキャリブレーションが必要であるかを検出する（イベントリスナーの場合）


// ------------------------------------------------------------
// 地磁気センサのキャリブレーションが必要になった際に実行されるイベント
// ------------------------------------------------------------
window.addEventListener( "compassneedscalibration" , function (e){

});

上に戻る

DeviceMotionEvent について

■ DeviceMotionEvent インターフェースについて

■ DeviceMotionEvent のプロパティについて

■ DeviceMotionEvent インターフェースについて

DeviceMotionEvent には、加速度センサから得られる情報が格納されます。

DeviceMotionEvent インターフェースの派生について

Event

↓派生

DeviceMotionEvent

■ DeviceMotionEvent のプロパティについて

プロパティ名	型	説明
accelerationIncludingGravity	DeviceAcceleration	現在の瞬間的な加速度３Ｄベクトルが得られる。（重力加速度と慣性力を加算した結果）（デバイスのローカル座標系）
acceleration	DeviceAcceleration	現在の瞬間的な加速度３Ｄベクトルが得られる。（純粋な慣性力のみが得られる）（デバイスのローカル座標系）
rotationRate	DeviceRotationRate	回転速度が得られる。（オイラー角）（単位は毎秒度 deg/s）
interval	Number	繰り返しイベントが発行される時間隔（単位：ミリ秒）

■ DeviceAcceleration オブジェクトについて

プロパティ名	型	説明
x	Number	x 座標成分（単位は m/s2）（デバイスのローカル座標系）（取得不可能な場合 null）
y	Number	y 座標成分（単位は m/s2）（デバイスのローカル座標系）（取得不可能な場合 null）
z	Number	z 座標成分（単位は m/s2）（デバイスのローカル座標系）（取得不可能な場合 null）

■ DeviceRotationRate オブジェクトについて

プロパティ名	型	説明
alpha	Number	ヨーイングの回転速度。（デバイスの z 軸が回転軸）（取得不可能な場合 null）
beta	Number	ピッチングの回転速度。（デバイスの x 軸が回転軸）（取得不可能な場合 null）
gamma	Number	ローリングの回転速度。（デバイスの y 軸が回転軸）（取得不可能な場合 null）

上に戻る