Edited at

WebアプリからWi-Fi物理スイッチを操作してみる

More than 1 year has passed since last update.


はじめに

前回記事で作成したお手軽Wi-Fi物理スイッチをFirebase経由で操作することでGoogle Homeからだけでなく、Webアプリからも簡単に操作できるようにしてみます。

前回はESP32を使用しましたが、今回はESP8266が手元に届いたのでこちらで組んでみました。

ESP8266なら開発ボードが300円程度で入手できるので大幅なコストダウンができ、トータル500円ほどで作成することができました。


実際の動作


処理の流れ

image


いるもの

いるもの
価格(¥)
備考

ESP8266開発ボード
292
 

サーボモーター
125
SG90

電池ケース
31
単3×2本

基盤
15
使わなくてもいいかも

ケース
34
100均で3箱セットのタッパーとかで適当に

合計
497
 

前回のESP32構成の半額程度で済んじゃいました。


作り方

以下の流れで作っていきます。


  • Firebase Realtime Databaseの作成

  • Webアプリをデプロイ

  • 開発環境構築

  • 回路作成

  • ESP8266へソース書き込み

  • IFTTT Applet作成


Firebase Realtime Databaseの作成

Firebaseコンソールにてプロジェクトを作成し、以下のようにRealtime Databaseを作成して下さい。

プロジェクト名-xxxxx

└ googlehome
  └ word: ""

そしてルールタブよりセキュリティルールを以下のように書き換えて下さい。

※プロジェクトIDを知ってれば誰でも読み書き自由のガバガバルールのなので管理に気をつけて下さい。

{"rules": {".read": true, ".write": true}}


Webアプリ

以下の過去記事の「作り方」を「デプロイ」まで実施してみて下さい。

WebからGoogle Homeを喋らせたり家電操作したりしてみる(作り方)

やることは単純で、ソース落としてFirebase Hostingへデプロイするだけです。


data.jsへ追記

上記の記事でGitHubからダウンロードした状態のdata.jsに物理スイッチ用のタブとボタンを追加します。

以下のコードを追記してみて下さい。


data.js

    {

"name": "スイッチ",
"buttons": [
{"name": "お風呂沸かし", "command": "esp8266 bath", "column": "1"},
],
},

command部のesp8266 bathという文字列が先程作成したFirebaseのRealtime Databaseへ書き込まれるとESP8266が反応し、サーボモーターを動かしてスイッチを押します。

また、その他既存のコードは必要に応じて削除したりカスタマイズしちゃって下さい。


開発環境構築

以下の2ステップを行います。

環境構築というと重い気分になりますが、結構さっくり終わります。


  • Arduino IDEとESP8266ライブラリのインストール

  • Firebaseライブラリのインストール


Arduino IDEとESP8266ライブラリのインストール

こちらの記事(Arduino IDE に Stable ( Staging )版 ESP8266 ボードをインストールする方法)の、

「1.Arduino IDE インストール」

「2.Arduino IDEのボードマネージャーにStable版ESP8266ボードをインストール」

を実施してみて下さい。

とても丁寧に解説されています。

「3.Arduino IDEの設定」は行わず、代わりにArduino IDEにて「ツール > ボード」より「NodeMUC 1.0(ESP-12E Module)」を選択して下さい。

シリアルポートもESP8266に相当するのを選択して下さい。

他の設定はデフォルトでおっけーです。


Firebaseライブラリのインストール

こちらの記事(ArduinoからFirebase(データベース)にアクセスする)より抜粋です。


ArduinoからFirebaseのAPIを叩くためのFirebaseArduinoというライブラリが公開されています。これをArduinoIDEに取り込みます。

まずzipファイルでダウンロードします。

次にArduinoIDEから「スケッチ-ライブラリをインクルード-.zip形式のライブラリをインストール...」と選択して、さきほどダウンロードしたzipファイルを選択します。


↑だけです。簡単です。

以上で開発環境構築は完了です。


ESP8266へソース書き込み

以下のソースをArduino IDEに貼っつけてESP8266へ書き込んで下さい。

FIREBASE_HOSTWIFI_SSIDWIFI_PASSWORDは自身の環境のものに書き換えて下さい。

#include <ESP8266WiFi.h>

#include <FirebaseArduino.h>
#include <Servo.h>

//Firebase情報
#define FIREBASE_HOST "xxxxxxxx-xxxxx.firebaseio.com"

//Wi-Fi情報
#define WIFI_SSID "xxxxxxxx"
#define WIFI_PASSWORD "xxxxxxxx"

//Firebase Realtime Database
#define PATH "googlehome/word"
String prefix = "esp8266 ";

//サーボ用のオブジェクト
Servo servo;

//15番PIN(D8)
int pin = 15;

//
void setup() {
Serial.begin(115200);

// connect to wifi.
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
Serial.print("connecting");
while (WiFi.status() != WL_CONNECTED) {
Serial.print(".");
delay(500);
}
Serial.println();
Serial.print("connected: ");
Serial.println(WiFi.localIP());

//firebase
Firebase.begin(FIREBASE_HOST);

//servo
servo.attach(pin);
}

//
void loop() {
//Realtime Databaseの情報取得
String word = Firebase.getString(PATH);
if (word.indexOf(prefix) > -1) {
//`esp8266 `を除いた文字列を取得
String value = word.substring(prefix.length());
if (value == "bath") {
//サーボモーターを動かす
servo.write(85);
delay(500);
servo.write(70); //サーボモーターの押し込み具合はここで調節
delay(500);
servo.write(85);

//Firebaseの情報クリア
Firebase.setString(PATH, "");
}
}
delay(1000);
}


回路作成

こんな感じに組みます。

201712311341160557.JPG

サーボモーターからは3色のケーブルが出ています。

それぞれのケーブルを以下のようにESP8266へ繋ぎます。

サーボモーター
ESP8266
備考

茶色
GND
GND


3.3V
電源

オレンジ
D8(GPIO15)
信号

あとはGNDと電源に電池繋げて完成です。

ちなみにGPIOが基盤にプリントされてなくぱっと見どれがどこか分かないので、こちらの図を参考にしてみて下さい。

(今見返してみるとD4(GPIO02)、3.3V、GNDの並びに繋いだ方が配線すっきりですね…)

ここまで来ればWebアプリのボタンを押してESP8266と繋いだサーボモーターを動かすことができるようになります。


IFTTT Appletの作成

ついでにGoogle Homeからも音声操作できるようにしちゃいましょう。

IFTTTで以下のようにAppletを作成します。


「this」のレシピ

「Google Assistant」の「Say a simple phrase」で以下のように設定します。

image


「that」のレシピ

「Webhook」の「Make a web request」で以下のように設定します。

URLの「xxxxxxxx-xxxxx」の部分はFirebaseのプロジェクトIDに書き換えて下さい。

image

これでGoogle Homeに話しかけて物理スイッチを音声操作できるようにもなりました。


おわりに

Wi-Fi装置がワンコインで買えちゃうなんてやばいですね。

サーボモーター制御を応用してスマートロックなんかもそのうち作ってみようと思います。

さてもうすぐ2017年も終わりですね。

みなさま良いお年を。