Ambient Light Events

Experimental

これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

ambient light event は、光の強さの変化をウェブページやアプリケーションに気づかせるのに便利な手段です。これによりユーザーインターフェイスのコントラストを変えたり写真を撮るために必要な露出時間を変えたりするなど、ウェブページやアプリケーションが光量の変化に対応できるようになります。

Light Event

端末の光センサーが光量の変化を検出すると、それをブラウザーに通知します。ブラウザーがその通知を受け取ると、正確な光の強度に関する情報を提供する DeviceLightEvent イベントを発生させます。

このイベントは addEventListener メソッド (イベント名 devicelight を使用) を使用するか、イベントハンドラーを window.ondevicelight プロパティに接続することにより、 window オブジェクトレベルで取得できます。

イベントを取得するとイベントオブジェクトの DeviceLightEvent.value プロパティを通して、ルクスで表した照度にアクセスできます。

if ('ondevicelight' in window) {
  window.addEventListener('devicelight', function(event) {
    var body = document.querySelector('body');
    if (event.value < 50) {
      body.classList.add('darklight');
      body.classList.remove('brightlight');
    } else {
      body.classList.add('brightlight');
      body.classList.remove('darklight');
    }
  });
} else {
  console.log('devicelight event not supported');
}

仕様書

仕様書 状態 備考
Ambient Light Sensor
Ambient Light Events の定義
勧告候補 初回定義

ブラウザーの対応

BCD tables only load in the browser

関連情報