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

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 の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的非標準
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 62
補足 無効
完全対応 62
補足 無効
補足 See bug 1462308.
無効 From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 22 — 61
補足
補足 Not supported for MacBook with Touch Bar and Windows 7 (see bug 754199).
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 62
補足 無効
完全対応 62
補足 無効
補足 See bug 1462308.
無効 From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 15 — 61
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
value
実験的非標準
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 62
補足 無効
完全対応 62
補足 無効
補足 See bug 1462308.
無効 From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 22 — 61
補足
補足 Not supported for MacBook with Touch Bar and Windows 7 (see bug 754199).
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 62
補足 無効
完全対応 62
補足 無効
補足 See bug 1462308.
無効 From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 15 — 61
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

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

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