15分でSwitchBot製品をブラウザから操作できるWebアプリを作ってみた

前置き

9月に引越をした際にスマート家電(SwitchBot)を導入して、最初は遠隔操作やオートメーションが便利だな～と思っていたんですが
人は怠惰な生き物なので、アプリの起動すら面倒に感じてしまい「PCブラウザで操作できたら便利なのでは…？」と考えたのがことの発端。

また、最近弊社では「Google Antigravityが熱い！」と密かに話題になっており
いい機会なので、触ってみることにしてみました。

Hello Antigravity

インストールと日本語化を済ませて早速作業に取り掛かります。
作業と言っても赤枠のプロンプトに作りたいものを書くだけで、サクッと作ってくれるらしい。

いやいや、そんなウマい話があるわけないじゃないですか。
騙されませんよ…！

使用するフレームワークとか、言語とか指定したほうが良いのかな？と心配しながら下記のプロンプトを入力。

バックエンドでSwitchBotAPIを呼び出し
フロントエンド(ブラウザ)上で家電を操作できるWebアプリを作成してください。

心配した割には指示が雑すぎません…？

全自動環境構築

「ディレクトリ作っていい？」「コマンド走らせていい？」など、色々聞かれるので
[Accept]ボタンを片っ端から押下していきます。

環境構築苦手マンなので助かりますね。

セットアップ完了

作業開始から10分も経たずセットアップ完了のお知らせ。
あまりの速さに「気付いてないだけで、5時間くらい意識飛んでた？」と時計を二度見しました。

この時点でフロントエンド、バックエンドのソースがゴリゴリに作成されていてビビり散らかしてます。

実際に生成されたファイルの一部

・app.js(画面左)で画面上のボタンが押されたことを検知してローカルサーバへ命令を送信
・上記の命令をserver.js(画像右)が受け取り、公式APIサーバへ転送
こんな感じの構成になってるのかな？

これ、ホントにフリーソフト…ですよね…？

動作確認

ローカルホストのURLにアクセスしてみたところ、デバイスの代わりに表示されていたのはエラーメッセージ。

プロンプトに適当すぎる指示を出してボタン押してただけなので、逆に動かなくてちょっと安心しました。
いきなり完成品持ってこられたら、腰抜かすよ。

エラーハンドリング

スクショとエラーメッセージをプロンプトに貼り付けて対応を丸投げしたところ
10秒ほどでエラーの分析と修正までしてくれました。

「なんか分かんないんですけど、この辺いじってたら治りましたね」とか言う誰かとは大違いです。(自戒)

再び動作確認

修正が入ったので、ページを更新してみたら…
うお！表示されてる！！

うちにあるデバイスが全部見えてる！！ちょっと恥ずかしい！！

画像だと伝わりにくいんですが、マウスオーバーしたときに少し動いたり、レスポンシブデザインに対応してたり、指示してないのにかなり至れり尽くせりな感じで仕上がってます。
同じ物をゼロから自分で作ってたら2ヶ月かかっても終わらなさそう…。

ボタンが表示されたのは良いんですが、肝心なのは操作出来るかどうかなので
試しにフロアライトのボタンを押してみます。

ワ…ワァ！
まさか動くと思っていなかったので、思わず心のちいかわが出てしまいました。

改善点

・ONとOFFは出来るが、光の強弱、光の色の調整ができない
・加湿器のモード設定(弱～強、おまかせ等)ができない
・ハブ3のボタンが無反応
・エアコンの冷暖房と除湿の切り替え、温度調整、風量、風向の設定ができない

APIを眺めてたら照明は[setBrightness]や[setColor]の項目があったので、実装を頼めば
光の強弱、色を変更する項目をササッと作成してくれそうです。