Ambient Light Events

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');
}

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• DeviceLightEvent
• devicelight