JavaScript プログラミング講座

 

DeviceOrientation Event について

 


■ DeviceOrientation Event について

 
DeviceOrientation Event とは?
 
デバイスの加速度や姿勢情報を調べることができます。
 
モバイル向けの機能です。
 
 
加速度の計測には、「加速度センサ」が必要となります。
 
姿勢の計測には、「加速度センサ」と「地磁気センサ」が必要となるようです。
 

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

 
デバイス液晶平面の右方向は、+x 軸です。
 
デバイス液晶平面の左方向は、-x 軸です。
 
デバイス液晶平面の上方向は、+y 軸です。
 
デバイス液晶平面の下方向は、-y 軸です。
 
デバイス液晶平面の手前方向は、+z 軸です。
 
デバイス液晶平面の奥行方向は、-z 軸です。
 
ローカル座標系は、画面の見た目の向きに合わせて、自動的に切り替わる事はありません。
 
window.orientation プロパティを参考に、自前で補正する必要があります。
 

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

 
現実世界の東方向は、+x 軸です。
 
現実世界の西方向は、-x 軸です。
 
現実世界の北方向は、+y 軸です。
 
現実世界の南方向は、-y 軸です。
 
現実世界の真上方向は、+z 軸です。
 
現実世界の真下方向は、-z 軸です。
 


 

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

 


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

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

■重力加速度について

 
重力加速度とは?
 
現実世界において、真下方向に常に働き続ける力です。
 
得られる長さの単位について
 
デバイスが静止している場合、約 9.8 という長さの3Dベクトルが得られます。
 
標準重力加速度は 9.80665 m/s2 と規定されています。
 
重力加速度を計測できない場合
 
デバイスが自由落下中である場合、重力加速度は計測できません。
 

■慣性力について

 
慣性力とは?
 
運動する物体に同乗した観測者から見て、発生したように見える力です。
 
遠心力を計測する
 
デバイスを手に持って、円状に振り回します。
 
回転運動を行っている間は、外側に向かって遠心力が常に働き続けます。
 
例えば、窓の無い車に乗って、左向きに急カーブしたとします。
 
同乗する観測者にとっては、静止していた運転者が、急に右側に吹っ飛んだように見えます。
 
加速移動を計測する
 
デバイスを手に持って、突きの操作を開始します。
 
静止している物体は、止まり続けようとする力が働きます。
 
例えば、窓の無い車に乗って、急発進したとします。
 
同乗する観測者にとっては、静止していた運転者が、急に後方に吹っ飛んたように見えます。
 
減速移動を計測する
 
デバイスを手に持って、突きの操作を行い、ピタリと止めます。
 
移動している物体は、移動し続けようとする力が働きます。
 
例えば、窓の無い車に乗って、急ブレーキをかけたとします。
 
同乗する観測者にとっては、静止していた運転者が、急に前方に吹っ飛んだように見えます。
 
慣性力を計測できない場合
 
テバイスを手に持って、等速で移動させます。
 
等速移動中は、慣性力は発生しません。
 
例えば、窓の無い車に乗って、同じ速度で運転し続けたとします。
 
同乗する観測者にとっては、運転者は静止し続けているように見えます。
 

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

 
重力加速度を計測できると、現実世界の真下方向が判明します。
 
これによりデバイスが、真下方向に対して、どれだけ傾いてるかが計算できます。
 
方角が不明な場合、デバイスの姿勢までは判別できません。
 
方角を知るには、地磁気センサが必要です。
 


 

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

 


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

 
「地磁気センサ」で計測できる方向について
 
現実世界における、北方向を計測できます。
 
「加速度センサ」と「地磁気センサ」を組み合わせると?
 
現実世界における、デバイスの姿勢を計測できます。
 

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

 
姿勢の表現について
 
姿勢は、3つの角度パラメータ(オイラー角)で表現されます。
 
オイラー角なので、絶対的なロール・ピッチ・ヨーを意味しません。
 
プロパティ名説明
alphaNumberオイラー角における z 軸を回転軸とした回転量(単位:度数)
betaNumberオイラー角における x 軸を回転軸とした回転量(単位:度数)
gammaNumberオイラー角における y 軸を回転軸とした回転量(単位:度数)
 
オイラー角から現在の姿勢を組み立てる(OpenGL 的な合成順の場合)
 
デバイスをグローバル座標系の初期位置に配置する
 
 
「デバイスのローカル座標系の z 軸」を回転軸にして、alpha 度回転する
 
 
「デバイスのローカル座標系の x 軸」を回転軸にして、beta 度回転する
 
 
「デバイスのローカル座標系の y 軸」を回転軸にして、gamma 度回転する
 
 
「デバイスのローカル座標系の z 軸」を回転軸にして、-(orientation) 度回転する
 
DeviceOrientationEvent から回転行列を組み立てる(3行4列)

// ------------------------------------------------------------
// DeviceOrientationEvent から 3Dマトリックス(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 から 3Dマトリックス(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 オブジェクトが得られます。
 
加速度3Dベクトルを取得する(重力加速度を含む)
 
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;

		// ------------------------------------------------------------
		// 現在の瞬間的な加速度3Dベクトルを取得する(重力加速度を含む)
		// ------------------------------------------------------------
		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 オブジェクトが得られます。
 
加速度3Dベクトルを取得する(重力加速度を含まない)
 
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;

		// ------------------------------------------------------------
		// 現在の瞬間的な加速度3Dベクトルを取得する(重力加速度を含まない)
		// ------------------------------------------------------------
		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 軸を回転軸にして、3Dベクトルを回転する関数
 
z 軸を回転軸にして、3Dベクトルを回転する関数

// ------------------------------------------------------------
// z 軸を回転軸にして、3Dベクトルを回転する関数
// ------------------------------------------------------------
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 軸を回転軸にして、3Dベクトルを回転する関数
	// ------------------------------------------------------------
	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){

		// ------------------------------------------------------------
		// 現在の瞬間的な加速度3Dベクトルを取得する(重力加速度を含む)
		// ------------------------------------------------------------
		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 値(数値以外)が得られます。
 
プロパティ名説明
alphaNumberオイラー角における z 軸を回転軸とした回転量(単位:度数)
betaNumberオイラー角における x 軸を回転軸とした回転量(単位:度数)
gammaNumberオイラー角における y 軸を回転軸とした回転量(単位:度数)
absoluteBoolean現実空間内における(絶対的な)姿勢情報が取得可能であるか
 
回転行列に変換するには?
 
こちらで解説しています。
 
取得例
 
デバイスの姿勢情報を取得する

<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;

		// ------------------------------------------------------------
		// 2軸から角度に変換する
		// ------------------------------------------------------------
		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);

		// ------------------------------------------------------------
		// 2軸から角度に変換する
		// ------------------------------------------------------------
		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 のプロパティについて

 
プロパティ名説明
accelerationIncludingGravityDeviceAcceleration現在の瞬間的な加速度3Dベクトルが得られる。
(重力加速度と慣性力を加算した結果)
(デバイスのローカル座標系)
accelerationDeviceAcceleration現在の瞬間的な加速度3Dベクトルが得られる。
(純粋な慣性力のみが得られる)
(デバイスのローカル座標系)
rotationRateDeviceRotationRate回転速度が得られる。
(オイラー角)
(単位は毎秒度 deg/s)
intervalNumber繰り返しイベントが発行される時間隔(単位:ミリ秒)
 

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

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

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

 
プロパティ名説明
alphaNumberヨーイングの回転速度。(デバイスの z 軸が回転軸)(取得不可能な場合 null)
betaNumberピッチングの回転速度。(デバイスの x 軸が回転軸)(取得不可能な場合 null)
gammaNumberローリングの回転速度。(デバイスの y 軸が回転軸)(取得不可能な場合 null)
 

 
 

DeviceOrientationEvent について

 
 


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

 
DeviceOrientationEvent には、加速度センサから得られる情報が格納されます。
 
DeviceOrientationEvent インターフェースの派生について
 
 

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

 
プロパティ名説明
alphaNumberオイラー角における z 軸を回転軸とした回転量(単位:度数)(取得不可能な場合 null)
betaNumberオイラー角における x 軸を回転軸とした回転量(単位:度数)(取得不可能な場合 null)
gammaNumberオイラー角における y 軸を回転軸とした回転量(単位:度数)(取得不可能な場合 null)
absoluteBoolean現実空間内における(絶対的な)姿勢情報が取得可能であるか