SwitchBot温湿度計を Web Bluetooth API でスキャンする【試行錯誤中】

表題の通りです。

Node.js や Python等を使って [SwitchBot温湿度計](https://www.switchbot.jp/meter)からの情報取得を実現した記事をいくつか見かけていました。
そして、Web Bluetooth API でやってみようと思って手をつけずにいたのですが、今回試してみて試行錯誤の過程を含めて自分用メモとして記事にしました。

# Web Bluetooth API でスキャンしてみる
## スキャンに必要な情報
公式から以下の情報が提供されていました。

●Meter BLE open API · OpenWonderLabs/python-host Wiki
　https://github.com/OpenWonderLabs/python-host/wiki/Meter-BLE-open-API

上記の仕様を見ると UUID は `cba20d00-224d-11e6-9fb8-0002a5d5c51b` になるようです。

そこで、まずはブラウザの開発者ツールのコンソールで、以下の UUID をフィルタに使った形の処理で実行してみます。

```javascript
navigator.bluetooth.requestDevice({filters: [{ services: ["cba20d00-224d-11e6-9fb8-0002a5d5c51b"] }]});
```

そうすると、以下のとおりスキャン結果に「WoSensorTH」という名前が表示されました。
![UUIDをフィルタに使ってスキャン.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9db5eb55-9214-5f22-9997-c5f51c79ebc3.jpeg)

冒頭に書いた仕様を見ると SwitchBot温湿度計で間違いないようです。
![デバイス名.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2bae38ee-981e-a70e-589f-24922113e99f.jpeg)

別途、温湿度情報の取得はやってみようと思います。

### スキャン時のフィルターとして利用できるもの
上記のとおり、スキャン時のフィルタでは UUID を利用しました。
フィルタの指定で他にも利用できるものがあるので、ここで補足しておきます。

利用できるものは、他には例えば「name」や「namePrefix」があります。それらを今回の例で用いると、以下のような指定も行えます。

```javascript
navigator.bluetooth.requestDevice({filters: [{ name: ["WoSensorTH"] }]});
```

```javascript
navigator.bluetooth.requestDevice({filters: [{ namePrefix: ["WoSensor"] }]});
```

情報の参照元は以下です。
![フィルターで指定できるもの.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ce42fc68-9c8e-e3a3-9de1-9081dcabe26d.jpeg)
●Bluetooth.requestDevice() - Web APIs | MDN
　https://developer.mozilla.org/en-US/docs/Web/API/Bluetooth/requestDevice
●Web Bluetooth
　https://webbluetoothcg.github.io/web-bluetooth/

# 【追記】
## 【追記1】 上記と違うやり方になるかも...
この続きの記事を書こうと追加調査や試行錯誤の続きをやっていたのですが、これまで toio・M5Stack・micro:bit とのやりとりに使っていた処理とは異なるものを使う必要があるかも...

## 【追記2】 上記と違うやり方が必要そうでした
以下に続き（※ 以下は未完）を書いたのですが、 `navigator.bluetooth.requestLEScan` という処理を使う必要があるようです。
　●SwitchBot温湿度計のデータを Web Bluetooth API で取得する：【未完】準備や試行錯誤のメモ - Qiita
　　https://qiita.com/youtoy/items/6abcc9d704aaebcf5b18

## 【追記3】 無事に温湿度の値を取得できました！
試行錯誤を続けて書いた記事 3つ目にして、ようやく温湿度の値を BLE経由で得ることができました。
　●SwitchBot温湿度計のデータを Web Bluetooth API で取得する【完結編】 - Qiita
　　https://qiita.com/youtoy/items/8e3cca2172e2c4806846

# 試行錯誤をしていた時の情報（自分用のメモ）
以下は、上記の手順にたどり着くまでに調べたり試したりしていたことなので、ご興味がある方はご覧ください。
試行錯誤の過程で試した内容を残すため、自分用に書いているものです。

## Apple の Bluetooth Explorer でのスキャンを試す
Web Bluetooth API でスキャン等を行っていく前に、まずは Apple が提供している Bluetooth Explorer でスキャンできるかを確認しました。Bluetooth Explorer は以下の記事を書いた時などにも使ったことがあるものです。

●#UIFlow の BLE UART を使った文字のやりとりを #M5Stack_Core2 で試してみた（ #M5Stack ） - Qiita
　https://qiita.com/youtoy/items/0aeac01927d60c33f421

### 公式アプリで MACアドレスを確認
Bluetooth Explorer でのスキャンを行った結果を見て SwitchBot温湿度計が含まれるかを判別できる情報として、以下の記事でも利用している MACアドレスが使えそうでした。その情報を確認する方法を公式アプリを操作してみて試してみます。

●SwitchBot 温湿度計の測定値を BLE Advertisement パケットから直接読み取る - Qiita
　https://qiita.com/warpzone/items/11ec9bef21f5b965bce3

なお、この記事で使っている SwitchBot温湿度計は、既に公式アプリで情報を取得できるようセットアップを済ませている状態です。

#### 公式アプリで MACアドレスを表示させる
[iPhone の公式アプリ](https://apps.apple.com/jp/app/switchbot/id1087374760)を開き、SwitchBot温湿度計が一覧に出てくるか確認します。以下のとおり、一覧の中に温湿度の情報とともに表示されました。
![デバイスの一覧.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/07fe406c-ef42-dcf5-c7de-726ed16508af.jpeg)

上記の温湿度計の部分をアプリ上でタップします。そうすると、以下の履歴データの表示画面に遷移しました。
ここで、画面右上に表示されている歯車アイコンをタップします。
![デバイスの計測情報の履歴.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fef7efa1-bcc6-aea2-9ee5-e7c59a789988.jpeg)

そうすると、以下の画面が表示されました。さらに、画面右上の 3つの点のアイコンの部分をタップします。
![歯車マークの選択後.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2b79eebf-5e10-9e7a-aeca-17768c09d8d0.jpeg)

無事に以下のように MACアドレスが表示されました。
![MACアドレスの表示.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c12b5f3d-b197-12f3-488d-a6ffd0decfb5.jpeg)

## Bluetooth Explorer でスキャンしてみる
MACアドレスも判明したので、Bluetooth Explorer でスキャンしてみます。
スキャン方法は、上で紹介した[過去の記事の「Mac からのスキャン」という項目](https://qiita.com/youtoy/items/0aeac01927d60c33f421#mac-%E3%81%8B%E3%82%89%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%A3%E3%83%B3)の中で説明しています。

その結果、上記の MACアドレスがスキャン結果に出てきました。

## ブラウザから Web Bluetooth API でスキャン
### 開発者ツールのコンソールからスキャンする
まずは、過去に書いた以下の記事で使った方法で試してみます。

●【JavaScript 2020】 #UIFlow の BLE UART を使ったブラウザから #M5Stack_Core2 （ #M5Stack ）への文字の送信 - Qiita
　https://qiita.com/youtoy/items/3da58570972803134f6c

具体的には、ブラウザで開発者ツールのコンソールを開き、そこで以下の内容を実行してみるというものです。

```javascript
navigator.bluetooth.requestDevice({ acceptAllDevices: true })
```

スキャンをしてみたものの、それらしい情報が見当たらないかも？
（※ この時は見落としていただけの可能性あり）

## 情報を探してみる
お試しをしていてうまくいってない感じがしたので、追加で情報を検索したりして、最終的に冒頭の手順にたどり着きました。

●ronschaeffer/sbm2mqtt: Grab SwitchBot Meter data from Bluetooth Low Energy advertisements and publish them to an MQTT topic for use with Home Assistant, etc.
　https://github.com/ronschaeffer/sbm2mqtt

●SwitchBot温湿度計の値をRaspberryPiでロギング - Qiita
　https://qiita.com/c60evaporator/items/7c3156a6bbb7c6c59052

●SwitchBot温湿度計をGrafanaで可視化 - kamijin-fanta
　https://blog.kamijin-fanta.info/2021/03/temperature-collector/