Download to read offline
![今日のデモ
- 心拍センサーで心拍数を取得
- Web Bluetoothでブラウザへ
- 発表中の緊張度を
心拍数で可視化！
- 上がり症なので温かい目で
お願いします(汗
- 詳細は後半で
- 公開中[https://github.com/umi-kappa/190612_monaca_ug_tokyo ]](https://image.slidesharecdn.com/web-bluetooth-190614065525/85/Web-Bluetooth-IoT-Prototype-7-320.jpg)
![2. BLEデバイスをスキャン
navigator.bluetooth.requestDevice({
filters: [
{services: [SERVICE_UUID]},
{namePrefix: 'm5-stack'}
],
optionalServices: [
// 使用したいServiceを登録しておく
SERVICE_UUID
]
})](https://image.slidesharecdn.com/web-bluetooth-190614065525/85/Web-Bluetooth-IoT-Prototype-21-320.jpg)
Uploaded byMasayuki Kurashita
Web BluetoothではじめるIoT Prototype
2019/06/12 Monaca UG TOKYO #9 〜先進的Web系技術を学ぶ〜
Web BluetoothではじめるIoT Prototype
- 1. Web Bluetoothではじめる IoT Prototype MonacaUG TOKYO #9 〜先進的Web系技術を学ぶ〜 2019/06/12 蔵下 雅之
- 2. 自己紹介 - 蔵下 雅之（@umi_kappa） -現在はIoTな自社製品作る会社で働く - フロントエンドエンジニア - 変わり種なJSのAPIを触るのが好き - 電子工作も少々
- 3.
- 4.
- 5. 伝えたいこと！ - Web Bluetoothは何者か？ -何ができる？ - どう使う？ - 使い物になるの？ - IoTなPrototypeにおすすめ！ - 普段なかなか使わないAPIだと思うので、 興味を持っていただけるだけでも嬉しいです！
- 6.
- 7. 今日のデモ - 心拍センサーで心拍数を取得 - WebBluetoothでブラウザへ - 発表中の緊張度を 心拍数で可視化！ - 上がり症なので温かい目で お願いします(汗 - 詳細は後半で - 公開中[https://github.com/umi-kappa/190612_monaca_ug_tokyo ]
- 8.
- 9. Web Bluetoothとは？ - ウェブサイトとBLEデバイスでデータ通信できる #BLE（Bluetooth Low Energy） - 消費電力を抑えたBluetooth規格の一つ - ボタン電池でも数年動かすことが可能 - IoT製品によく使われている - 通信速度が低く、音声や動画のデータ通信には向 かない
- 10.
- 11. Web Bluetoothの制限事項 - SSL環境で実行すること -ユーザーアクション（クリックなど）をトリガーとして実 行すること
- 12.
- 13. Web Bluetoothで接続するまで 1. BLEデバイスをスキャン 2.スキャンしたBLEデバイスのサービス（機能）へアクセ ス 3. サービスごとのキャラクタリスティック（データ）へアク セス -> 接続成功！！！ データ通信へ
- 14.
- 15.
- 16. 例えば心拍計だと - サービス - 心拍を計測する機能 -バッテリーの情報扱う機能 - キャラクタリスティック - 心拍数 - バッテリー残量
- 17. Web Bluetoothのデータ通信 - write -ブラウザからBLEデバイスへデータを送信 - read - ブラウザからBLEデバイスのデータを取得 - notification - BLEデバイスからブラウザへ複数回データを送信
- 18.
- 19.
- 20. 1. UUIDの指定 // サービスのUUID constSERVICE_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.
- 25. キャラクタリスティックで取得 characteristic.startNotifications() .then(() => { //Add Event characteristic.addEventListener( 'characteristicvaluechanged', (event) => { const value = event.target.value; // 心拍数を取得(ArrayBufferをnumberへ) sensorValue = value.getUint8(0); }); })
- 26.
- 27. 電子工作ってハードルが高い... - 今回のデモではセンサー買って電子工作した - 未経験の方にはハードル高し... -市販のBLEデバイスでもWeb Bluetoothでアクセスで きるものもある - WebBluetoothCGのDemoをご参考に - 仮想BLEデバイスを作るスマホアプリもある
- 28.
- 29.
- 30.
- 31.
- 32. 学んだこと - Web Bluetoothの使い方を知れば、つなぐデバイスの 選択でブラウザでできる領域が広がる！ -温度/湿度/土の水分量/紫外線量/etc... - IoTで何ができるかサクッとPrototypeできる - インターネット回線と別のデータ通信のため〜
- 33. PWAと相性良し！ - PWA /Service Workerのオフラインキャッシュを使え ば、インターネットが無い環境でもWeb Bluetoothが使 える - Workboxを使うと導入しやすい
- 34.