これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

Light Event

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

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

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

window.addEventListener('devicelight', function(event) {
  var html = document.getElementsByTagName('html')[0];

  if (event.value < 50) {
    html.classList.add('darklight');
    html.classList.remove('brightlight');
  } else {
    html.classList.add('brightlight');
    html.classList.remove('darklight');
  }
});

仕様

仕様書 策定状況 コメント
Ambient Light Sensor
Ambient Light Events の定義
草案 最初の定義

ブラウザー実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
DeviceLightEvent 未サポート 22.0 (22.0)[1][2] 未サポート 未サポート 未サポート
機能 Android Android 版 Chrome Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
DeviceLightEvent 未サポート support 15.0 (15.0)[1][2] 未サポート 未サポート 未サポート

[1] devicelight イベントは、Android 版 Firefox Mobile (15.0) および Firefox OS (B2G) で実装およびデフォルトで有効化設定されています。Gecko 22.0 (Firefox 22.0 / Thunderbird 22.0 / SeaMonkey 2.19) より、Mac OS X 向けのデスクトップ実装も使用できます。Windows 7 のサポートは進行中です (バグ 754199 を参照)。

[2] このイベントは Firefox 60 で、設定項目 device.sensors.ambientLight.enabled によりデフォルトで無効になりました (バグ 1359076)。

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: yyss
最終更新者: yyss,