SwitchBotをフロアマップ的なやつから操作する

SwitchBotといえば！照明のスイッチを物理的に押すだけの機械から始まり、スマートプラグ、温湿度計、人感センサー、カメラ、掃除機、それらを繋ぐハブ兼スマートリモコン…スマートホームのだいたいが揃った一大プラットフォームですね。

当然これらはSwitchBotのアプリから操作できるわけだけど、SwitchBotの機械が増えるほど、アプリの画面のどこにあったっけ…みたいなことになる。複数まとめて操作するシーン機能もあるけれど、それも味気のないリスト表示。

しかしSwitchBotはなんと…APIで操作することもできます！ということは、Claude Codeくんに「SwitchBotのAPIを使って俺の家に合わせたグラフィカルな操作画面を作って」と言えばやってくれるんじゃないですか？

できた。どう作ってもらったか書いていきます。以下は全てSonnetくんがやったので、Opusくんならもっと上手いかもしれない。

Raspberry PiにWebサービスを置く

別にMacやiOSアプリを作ってもいいわけですが、Raspberry Piみたいなサーバ上のWebサービスにすればLAN内のどのブラウザからも操作できるようにになり、将来的にESP32たちからも呼び出せるはず。なのでまずはそういう簡単なWebサービスを作ってもらおう。

設計案をCLAUDE.mdにしてもらって、Claude Codeくんにコードを書いてもらう。エラーや改善点を指摘していって、まずはこういう一覧表示を作った。

当初は定期的なポーリング前提のコードを書いてきたんだけど、Rate limitがあるので現在はWebページを開いたり更新した時のみデバイスの状態を読み込んでいる。読み込んだ状態はSQLiteに保存されるので、APIを呼び出すことなく最後の状態を取得することもできる。

フロアマップから操作できるようにする

さて、上記のようなリスト表示だとSwitchBotアプリとあまり変わらないけれど、APIを通じてデバイスの状態表示や操作ができることは確認できた。あとは自宅の部屋レイアウトとデバイスの位置を対応付けてフロアマップ的な表示を作ることにより、部屋をタップしたら電気がつく、みたいなGUIができるはず。

各部屋ごとに照度センサーを装備したデバイスがあるので、そのIDを指定してイメージ図上の位置と紐づけてもらう。

ただまあ…レイアウトは再現できなかった。これは手動で座標指定をせざるを得ないか…と思ったんだけど、考え方を変えてレイアウトツールを作ってもらうことにした。

これならフロアマップというすごくグラフィカルなものを作るのに、文章で指示を出す必要はないわけですよ。やるなこいつ。

最終的にはこんな感じで、照度センサーが明るいと感知しているエリアは黄色く、暗いエリアはダークグレーで表示する。各エリアをタップすると照明のスイッチが押されて、20秒くらい待ってから照度をもう一回読んで表示を更新する。これがLAN内のWebブラウザすべてから可能になった。素晴らしい。

ESP32デバイスから操作できるようにする

家にはESP32デバイスがたくさん転がっている。ESP32は流石にWebブラウザ機能はないんだけど、簡単な画面表示やWeb API呼び出しくらいはできる。ということは、上記のブラウザ版のコードを基にESP32にこういう機能を移植して、と言えばやってくれるんじゃないか？

できたね…
今度は画像からではなくhtmlからレイアウトを読み取ったおかげか、一発でこのレイアウトが出てきた。

未来へ…

どの部屋の照明がついているか、ということを他の部屋から視覚的に把握できるのはとてもいい。一部屋に一個画面を置いておきたいくらいだ。M5Paperも何枚か転がっているからそれにも移植したい。画面がなくてボタンだけのESP32デバイスでも、シーン実行ボタンになら出来る（SwitchBot製品にもある）。
まあ…部屋の数に対して一人しか住んでないからこんなことになるんですけど…