照度センサー [明るさ]

照度センサーとは、明るさを検知するセンサーです。屋内・屋外でスマートフォンを使用する際に、環境光にあわせてディスプレイを適切な輝度に調整するために搭載されています。端末によって設置位置が異なりますがディスプレイ上部に設置されていることが多いようです。HTML5のAmbientLight Event でアクセスできます。残念ながらFirefoxのみの対応となっています。(2016年5月18日時点)

以下にデモを用意しました。環境光をルクス(lux)という照度の単位で取得します。明るいほど円が大きくなります。

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

下記のようにJavaScriptでwindowオブジェクトに対してdevicelightイベントを監視することで照度(0〜)を取得できます。

// AmbientLight Event
window.addEventListener("devicelight", devicelightHandler);

// 照度が変化
function devicelightHandler(event) {
	var lux = event.value;
}

近接センサー [距離]

近接センサーとは、検知範囲に物体が存在するか否かを検知できるセンサーです。スマートフォンで電話する際に画面が顔に接近して不意にタップしてしまわないようにディスプレイを一時的にOFFにするなどの制御を行うために設置されています。照度センサーと同じくディスプレイ上部に設置されていることが多いようです。HTML5のProximity Eventでアクセスできます。こちらも[DeviceMotion Event]同様Firefoxのみの対応となっています。(2016年5月18日時点)

以下にデモを用意しました。スマートフォンの近接センサーが設置されている箇所に手をかざすとアニメーションします。

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

下記のようにJavaScriptでwindowオブジェクトに対してdeviceproximityイベントを監視することで[0 : センサーの検知範囲に物体がある]と[1 : センサーの検知範囲に物体はない]の2パターンの値を取得できます。

// Proximity Event
window.addEventListener("deviceproximity", deviceproximityHandler);

// 検知範囲の状況が変化
function deviceproximityHandler(event) {
	if (!event.value) {
		// センサーの検知範囲に物体がある
		showKin();
	} else {
		// センサーの検知範囲に物体はない
		showEn();
	}
}

最後に

多彩なセンサーにアクセスする方法がスマートフォンブラウザでのHTML5に十分に備わっていることは驚きではないでしょうか。

スマートフォンのセンサーを制御するコツとしては、センサーから取得した値には誤差があるということを前提に実装を進めるべきだということです。例えば、GPSセンサーから取得した位置情報をもとに周囲の飲食店を検索するとします。屋内や高層ビル群の中ですとGPSセンサーの通信に影響を与えてしまい実際の位置と誤差が発生してしまうことがあります。ですので「住所」というクリティカルな情報ではなく「◯◯周辺」というざっくりとした情報で検索することが安心かと思います。

ご紹介したアクチュエーター・センサーの他にもNFCがW3Cの草案に上がっているなどアクセスできる範囲はさらに広がっていくことでしょう。私個人の願いですがLeap Motionなどのセンサーがスマートフォンに搭載されようになると映画で見ていた世界にまた一歩近づけるのではないかと楽しみにしています。Webサイトにこれら多彩なセンサーの制御をアクセントとして取り入れることで、今までに見たことのないコンテンツを作れるかもしれません。