ジャイロセンサー [傾き]

シャイロセンサーとは、傾き(回転)を検出するセンサーです。ユーザーがスマートフォンを縦・横のどちらかで使用しているのかを検知してディスプレイを縦・横向きに切り替えるなどの制御を行うために設置されています。HTML5のDeviceOrientation Eventでアクセスできます。下図でサポート状況が黄緑色になっているのは、DeviceOrientationに含まれる方角を取得するCompassNeedsCalibration Eventなどが一部ブラウザでしかサポートされておらず完全サポートには至っていないためです。(2016年5月18日時点)

以下にデモを用意しました。端末を傾けると中央の画像も連動して傾きます。

※こちらの動画はXperia Z、Firefoxで撮影しています。

X・Y・Z軸の値を取得するためには下記のようにJavaScriptでwindowオブジェクトに対してdeviceorientationイベントを監視します。

// DeviceOrientation Event
window.addEventListener("deviceorientation", deviceorientationHandler);

// ジャイロセンサーの値が変化
function deviceorientationHandler(event) {
	// X軸
	var beta = event.beta;
	// Y軸
	var gamma = event.gamma;
	// Z軸
	var alpha = event.alpha;
}

ジャイロセンサー [方角]

ジャイロセンサーは傾きの他に方角を取得できます。iOS 5以上のSafariではevent.webkitCompassHeadingパラメーターから取得できますが、その他の環境ではサポートされていません。ジャイロセンサーにアクセスできる全ての環境で方角を取得したい場合は、W3Cの記事「DeviceOrientation Event Specification」にて公開されている、ジャイロセンサーで取得した傾きから方角を算出するロジックを用いることで取得できます。以下のデモでは、そのロジックを使って方位磁石を実装しました。

以下のソースコードで方角を0〜360度の数値で取得します。0度は北、90度は東、180度は南、270度は西となります。

function getCompassHeading(alpha, beta, gamma) {
	var degtorad = Math.PI / 180;

	var _x = beta ? beta * degtorad : 0;
	var _y = gamma ? gamma * degtorad : 0;
	var _z = alpha ? alpha * degtorad : 0;

	var cY = Math.cos(_y);
	var cZ = Math.cos(_z);
	var sX = Math.sin(_x);
	var sY = Math.sin(_y);
	var sZ = Math.sin(_z);

	var Vx = -cZ * sY - sZ * sX * cY;
	var Vy = -sZ * sY + cZ * sX * cY;

	var compassHeading = Math.atan(Vx / Vy);

	if (Vy < 0) {
		compassHeading += Math.PI;
	}
	else if (Vx < 0) {
		compassHeading += 2 * Math.PI;
	}

	return compassHeading * ( 180 / Math.PI );
}

加速度センサー [慣性]

加速度センサーとは、一定時間の間に速度がどの方向にどれだけ変化したかを検出するセンサーです。スマートフォンではXYZの3方向が検出できる3軸加速度センサーが主流となっています。使い道として、スマートフォンが落下して物体に衝突したことなどを検知できます。HTML5のDeviceMotion Eventでアクセスできます。サポート状況は[DeviceOrientation Event]でご紹介した図とおなじになります。

以下にデモを用意しました。スマートフォンを地面に対して垂直に持ち上下左右に振るとその方向へ矢印がアニメーションします。

※こちらの動画はXperia Z、Firefoxで撮影しています。

X・Y・Z軸の値を取得するためには下記のようにJavaScriptでwindowオブジェクトに対してdevicemotionイベントを監視します。

// DeviceMotion Event
window.addEventListener("devicemotion", devicemotionHandler);

// 加速度が変化
function devicemotionHandler(event) {
	// 加速度
	// X軸
	var x = event.acceleration.x;
	// Y軸
	var y = event.acceleration.y;
	// Z軸
	var z = event.acceleration.z;
}

次のページでは、照度センサーで周辺の明るさを、近接センサーで検知範囲に物体が存在するか否かを検知する方法を解説します。