WebブラウザからBluetooth接続できるWeb Bluetoothを試す
HTML5の新しいAPIの中でも特に先進的なAPIがWeb Bluetoothです。Google Chrome60以降、Androidのブラウザでも56以降でしかサポートされていないAPIになります。しかしWebブラウザがBluetooth通信をサポートする各種デバイスと通信できることで様々な使い道が考えられます。
今回はそんなWeb Bluetoothの簡単な使い方を紹介します。
コードについて
Web Bluetoothを扱う場合にはPromise処理が連続して行われます。例えば今回はバッテリーレベルを取得します。
まずWeb Bluetoothをサポートしているかどうかは navigator.bluetooth の有無で判定します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| navigator.bluetooth |
次にバッテリーサービス（battery_service）をサポートしているデバイスを探します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| navigator.bluetooth.requestDevice({ | |
| filters: [{ | |
| services: ['battery_service'] | |
| }]}) |
この時点でGoogle ChromeにBluetoothデバイスを一覧するダイアログが表示されます。この中から接続したいデバイスを選択します。
接続がうまくいくとデバイス情報が返ってきますので、接続の認証処理を行います。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .then(device => { | |
| return device.gatt.connect(); | |
| }) |
接続がうまくいったら、バッテリーサービスを取得します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .then(server => { | |
| return server.getPrimaryService('battery_service'); | |
| }) |
さらにバッテリーサービスからデータを読み書きするためのキャラクタリステックを取得します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .then(service => { | |
| return service.getCharacteristic('battery_level'); | |
| }) |
キャラクタリステックが取得できたら、そのデータを読み取ります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .then(characteristic => { | |
| return characteristic.readValue(); | |
| }) |
最後に読み取ったデータを数値に変換して完了です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .then(value => { | |
| let batteryLevel = value.getUint8(0); | |
| console.log(`> バッテリーレベルは${batteryLevel}%です`); | |
| }) |
そうするとログメッセージが表示されます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| > バッテリーレベルは46%です |
エラーが出た場合にはcatchメソッドを用意しておけば、そこがコールされます。データの読み取りについてはとても簡単にできます。Bluetoothには提供するサービス（プロファイル）が多数あり、それによって実装方法も異なってきますので注意してください。
バッテリーサービスについてはWeb Bluetooth / Battery Level Sampleにて確認できます。また、AndroidアプリのBLE Peripheral Simulatorを使うことで可変できるバッテリー情報を送信できます。お試しください。
hifive開発者ブログ 
コメントは受け付けていません。