Webでバッテリー情報を取得する方法

(Sample)

今回は「Webブラウザでデバイスのバッテリー状態を取得する方法」について解説します。
「え？Webからバッテリーって見れるの？」と驚く方も多いと思います。
実は、Battery Status API（バッテリーステータスAPI）という仕組みを使えば、バッテリー残量や充電中かどうかなどの情報をJavaScriptで取得できるんです。

この記事では、コードを丁寧に分解しながら、使い方や仕組み、注意点までしっかり説明します！

このコードでできること

まずはざっくりとこのサンプルの動作を確認しましょう。

✅ このページでできること：

• デバイスのバッテリー残量（%）を表示
• 充電中かどうかをリアルタイムに表示
• 残量や状態が変化したときに、自動で更新！

Battery Status APIってなに？

Battery Status API は、ユーザーの端末（スマートフォン、ノートPCなど）のバッテリー情報を取得できるブラウザAPIです。

取得できる主な情報は以下の通り：

コードをやさしく分解！

ここからは、実際のコードをステップごとに説明していきます。

バッテリーオブジェクトの取得

navigator.getBattery().then(battery => { ... });

• navigator.getBattery() は Promise（非同期処理） を返します。
• .then(...) の中で、バッテリー情報を含むオブジェクト battery を受け取ります。

簡単に言うと、「ブラウザにバッテリー情報をくれ」とお願いして、それが返ってくるのを待つ、という流れです。

残量と充電状態を表示する関数

function updateBatteryStatus() {
  document.getElementById('batteryStatus').textContent = `
    バッテリー残量: ${(battery.level * 100).toFixed(0)}%
    充電中: ${battery.charging ? 'はい' : 'いいえ'}
  `;
}

• battery.level は0〜1の値なので、× 100 でパーセンテージに変換。
• toFixed(0) は小数点以下を0桁にして整数表示に。
• battery.charging が true なら「はい」、そうでなければ「いいえ」と表示。

バッテリー状態の変化を検知する

battery.addEventListener('chargingchange', updateBatteryStatus);
battery.addEventListener('levelchange', updateBatteryStatus);

• chargingchange：充電が始まった／終わった時
• levelchange：バッテリー残量が変化した時

この2つのイベントを監視することで、リアルタイムに表示を更新できます！

対応ブラウザと注意点

✅ 対応しているブラウザ：

• Google Chrome（ただしセキュリティのため制限あり）
• Edge
• Firefox（※一部旧バージョンのみ）
• Safari（非対応）

⚠ 注意点：

• HTTPSが必須（HTTPでは動作しません）
• セキュリティ上、将来的に廃止される可能性もある
• 一部端末では常に100%と表示されるなど、信頼性に欠けることも

最近のブラウザは「ユーザーのプライバシー保護」を優先するため、このAPIの使用が制限されている場合があります。

応用アイデア：バッテリーに応じてUI変更！

このバッテリー情報は、ただ表示するだけでなく、Webページの見た目や動作を変えることにも使えます。

例：

if (battery.level < 0.2 && !battery.charging) {
    alert("バッテリー残量が少ないです。省電力モードに切り替えます。");
    document.body.style.backgroundColor = "#333";
    document.body.style.color = "#fff";
}

こうすることで、**「バッテリーが少ないときに軽量モードに切り替える」**といったUX向上の工夫が可能になります！

今後の学習の指針

このBattery Status APIの学習を通じて、次のようなステップアップがオススメです！

1. 他のWeb APIを触ってみよう！
   • Geolocation API（位置情報）
   • Notification API（通知）
   • DeviceOrientation API（傾き）
2. 非同期処理（Promiseやasync/await）をマスターしよう
   • 今回の .then(...) のような書き方は、Web開発で頻出です！
3. イベントハンドリングを深く理解しよう
   • addEventListener の使い方をしっかり覚えると、インタラクティブなUIが作れるようになります！

バッテリーの状態という身近な情報から、JavaScriptの奥深さを体験していただけたと思います。
小さなコードでも「実用的で学びが多い」ものって、意外とたくさんあります！