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

https://www.slideshare.net/reinforcelab/20130902-btle

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

https://www.slideshare.net/youten_redo/ios-androidble


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

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

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


[GATT](https://www.bluetooth.com/ja-jp/specifications/gatt/generic-attributes-overview)

デバイスの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。ということだけで使う側としてはいいかなと。

https://platform-status.mozilla.org/#web-bluetooth


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

https://github.com/WebBluetoothCG/web-bluetooth/blob/gh-pages/implementation-status.md


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

http://caniuse.com/#feat=web-bluetooth



### Web Blueooth 仕様

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

https://webbluetoothcg.github.io/web-bluetooth/

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

https://googlechrome.github.io/samples/web-bluetooth/notifications.html

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

↓実行した結果の画像
![image.png](https://qiita-image-store.s3.amazonaws.com/0/15008/974fe04c-0065-5b41-7aa3-0466a9567322.png)


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


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

```
$ python -m SimpleHTTPServer )
```

ブラウザでアクセス

http://localhost:8000/webbluetooth.html

しなくても、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では、ヘルスケア関連のプロダクトやサービスを開発するエンジニアを募集しています。

https://www.wantedly.com/projects/240435