10年以上前

デバイスのバッテリー情報を取得できる「Battery Status API」

スマホをはじめとする端末のバッテリー情報を、JavaScriptを使って取得する方法を紹介します。この「Battery Status API」は対応していないブラウザもあるので注意してください。

アクセス時点でのバッテリー情報を取得しよう

以下のサンプルは、アクセスしてきた時点のバッテリー情報を取得し表示します。

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>このページにアクセスした時点でのバッテリー情報を取得するサンプル</title>

<h1>このページにアクセスした時点でのバッテリー情報</h1>
<ul>
  <li>バッテリー残量(%)：<span id="level"></span>[%]
  <li>バッテリー残量(秒):<span id="dischargingTime"></span>[s]
  <li>充電中(true/false):<span id="charging"></span>
  <li>充電完了までの時間:<span id="chargingTime"></span>[s]
</ul>

<script>
navigator.getBattery().then(function(battery) {
  document.getElementById('level').innerHTML = battery.level;
  document.getElementById('charging').innerHTML = battery.charging;
  document.getElementById('chargingTime').innerHTML = battery.chargingTime;
  document.getElementById('dischargingTime').innerHTML = battery.dischargingTime;
});
</script>

navigatorオブジェクトにgetBattery()メソッドを繋げることで、BatteryManagerというオブジェクトが作成され、そこからバッテリー情報を取得することが出来ます。navigator.getBattery()の部分で得られるPromise(非同期処理に特化した格納箱)の中身を見てみましょう。

ここに格納されている関数などをthenメソッドを使って実行可能にし、thenメソッドの中でこれらの関数を実行すれば値が取得できます。PromiseはArrayと違って、thenメソッドで値を取得することに注意してください。

リアルタイムのバッテリー情報を取得しよう

バッテリー残量や充放電によって常に情報は変化し続けていますが、このリアルタイム情報を取得するにはイベントを使います。
・chargingchange - 充電(ON/OFF)によって発火
・chargingtimechange - 残りの充電時間が変化したときに発火
・dischargingtimechange - 残りのバッテリー時間が変化したときに発火
・levelchange - バッテリー残量が変化したときに発火

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>リアルタイムのバッテリー情報を取得するサンプル</title>

<h1>リアルタイムのバッテリー情報</h1>
<ul>
  <li>充電中(true/false):<span id="charging"></span>
  <li>バッテリー残量(%)：<span id="level"></span>[%]
  <li>バッテリー残量(秒):<span id="dischargingTime"></span>[s]
  <li>充電完了までの時間:<span id="chargingTime"></span>[s]
</ul>

<script>
navigator.getBattery().then(function(battery) {
  
  //充電(ON/OFF)によって発火
  battery.onchargingchange = function(){
    document.getElementById('charging').innerHTML = battery.charging;
  }

  //バッテリー残量が変化したときに発火
  battery.onlevelchange = function(){
    document.getElementById('level').innerHTML = battery.level;
  }

  //残りの充電時間が変化したときに発火
  battery.ondischargingtimechange = function(){
    document.getElementById('dischargingTime').innerHTML = battery.dischargingTime;
  }

  //残りのバッテリー時間が変化したときに発火
  battery.onchargingtimechange = function(){
    document.getElementById('chargingTime').innerHTML = battery.chargingTime;
  }
});
</script>

参考

・Battery Status API - W3C
・対応状況 - Can I use...

執筆者

AnTytle

他の記事

オススメ