Web Bluetooth APIでアプリとバイスと連携する方法

最終更新日: 2024-11-16
Web Bluetooth APIでアプリとバイスと連携する方法
目次

Bluetooth技術は、日常生活で欠かせない存在になっている。スマートウォッチやフィットネストラッカー、スマートホームデバイスなどがその一例だ。今回紹介するWeb Bluetooth APIは、ウェブアプリケーションから直接Bluetoothデバイスとやり取りできる強力なツールだ。このAPIを使えば、ウェブアプリでのデバイス連携がより簡単かつ便利になる。

この記事では、Web Bluetooth APIの基本から具体的な使用例、そして実際の実装例までを詳しく解説する。

Web Bluetooth APIとは？

Web Bluetooth APIは、ウェブブラウザからBluetoothデバイスにアクセスしてデータをやり取りするためのAPIだ。これを使えば、ユーザーが所有するBluetoothデバイスとウェブアプリが直接通信できる。たとえば、フィットネストラッカーからデータを読み取ったり、スマートホームデバイスを操作することが可能になる。

なぜBluetoothが重要か

Bluetoothは、短距離無線通信を利用してデバイス同士を接続する技術だ。これにより、ケーブルなしでデータをやり取りでき、利便性が高い。

短距離無線通信とは

短距離無線通信とは、物理的に近い距離（通常数メートルから数十メートル以内）にあるデバイス間でデータを無線でやり取りする技術だ。これにより、デバイス同士をケーブルで接続する必要がなく、利便性が高まる。Bluetoothは、この通信技術の代表例であり、スマートフォン、タブレット、スマートウォッチなどさまざまなデバイスで広く使われている。

Web Bluetooth APIの使用例

健康デバイスとの連携

フィットネストラッカーや心拍計との連携がWeb Bluetooth APIの典型的な使用例だ。たとえば、ユーザーがフィットネストラッカーを使って運動データを記録し、そのデータをウェブアプリで可視化することができる。また、心拍計からリアルタイムで心拍数を取得して、運動強度をモニタリングすることも可能だ。

スマートホームの制御

Web Bluetooth APIを使えば、スマートホームデバイスの制御も簡単になる。たとえば、ウェブアプリからBluetooth経由で照明のオンオフを切り替えたり、エアコンの温度を調整したりすることができる。これにより、家中のデバイスを一元管理できる便利なスマートホームシステムが実現する。

ウェアラブルデバイスとの連携

スマートウォッチやその他のウェアラブルデバイスとの連携もWeb Bluetooth APIの得意分野だ。たとえば、スマートウォッチから通知を取得してウェブアプリで表示したり、ウェブアプリからスマートウォッチにデータを送信して振動通知を行うことができる。

Web Bluetooth APIのAPI構成

navigator.bluetoothオブジェクト

navigator.bluetoothオブジェクトは、Bluetoothデバイスとのやり取りを開始するためのエントリーポイントだ。これを使ってデバイスをスキャンし、接続できる。






javascript



navigator.
bluetooth
.requestDevice({ filters: [{ 
services
: [
'heart_rate'
] }] })
  .then(device => {
    // デバイスの名前を示す
    console.log('Connected to device:', device.name);
    // デバイスがサポートするUUID（ユニバーサルユニークID）のリスト
    console.log('Supported UUIDs:', device.uuids);
    // デバイスのGATT（Generic Attribute Profile）サーバーへのアクセスを提供するプロパティ
　  device.gatt.connect()
     .then(server => {
      console.log('GATT server connected');
    });
  })
  .catch(error => {
    console.error('Connection failed:', error);
  });

Bluetoothデバイスのプロパティ

Bluetoothデバイスのプロパティについて解説する。

Bluetoothイベント

Bluetoothデバイスから発生する主なイベントについて解説する。





javascript
device.addEventListener('gattserverdisconnected', () => {
  console.log('GATT server disconnected');
});


characteristic.addEventListener('characteristicvaluechanged', (event) => {
  const value = event.target.value;
  console.log('Characteristic value changed:', value);
});

実装例：フィットネストラッカーとのデータ同期

デバイスのスキャンと接続

フィットネストラッカーをスキャンして接続する方法。




javascript
// Bluetoothデバイスをスキャンして接続する
navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
  .then(device => {
    // デバイスが見つかったら、GATTサーバーに接続する
    return device.gatt.connect();
  })
  .then(server => {
    // GATTサーバーに接続されたら、コンソールにログを表示する
    console.log('GATT server connected');
    // 心拍サービスを取得する
    return server.getPrimaryService('heart_rate');
  })
  .then(service => {
    // 心拍サービスが見つかったら、コンソールにログを表示する
    console.log('Heart rate service found');
    // 心拍数測定のキャラクタリスティックを取得する
    return service.getCharacteristic('heart_rate_measurement');
  })
  .then(characteristic => {
    // 心拍数測定のキャラクタリスティックが見つかったら、コンソールにログを表示する
    console.log('Heart rate characteristic found');
    // キャラクタリスティックの値の変更通知を開始する
    return characteristic.startNotifications().then(() => {
      // 値が変更された時に発生するイベントをリッスンする
      characteristic.addEventListener('characteristicvaluechanged', (event) => {
        // イベントから取得した値をコンソールに表示する
        const value = event.target.value;
        console.log('Heart rate value:', value.getUint8(0));
      });
    });
  })
  .catch(error => {
    // 接続に失敗した場合のエラーハンドリング
    console
.error('Connection failed:', error);
  });

データの取得と表示

接続したデバイスからデータを取得し、表示する方法。





javascript


// キャラクタリスティックの値が変更された時のイベントハンドラを設定する
characteristic.addEventListener('characteristicvaluechanged', (event) => {
  // イベントから取得した値を変数に格納する
  const value = event.target.value;
  // 心拍数の値を取得して変数に格納する
  const heartRate = value.getUint8(0);
  // HTMLドキュメント内の要素に心拍数を表示する
  document.getElementById('heart-rate').textContent = `Heart Rate: ${heartRate}`;
});

データの送信

接続したデバイスにデータを送信する方法。




javascript
// テキストエンコーダーを使ってデータをエンコードする
const encoder = new TextEncoder();
const data = encoder.encode('New data to send');

// エンコードしたデータをキャラクタリスティックに書き込む
characteristic.writeValue(data)
  .then(() => {
    // データ送信が成功した場合のログを表示する
    console.log('Data sent successfully');
  })
  .catch(error => {
    // データ送信が失敗した場合のエラーハンドリング
    console.error('Failed to send data:', error);
  });

まとめ

この記事では、Web Bluetooth APIの基本から具体的な使用例、実装例までを詳しく解説した。Bluetooth技術を活用することで、ウェブアプリケーションがさらに便利でインタラクティブになる。これを機に、ぜひ自分のアプリにWeb Bluetooth APIを取り入れてみよう。