Slide 1
Slide 1 text
SwitchBot温湿度計のデータ取得を
Web Bluetooth API でやろうとしたら
思ったより苦労した話
2021年6月15日 (火)
IoT縛りの勉強会! IoTLT vol.76 @オンライン
豊田 陽介 ( @youtoy )
Slide 2
Slide 2 text
豊田陽介（@youtoy）
自己紹介
普段は、某通信会社の研究所勤務
自宅にたくさん
ビジュアルプログラミングIoTLT
共同主催、その他にも複数主催
ガジェット好き
その他
IT系イベント主催、登壇や運営なども
子ども向けの活動いろいろ（IT系以外も）
プライベートでの活動
Slide 3
Slide 3 text
いきなり余談からｗ
⇒ 紹介したいJavaScriptネタ
（Google I/O 2021絡み）
Slide 4
Slide 4 text
【余談1】MediaPipeで人物と背景の分離
これまでブラウザ上での「両手の認識」
や「両手＋顔＋体の認識」に使っていた
JavaScript版 MediaPipe。
「MediaPipe Selfie Segmentation
（人物と背景の分離）」という機能
が増えた！
バーチャル背景的なこともできるし、
自分と背景の間へのオブジェクト描画や
背景のみ・人物のみへのエフェクトも！
Slide 5
Slide 5 text
【余談2】TFJS Task API
モバイル向けの TensorFlow Lite のモデルを JavaScript で使える
30行未満の HTML＋JavaScript でカスタムモデルを使った画像分類
ができてしまった！（機械学習処理はそのごくごく一部）
API を使うための読み込み 1行
カスタムモデルの読み込みと推論
Slide 6
Slide 6 text
余談に関する関連リンク
MediaPipe
Selfie Segmentation
のデモ動画の URL
記事1： TensorFlow Lite の
モデルを Web で扱えるという
話についてのざっくりなメモ
記事2： 30行未満の HTML＋
JavaScript でカスタムモデル
を使った画像分類を試す
（TFJS Task API を利用）
Slide 7
Slide 7 text
本題に戻ります
Slide 8
Slide 8 text
本日の主役
SwitchBot温湿度計
Slide 9
Slide 9 text
Web Bluetooth API で
温湿度を取得しようとして
温度 25.1℃
湿度 56％
Slide 10
Slide 10 text
いろいろ想定と違った...
サクッとできると
思ってたのに...
Slide 11
Slide 11 text
背景などを少し補足
・SwitchBot温湿度計を持っていた
・BLE で温湿度のデータを取得した方の事例多数
（Python、Node.js、Go など）
⇒ Web Bluetooth API の例はないかも？
・サクッと終わると思ってた
「Web Bluetooth API はよく使ってたし、
今までと同じ感じでやれば大丈夫だろう」
危険信号だった
のかも？
Slide 12
Slide 12 text
障壁がいろいろ...
Slide 13
Slide 13 text
Web Bluetooth API を使ってた話
・ブラウザから BLE 対応デバイスとやりとりするもの
・toio・M5Stack・micro:bit 等の制御で使ってた
手の動きに連動した
6台の toio の同時制御
toio の姿勢角
（ロール・ピッチ・
ヨー）のグラフ化
M5Stack Core2 へ
文字送信・表示、
画面の色変更
Slide 14
Slide 14 text
これまでと同じやり方
で値がとれてない！？
Slide 15
Slide 15 text
想定と大きく違った...
これまでと同じやり方
navigator.bluetooth.requestDevice
別のやり方が必要
navigator.bluetooth.requestLEScan
chrome://flags/#enable-
experimental-web-platform-
features を Enable に
Slide 16
Slide 16 text
これで勝てる！
違う処理を使えば
よかったのか
Slide 17
Slide 17 text
自分の環境のせいかもしれないけれど
Mac：スキャン結果にデバイスが出ない...
Windows：スキャン結果は出た！
でもめっちゃ不安定...
環境変更
Slide 18
Slide 18 text
残る候補はAndroidのみ
Safariは
未対応だし...
発表後、
ラズパイもある？
と思ったので追記
（試せてはないけど）
Slide 19
Slide 19 text
安定してそう！
Androidで進めよう！
Slide 20
Slide 20 text
AndroidとPCを連動
させて楽にやりたい
はるか昔に試したような...
Slide 21
Slide 21 text
AndroidからPCにlocalhostでアクセス
PC から Android が見える
【PC側の Chromで】
chrome://inspect/#devices
【PC側の Chromで】
ポートフォワーディング
https か localhost なら動く API
を証明書なしに localhost で
Slide 22
Slide 22 text
PCでAndroidのChromeのコンソール表示
PC の Chrome側で操作をして
PC の Chrome側の表示で
Android の Chrome の画面
Android の Chrome の
開発者ツールの画面
PC からデバッグ
Slide 23
Slide 23 text
仕様にそってバイナリデータから値を取得
取得できたバイナリデータに
ビット演算をしたりなど
Slide 24
Slide 24 text
ようやく成功！
できた！！
Slide 25
Slide 25 text
知見はいろいろ得られた！
Slide 26
Slide 26 text
詳細はQiitaの記事に
この他にも 2つ
Slide 27
Slide 27 text
登壇後の追加分
これまでよく使ってるやり方
navigator.bluetooth.requestDevice
今回試したもの
navigator.bluetooth.requestLEScan
安定版でデフォルトで
使えて、各種BLE対応
ガジェットを制御する
のに良い感じ！
Chrome のベータ等でも
実験的機能っぽいので
時期尚早なだけ、という
感じかな...
手軽に使える Web Bluetooth API 楽しいです！
Slide 28
Slide 28 text
終わり！