表題の通りです。
Node.js や Python等を使って SwitchBot温湿度計からの情報取得を実現した記事をいくつか見かけていました。
そして、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 をフィルタに使った形の処理で実行してみます。
navigator.bluetooth.requestDevice({filters: [{ services: ["cba20d00-224d-11e6-9fb8-0002a5d5c51b"] }]});
そうすると、以下のとおりスキャン結果に「WoSensorTH」という名前が表示されました。
冒頭に書いた仕様を見ると SwitchBot温湿度計で間違いないようです。
別途、温湿度情報の取得はやってみようと思います。
スキャン時のフィルターとして利用できるもの
上記のとおり、スキャン時のフィルタでは UUID を利用しました。
フィルタの指定で他にも利用できるものがあるので、ここで補足しておきます。
利用できるものは、他には例えば「name」や「namePrefix」があります。それらを今回の例で用いると、以下のような指定も行えます。
navigator.bluetooth.requestDevice({filters: [{ name: ["WoSensorTH"] }]});
navigator.bluetooth.requestDevice({filters: [{ namePrefix: ["WoSensor"] }]});
情報の参照元は以下です。
●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 の公式アプリを開き、SwitchBot温湿度計が一覧に出てくるか確認します。以下のとおり、一覧の中に温湿度の情報とともに表示されました。
上記の温湿度計の部分をアプリ上でタップします。そうすると、以下の履歴データの表示画面に遷移しました。
ここで、画面右上に表示されている歯車アイコンをタップします。
そうすると、以下の画面が表示されました。さらに、画面右上の 3つの点のアイコンの部分をタップします。
無事に以下のように MACアドレスが表示されました。
Bluetooth Explorer でスキャンしてみる
MACアドレスも判明したので、Bluetooth Explorer でスキャンしてみます。
スキャン方法は、上で紹介した過去の記事の「Mac からのスキャン」という項目の中で説明しています。
その結果、上記の MACアドレスがスキャン結果に出てきました。
ブラウザから Web Bluetooth API でスキャン
開発者ツールのコンソールからスキャンする
まずは、過去に書いた以下の記事で使った方法で試してみます。
●【JavaScript 2020】 #UIFlow の BLE UART を使ったブラウザから #M5Stack_Core2 （ #M5Stack ）への文字の送信 - Qiita
https://qiita.com/youtoy/items/3da58570972803134f6c
具体的には、ブラウザで開発者ツールのコンソールを開き、そこで以下の内容を実行してみるというものです。
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/