Make
BulmaReactWebアプリスマートプラグ

スマートプラグをWebアプリから操作できるようにしてみた

Make
この記事は約4分で読めます。
スポンサーリンク

お仕事でスマートプラグを使わなければならなくなり、使う方法をあれこれ探していました。

いざ実践投入をしようとした頃に諸事情により使用しなくてもよくなり、お払い箱になりました。

使わなくなったので終了するのは勿体なので、せっかくなのでちょっと遊んでみることにしました。

スポンサーリンク

スマートプラグ

遊んでみたもの

使用したものは tp-link の HS105 です。

Amazon で結構人気なものとなります。

セットアップは公式に書いてあるのでわりとスムーズにおわります。

HS105 のコンテンツ | TP-Link 日本
TP Link - Download Center Detail
www.tp-link.com

ちょっとめんどくさいところ

いろいろ調べた限りでは遠隔で操作をするには専用のアプリが必要であり、会員登録が必要とのこと。

そのため以下を行いたいとなると面倒と感じました。

  • ひとつのスマートプラグを他の端末から操作するには都度アプリを入れる必要がある
  • パソコンから操作できない

 

上記の二つを解決する方法はないかなぁと探っていたときに、どうやら IFTTT に対応していることをしりました。

TP-Link Kasa Integrations - Connect Your Apps with IFTTT
Integrate TP-Link Kasa with over 900 of your favorite apps & devices to unlock powerful automations on IFTTT. Get started today!
ifttt.com

IFTTT に対応しているので webhooks で スマートプラグを ON/OFF できるように設定してあげて URL を叩けるようにしてあげれば上記のめんどいところが解決できると考えました。

作ったもの

作ったものはWebアプリからスマートプラグを ON/OFF するやつをつくってみました。

とりあえずはローカルネットワーク内で動かしたまでです。

概要

つくりは単純で Web アプリから POST を行い、 IFTTT がいい感じに解釈をしてスマートプラグを ON/OFF してくれます。

IFTTT の設定

Web hooks に kasa の “Turn on” と “Turn off” を登録してあげます。

IFTTT は合計で 2 つ作ることになります。

スマートプラグを ON にする用の POST URL と、 スマートプラグを OFF にする用の POST URL です。

 

わたしの場合は以下のような URL を生成されました。

  • スマートプラグ ON : トリガーは smartPlug_ON
    ttps://maker.ifttt.com/trigger/smartPlug_ON/with/key/YOUR_WEBHOOKS_API
  • スマートプラグ OFF : トリガーは smartPlug_OFF
    ttps://maker.ifttt.com/trigger/smartPlug_OFF/with/key/YOUR_WEBHOOKS_API

※ YOUR_WEBHOOKS_API は Webhooks の設定のところで確認できます。

Web App の開発

Web アプリは React + Bulma を使って開発しました。

前々から React を使ってみたいなと思っていたのと、会社のフロントエンドはほとんどが React を使っているそうなので今後のために触れておいても損がないとのことで採用しました。

Bulma はいつも使っているので採用しました。軽量で CSS のみの作りなのが良いです。

 

いい感じに UI を整えて完成させました。

Web App は Git Hub にアップロードしておきます。

GitHub - Momijinn/SmartPlug_WebApp
Contribute to Momijinn/SmartPlug_WebApp development by creating an account on GitHub.
github.com

Web App の設定

github から落としてきた物をそのまま利用することができません。

先ほど IFTTT から取得した Webhooks API を confing.js に入れる必要があります。

編集後は yarn install からの yarn start で動くかと思います。

まとめ

スマートプラグを Web アプリからでも動かせるようにしてみました。

Webアプリを作る過程で はじめて React を使ってみましたがまだ React の厳密さに慣れていない感じです。( Vue のゆるさに慣れてしまい React の厳密さに慣れない・・・)

ともあれ、React を学べて良かったです。次回も使ってみようと思います。

 

今回作ったものは、実生活では使えないかなぁという気持ちです。

URL を知っていればだれでも操作可能なのでパスワード等を付けないとお外(ローカルエリア外)では使えないなぁという印象です。

ともあれスマートプラグを専用アプリ以外から操作できるようになりました。

スポンサーリンク

コメント

  1. 名前:佐藤禎宏 :投稿日：2022/11/10(木) 10:57:29 ID：I2Mjk3Mjc

    Kasa smart plug を使っています。スマホ Kasa アプリを使って、スイッチのON、OFFして利用しています。そこで、Kasa の　Web アプリがないものか検索してこのページを見つけました。
    Kasa の Webアプリ がないことが分かった。Kasa 会社にリクエストしてみようかと思っている次第です。

    返信
    • 名前:miyakawa :投稿日：2022/11/11(金) 13:18:27 ID：Q4MTQxOTk

      どうぞ、リクエストしてみてください。

      返信
タイトルとURLをコピーしました