---
title: Ambient Light Events
slug: WebAPI/Using_Light_Events
tags:
  - Ambient Light
translation_of: Web/API/Ambient_Light_Events
---
<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div>

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

<h2 id="Light_Events" name="Light_Events">Light Event</h2>

<p>端末の光センサーが光量の変化を検出すると、それをブラウザーに通知します。ブラウザーがその通知を受け取ると、正確な光の強度に関する情報を提供する {{domxref("DeviceLightEvent")}} イベントを発生させます。</p>

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

<p>イベントを取得するとイベントオブジェクトの {{domxref("DeviceLightEvent.value")}} プロパティを通して、{{interwiki("wikipedia", "ルクス")}}で表した照度にアクセスできます。</p>

<h2 id="Example" name="Example">例</h2>

<pre class="brush: js">if ('ondevicelight' in window) {
  window.addEventListener('devicelight', function(event) {
    var body = document.querySelector('body');
    if (event.value &lt; 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');
}
</pre>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("AmbientLight", "", "Ambient Light Events")}}</td>
   <td>{{Spec2("AmbientLight")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

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

<p>{{Compat("api.DeviceLightEvent")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{domxref("DeviceLightEvent")}}</li>
 <li>{{event("devicelight")}}</li>
</ul>