2019/06/12 Monaca UG TOKYO #9 〜先進的Web系技術を学ぶ〜

1. Web Bluetoothではじめる
IoT Prototype
Monaca UG TOKYO #9 〜先進的Web系技術を学ぶ〜
2019/06/12 蔵下 雅之

2. 自己紹介
- 蔵下 雅之（@umi_kappa）
- 現在はIoTな自社製品作る会社で働く
- フロントエンドエンジニア
- 変わり種なJSのAPIを触るのが好き
- 電子工作も少々

3. QiitaでWeb Bluetoothネタ書いたりしてます
https://qiita.com/umi_kappa/items/da60e3c8cec19624df91

4. 伝えたいこと！

5. 伝えたいこと！
- Web Bluetoothは何者か？
- 何ができる？
- どう使う？
- 使い物になるの？
- IoTなPrototypeにおすすめ！
- 普段なかなか使わないAPIだと思うので、
興味を持っていただけるだけでも嬉しいです！

6. 発表で行ったデモ

7. 今日のデモ
- 心拍センサーで心拍数を取得
- Web Bluetoothでブラウザへ
- 発表中の緊張度を
心拍数で可視化！
- 上がり症なので温かい目で
お願いします(汗
- 詳細は後半で
- 公開中[https://github.com/umi-kappa/190612_monaca_ug_tokyo ]

8. Web Bluetoothとは？

9. Web Bluetoothとは？
- ウェブサイトとBLEデバイスでデータ通信できる
# BLE（Bluetooth Low Energy）
- 消費電力を抑えたBluetooth規格の一つ
- ボタン電池でも数年動かすことが可能
- IoT製品によく使われている
- 通信速度が低く、音声や動画のデータ通信には向
かない

10. Web Bluetoothのサポート状況
ChromeはDesktop、Androidともにサポート。
EdgeもChromium化されればサポートに。
Safariは... 「Can I use」より

11. Web Bluetoothの制限事項
- SSL環境で実行すること
- ユーザーアクション（クリックなど）をトリガーとして実
行すること

12. Web Bluetoothで
データ通信する方法

13. Web Bluetoothで接続するまで
1. BLEデバイスをスキャン
2. スキャンしたBLEデバイスのサービス（機能）へアクセ
ス
3. サービスごとのキャラクタリスティック（データ）へアク
セス
-> 接続成功！！！ データ通信へ

14. さーびす？ きゃらくたりすてぃっく？
なにそれ？ おいしいの？

15. BLEで覚えておきたい用語
- サービス
BLEデバイスに備わっている機能
- キャラクタリスティック
サービスが扱うデータをやり取りする口
※サービス、キャラクタリスティックには、UUIDが付与さ
れていて、アクセス時に使用する

16. 例えば心拍計だと
- サービス
- 心拍を計測する機能
- バッテリーの情報扱う機能
- キャラクタリスティック
- 心拍数
- バッテリー残量

17. Web Bluetoothのデータ通信
- write
- ブラウザからBLEデバイスへデータを送信
- read
- ブラウザからBLEデバイスのデータを取得
- notification
- BLEデバイスからブラウザへ複数回データを送信

18. 心拍センサーのデモを例にコー
ドを見ていきましょう

19. BLEデバイスへ接続

20. 1. UUIDの指定
// サービスのUUID
const SERVICE_UUID =
"8a61d7f7-888e-4e72-93be-0df87152fc6d";
// キャラクタリスティックのUUID
const CHARACTERISTIC_UUID =
"fae2e24f-aea2-48cb-b449-55ec20518e93";

21. 2. BLEデバイスをスキャン
navigator.bluetooth.requestDevice({
filters: [
{services: [SERVICE_UUID]},
{namePrefix: 'm5-stack'}
],
optionalServices: [
// 使用したいServiceを登録しておく
SERVICE_UUID
]
})

22. 3. BLEデバイスへ接続
.then(device => device.gatt.connect())
4. サービスを取得
.then(server =>
server.getPrimaryService(SERVICE_UUID))

23. 5. キャラクタリスティックを取得したら接
続完了
// UUIDに合致するキャラクタリスティックを取得
.then(service =>
service.getCharacteristic(CHARACTERISTIC_UUID))
.then(characteristic => {
console.log("BLE接続が完了しました。");
// BLEデバイス接続後の処理
})

24. BLEデバイス側で心拍数を
検出したらブラウザへ通知
-> notification

25. キャラクタリスティックで取得
characteristic.startNotifications()
.then(() => {
// Add Event
characteristic.addEventListener(
'characteristicvaluechanged', (event) => {
const value = event.target.value;
// 心拍数を取得(ArrayBufferをnumberへ)
sensorValue = value.getUint8(0);
});
})

26. BLEデバイスの用意について

27. 電子工作ってハードルが高い...
- 今回のデモではセンサー買って電子工作した
- 未経験の方にはハードル高し...
- 市販のBLEデバイスでもWeb Bluetoothでアクセスで
きるものもある
- WebBluetoothCGのDemoをご参考に
- 仮想BLEデバイスを作るスマホアプリもある

28. プリンター
https://github.com/WebBluetoothCG/demos/tree/gh-pages/bluetooth-printer

29. 心拍センサー（Polar H7）
https://github.com/WebBluetoothCG/demos/tree/gh-pages/heart-rate-sensor

30. BB-8
https://github.com/WebBluetoothCG/demos/tree/gh-pages/bluetooth-toy-bb8

31. (まとめ) Web Bluetoothを
使って学んだこと

32. 学んだこと
- Web Bluetoothの使い方を知れば、つなぐデバイスの
選択でブラウザでできる領域が広がる！
- 温度/湿度/土の水分量/紫外線量/etc...
- IoTで何ができるかサクッとPrototypeできる
- インターネット回線と別のデータ通信のため〜

33. PWAと相性良し！
- PWA / Service Workerのオフラインキャッシュを使え
ば、インターネットが無い環境でもWeb Bluetoothが使
える
- Workboxを使うと導入しやすい

34. Enjoy Web Bluetooth !