10年以上前

周囲の明るさをリアルタイムに取得できる「Ambient Light API」

スマートフォンをはじめとするあらゆるデバイスには、周囲の明るさを計測する環境光センサーが搭載されています。このセンサーが計測した値をJavaScriptで取得する方法を紹介します。対応ブラウザは2015年6月現在、Firefoxのみとなっているので注意してください。

明るさの値をリアルタイムに取得しよう

以下のサンプルは、リアルタイムに明るさの値を取得します。devicelightというイベントは、1ルクス変化するごとに発火します。値は関数の引数eventにvalueを繋げて取得します。

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>環境光センサー値をリアルタイムに取得するサンプル</title>

<h1>環境光センサー値をリアルタイムに取得する</h1>
<p>現地点の周囲の明るさ:<span id="ambientlight"></span>ルクス

<script>
window.addEventListener('devicelight', function(event){
  document.getElementById('ambientlight').innerHTML = event.value; //event.valueで値を取得
});
</script>

明るさの単位はルクス(lx)で表します。値の目安は「照度活用のための明るさについて - みてるくん」を引用させて頂きます。

屋外快晴時100,000
屋外雲天時30,000
百貨店売場750
居間200
寝室30
満月の夜0.2
闇夜0.007

参考

・Ambient Light Events - W3C
・対応状況 - Can I use...

執筆者

AnTytle

他の記事

オススメ