デバイスのバッテリー情報を取得できる「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(非同期処理に特化した格納箱)の中身を見てみましょう。<br>
ここに格納されている関数などをthenメソッドを使って実行可能にし、thenメソッドの中でこれらの関数を実行すれば値が取得できます。PromiseはArrayと違って、thenメソッドで値を取得することに注意してください。
リアルタイムのバッテリー情報を取得しよう
<!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>
参考
執筆者Writer
AnTytle
コメントComment