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