見出し画像

SwitchBot+IFTTT+Webhookでスマート家電をRESTで操作

どうも。たぱすたぱすたです。

ネット上では散々擦られているテーマだと思いますが、備忘録も兼ねて記事にしたためようと思います。

前置き

先日、AmazonのブラックフライデーでSwitchBotのハブミニを購入しました。ハブとは名ばかりで実質赤外線コントローラーですけどね。ほかのSwitchBot製品があれば連携可能なようです。(素直にLAN内で全機操作できればいいのに

一週間ほど使ってみましたが、結構不満な点が多いんですよね。

  • デバイス登録直後はSwitchBotアプリ内でしか操作できない

  • 外部から操作するには各種操作を「シーン」としてひとつひとつ登録しなければいけない

  • ラグがまあまあ気になる

1つ目を解決するために2つ目の作業しないといけないのですが、それがとても面倒。シーンひとつひとつをiOSのショートカットに割り当てたり、IFTTT連携させたりするとなると、(シーン数)×(割り当てアプリ数)の作業を行わなければいけないのでかなり大変です。

いろんな機器から家電操作するなら操作基盤をどこかに集約しておきたいなと思って試したことを紹介します。

IFTTTでRESTAPI化できる

RESTで操作できたらいいなと思ってたところ、IFTTTとSwitchBot連携すればREST化できました。

※IFTTT連携するにはSwitchBotハブプラスorハブミニが必要みたいです

IF|Webhooksを設定

IFのサービスにWebhooksを選択します
Event NameでRESTで指定するパスを設定できます

Then|SwitchBotを設定

SwitchBotアカウントでログインすると、登録しているデバイスと操作を選択できます。選択肢が複数あるので、目当てのものは頑張って探してください。

URLを確認する

上記ページのDocumentationを開きます。

{event}を上で設定したEvent Nameに置き換えると、そのURLをたたけばSwitchBotが反応するようになります。

Webアプリを作成する

GETで動くのでそのままURL直打ちでもいいですが、使い勝手を良くするためにGUIを作りましょう。

今回は遊びも兼ねてnode+electronで作りました。

  <main class="flex-shrink-0">
    <div class="container">
      <button type="button" class="btn btn-primary" id="lightOnButton">電気On</button>
      <button type="button" class="btn btn-primary" id="lightOffButton">電気Off</button>
    </div>
  </main>

HTML側の実装です。ボタンにIDを振ってます。

const axios = require('axios')

const lightOnButton = document.getElementById("lightOnButton")
const lightOffButton = document.getElementById("lightOffButton")

lightOnButton.addEventListener('click',(event)=> {
    axios.get("https://maker.ifttt.com/trigger/turn_on_light/with/key/$your_own_key$")
    .then(function (response) {
      // handle success
      console.log(response);
    })
    .catch(function (error) {
      // handle error
      console.log(error);
    })
})

lightOffButton.addEventListener('click',(event)=> {
    axios.get("https://maker.ifttt.com/trigger/turn_off_light/with/key/$your_own_key$")
    .then(function (response) {
      // handle success
      console.log(response);
    })
    .catch(function (error) {
      // handle error
      console.log(error);
    })
})

JS側の実装です。振ったIDの要素を取得して、クリックイベントを定義します。クリックイベントの中でaxiosでRESTをたたかせるだけの簡単な仕組みです。

簡単に作っただけなのでUIがあれですが、これですぐ動くようになりました。
ローカルにおいておけば自分のデバイスどれからでもアクセスできるのがいいですね。
URLが流出すると不特定多数の人間が自宅内のデバイスを操作できるようになってしまうので、くれぐれも外部に公開しないように気を付けてください。万が一公開してしまった場合はキーを再生成しましょうね。

終わりに

今回はSwitchBotをいい感じにWebアプリで動かす方法を紹介しました。
SwitchBotが普通にREST対応してればこんなことしなくていいのに
なんで全機種デバイスサーバーにしてIP振らせないないのかも謎

実は今回の記事の要旨はここに載ってたのですが、記事書いてる途中で気づいたので許してほしいです。

https://support.switch-bot.com/hc/ja/articles/360037747734-PC%E3%81%A7SwitchBot%E3%83%9C%E3%83%83%E3%83%88%E3%82%92%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

それでは、次回もよろしくお願いいたします。


この記事が気に入ったらサポートをしてみませんか?