Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SwitchBot温湿度計のデータ取得を Web Bluetooth API でやろうとしたら...
Search
you(@youtoy)
PRO
June 15, 2021
Technology
0
1.4k
SwitchBot温湿度計のデータ取得を Web Bluetooth API でやろうとしたら思ったより苦労した話 / IoTLT vol.76
you(@youtoy)
PRO
June 15, 2021
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
57
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
180
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
110
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
99
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
50
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
55
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
240
Other Decks in Technology
See All in Technology
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
140
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
180
AI専用のリンターを作る #yumemi_patch
bengo4com
4
2.1k
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
0
270
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
0
400
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
300
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
680
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
160
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
800
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.6k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
0
710
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Practical Orchestrator
shlominoach
188
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Designing Experiences People Love
moore
142
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Scaling GitHub
holman
459
140k
Embracing the Ebb and Flow
colly
86
4.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Transcript
SwitchBot温湿度計のデータ取得を Web Bluetooth API でやろうとしたら 思ったより苦労した話 2021年6月15日 (火) IoT縛りの勉強会! IoTLT
vol.76 @オンライン 豊田 陽介 ( @youtoy )
豊田陽介(@youtoy) 自己紹介 普段は、某通信会社の研究所勤務 自宅にたくさん ビジュアルプログラミングIoTLT 共同主催、その他にも複数主催 ガジェット好き その他 IT系イベント主催、登壇や運営なども 子ども向けの活動いろいろ(IT系以外も)
プライベートでの活動
いきなり余談からw ⇒ 紹介したいJavaScriptネタ (Google I/O 2021絡み)
【余談1】MediaPipeで人物と背景の分離 これまでブラウザ上での「両手の認識」 や「両手+顔+体の認識」に使っていた JavaScript版 MediaPipe。 「MediaPipe Selfie Segmentation (人物と背景の分離)」という機能 が増えた!
バーチャル背景的なこともできるし、 自分と背景の間へのオブジェクト描画や 背景のみ・人物のみへのエフェクトも!
【余談2】TFJS Task API モバイル向けの TensorFlow Lite のモデルを JavaScript で使える 30行未満の
HTML+JavaScript でカスタムモデルを使った画像分類 ができてしまった!(機械学習処理はそのごくごく一部) API を使うための読み込み 1行 カスタムモデルの読み込みと推論
余談に関する関連リンク MediaPipe Selfie Segmentation のデモ動画の URL 記事1: TensorFlow Lite の
モデルを Web で扱えるという 話についてのざっくりなメモ 記事2: 30行未満の HTML+ JavaScript でカスタムモデル を使った画像分類を試す (TFJS Task API を利用)
本題に戻ります
本日の主役 SwitchBot温湿度計
Web Bluetooth API で 温湿度を取得しようとして 温度 25.1℃ 湿度 56%
いろいろ想定と違った... サクッとできると 思ってたのに...
背景などを少し補足 ・SwitchBot温湿度計を持っていた ・BLE で温湿度のデータを取得した方の事例多数 (Python、Node.js、Go など) ⇒ Web Bluetooth API
の例はないかも? ・サクッと終わると思ってた 「Web Bluetooth API はよく使ってたし、 今までと同じ感じでやれば大丈夫だろう」 危険信号だった のかも?
障壁がいろいろ...
Web Bluetooth API を使ってた話 ・ブラウザから BLE 対応デバイスとやりとりするもの ・toio・M5Stack・micro:bit 等の制御で使ってた 手の動きに連動した
6台の toio の同時制御 toio の姿勢角 (ロール・ピッチ・ ヨー)のグラフ化 M5Stack Core2 へ 文字送信・表示、 画面の色変更
これまでと同じやり方 で値がとれてない!?
想定と大きく違った... これまでと同じやり方 navigator.bluetooth.requestDevice 別のやり方が必要 navigator.bluetooth.requestLEScan chrome://flags/#enable- experimental-web-platform- features を Enable
に
これで勝てる! 違う処理を使えば よかったのか
自分の環境のせいかもしれないけれど Mac:スキャン結果にデバイスが出ない... Windows:スキャン結果は出た! でもめっちゃ不安定... 環境変更
残る候補はAndroidのみ Safariは 未対応だし... 発表後、 ラズパイもある? と思ったので追記 (試せてはないけど)
安定してそう! Androidで進めよう!
AndroidとPCを連動 させて楽にやりたい はるか昔に試したような...
AndroidからPCにlocalhostでアクセス PC から Android が見える 【PC側の Chromで】 chrome://inspect/#devices 【PC側の Chromで】
ポートフォワーディング https か localhost なら動く API を証明書なしに localhost で
PCでAndroidのChromeのコンソール表示 PC の Chrome側で操作をして PC の Chrome側の表示で Android の Chrome
の画面 Android の Chrome の 開発者ツールの画面 PC からデバッグ
仕様にそってバイナリデータから値を取得 取得できたバイナリデータに ビット演算をしたりなど
ようやく成功! できた!!
知見はいろいろ得られた!
詳細はQiitaの記事に この他にも 2つ
登壇後の追加分 これまでよく使ってるやり方 navigator.bluetooth.requestDevice 今回試したもの navigator.bluetooth.requestLEScan 安定版でデフォルトで 使えて、各種BLE対応 ガジェットを制御する のに良い感じ! Chrome
のベータ等でも 実験的機能っぽいので 時期尚早なだけ、という 感じかな... 手軽に使える Web Bluetooth API 楽しいです!
終わり!