Web Bluetoothを使ってみよう(社内勉強会用)

はじめに

Moffの社内勉強会用に話した内容を一部抜粋して記事を書いています。
勉強会では、JavaScript、Python、C#(Unity)、Swiftなどに強いエンジニアがBLEを理解するための助けになればという位置づけでお話しました。

Web BluetoothはmacとMoffBandさえあればすぐにセンサーデータを受信するものを作って目に見れるので、アプリやサーバサイドのエンジニアにとって、Web Bluetoothは初学にはよいと思いました。

Bluetoothについて

最初に、Bluetooth規格のバージョンについて主な特徴を抜粋します。

• 5.0
  • データ転送速度向上(最大2倍)、通信範囲拡大(最大4倍)
• 4.2
  • 転送速度を向上（最大2.5倍）
  • 6LoWPAN対応
• 4.1
  • IPv6対応
• 4.0
  • 省電力化。
  • 正式には、Bluetooth Smart。いわゆるBLE（Bluetooth Low Energy）
• 3.0以前
  • いわゆるクラシックBluetooth
  • BLEと3.0以前の規格の両方に対応したデバイスをBluetooth Smart Ready

なお、最初のMoffBandは2014年~2015年に開発され、4.1を使用しています。
内部の機能としては4.0でもですが、4.1規格で実装されたBLEモジュールは4.0に比べてハードウェア的にもソフトウェア的にも改善されているからです。

BLEについてもう少し詳しく

参考資料のリンクを載せておきます。昔いろいろ勉強させていただきました。

(参考)Bluetoothについて + iOS

(参考)BLE 接続やProfileについて + Android

サービスとキャラクタリスティクス

上記の参考資料に目を通した前提で、
BLEを使うモバイルアプリをつくるなら、とりあえず下記の階層の概念を抑えておけばよいと思います。

• Profile
  • Serviceの集合
• Service
  • Characteristicsの集合
• Characteristics
  • Read
  • Write
  • Notification

GATT

デバイスのFirmwareを開発では、ソフトウェア的に上記の仕様にしたがって実装されます。

デバイス発見から接続までの状態遷移

デバイスにはCentralとPeripheralという役割があり、
例えば、iPhoneがCentral、MoffBandがPeripheralという役割になります。

MoffBandの電源ボタンを押してOnにすればAdvertising状態になり、iOSアプリでスキャンすればScanning状態になり接続が確率すると、Connection状態になります。

• Central
  • Standby
  • Scanning
  • Initiator
  • Connection
• Peripheral
  • Advertising
  • Connection

Web Bluetooth

さて、一通りBluetooth、BLEについてざっと理解したところで、Web Bluetoothについて紹介していきます。

対応ブラウザ

対応ブラウザは、Chrome。ということだけで使う側としてはいいかなと。

下記リンク先を見ると、前はmacでも実装されていない機能があって、Chrome OSかAndroidが先行していましたが、今はほとんど差がなくなっていますね。
Windowsもようやく。。

ブラウザの実装状況は、こちらで。

Web Blueooth 仕様

仕様やサンプルコードが下記リンク先にあります。

それでは、サンプルを動かしてみましょうということで、下記リンク先のNotification SampleをMacのChromeで開いて下さい。

（↑ここで、MoffBandのProfileを入力して実行しました。注意点は、文字列はlower-caseじゃないとだめだそうです。)

↓実行した結果の画像

センサーデータが取得てきているのがわかります。

自分で手元でサンプルを実行したい場合は、下記のようにWebサーバをローカル実行して、

$ python -m SimpleHTTPServer )

ブラウザでアクセス

しなくても、file://でもOKだとは思います。

実装のおおまかな流れ

社内勉強会では、実際にMoffBandにないでセンサーデータ取得して加工できるように、下記の大まかな実装内容についても紹介しましたが、本記事では割愛いたします。

1. navigator.bluetooth.requestDevice()でBluetoothDeviceオブジェクトを取得
2. BluetoothDevice#connectGATT()でBluetoothGATTRemoteServerオブジェクトを取得
3. BluetoothGATTRemoteServer#getPrimaryService()でBluetoothGATTServiceオブジェクトを取得
4. BluetoothGATTService#getCharacteristic()でBluetoothGATTCharacteristicオブジェクトを取得
5. BluetoothGATTCharacteristic#writeValue()でデバイス制御

---

応用アイデア

っで、ブラウザでWebBluetoothができると何が嬉しいか?

例えば、

1 : プログラミング学習(*1)にデバイス連携させてみたり

(*1)
http://scratchx.org/

2 : HTML5ゲーム(*2)にデバイス連携させてみたり

(*2)
https://rgames.jp/

3 : スマホでライトセーバー(*3)をデバイスをライトセーバーにしたり

(*3)
https://www.chromeexperiments.com/experiment/lightsaber-escape

といったことが、できるようになるなと。

---

最後に

Web Blueoothはブラウザ側で動作するプログラムというのもあって、プロダクトには適用していませんが、何か試したいことをささっと作るときにはいいなと思います。(２回目、、、)

BLEでのデバイス開発に取り組んでから約5年(2018年現在)が経ち、今までにアプリにサーバサイドにと色々取り組んできて、いまやReact Native, AWS Lambdaとかでアプリ側は全部JavaScriptで記述してみたり、AWS Kinesisでサーバサイドでセンサーデータを処理させるといったことにも取り組んでたりします。

Moffでは、ヘルスケア関連のプロダクトやサービスを開発するエンジニアを募集しています。