背景
3年前に構築したGoogle HomeとIFTTTと自宅のサーバ(Rasberry Piでもok)で簡単家電操作 の続きです
スマホだけではなく あらゆる端末から自宅家電を操作したくなりました
前提条件
Google HomeとIFTTTと自宅のサーバ(Rasberry Piでもok)で簡単家電操作の環境が構築されていること
材料
構成
おさらいですが前回までにこんな感じで自宅環境が構築されていると想定します
API
つまり下記のAPIができていると仮定します
| アクション | API | 実際のコマンド |
|---|---|---|
| tvの電源をつける | http://api.my.domain/[broadlinkのmacaddress]/tv | $ broadlinkjs-rm-cli [broadlinkのmacaddress] tv |
| tvのボリュームを上げる | http://api.my.domain/[broadlinkのmacaddress]/tv_vol_Pup | $ broadlinkjs-rm-cli [broadlinkのmacaddress] tv_vol_up |
| 7チャンネルに切り替える | http://api.my.domain/[broadlinkのmacaddress]/tv_7 | $ broadlinkjs-rm-cli [broadlinkのmacaddress] tv_7 |
| などなど。。。 |
Google App Script
GASの具体的なはじめかたは省略しますが下記のように
api叩き先と叩いたあとredirectするようなかんたんなAPIを作成し web appとして公開します
Code.gs
function doGet(e) {
UrlFetchApp.fetch(e.parameter.get, {'method':'get'});
return HtmlService.createHtmlOutput(
"<script>window.top.location.href='"+e.parameter.redirect+"';</script>"
);
}
| パラメータ名 | 意味 | 例 |
|---|---|---|
| get | API叩き先 | http://api.my.domain/[broadlinkのmacaddress]/tv |
| redirect | get後の遷移先 | https://www.google.com/ |
webflow
webflowを使ってボタンだらけのUIを作ります
もちろんボタンのリンクはこのような形になります
https://script.google.com/macros/s/[GAS Key]/exec?redirect=[publishしたあとのwebflowページのURL]&get=[URLエンコードしたAPIのURL]
実際の動き
こんな感じで UI->GAS->API-リダイレクト->UI
となっていて とても動きはもっさりしていますがなんとか実用に耐えられるレベルです
bubble.ioやadalo.com等試してみましたが挫折し、UIはwebflowに落ち着きました
注意事項
今の構成だと、セキュリティ的な防御はまったくなく、誰でも自宅の家電を操作出来てしまいますので
お気をつけください
引き続き、下記どちらも何か有りましたらpull requestでFBいただけると幸いです
最後まで読んで頂きありがとうございました。