We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

概要

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

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] 未サポート 未サポート 未サポート
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
DeviceLightEvent 未サポート 未サポート 15.0 (15.0)[1] 未サポート 未サポート 未サポート

[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 を参照)。

関連情報

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

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