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

# はじめに
[前回記事](https://qiita.com/miso_develop/items/27f0e22f26aa0311dac3)で作成したお手軽Wi-Fi物理スイッチをFirebase経由で操作することでGoogle Homeからだけでなく、Webアプリからも簡単に操作できるようにしてみます。

前回はESP32を使用しましたが、今回はESP8266が手元に届いたのでこちらで組んでみました。
ESP8266なら開発ボードが300円程度で入手できるので大幅なコストダウンができ、トータル**500円ほど**で作成することができました。



# 実際の動作

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Qiita記事用動画です。<br>Webアプリからお手軽Wi-Fi物理スイッチを操作。 <a href="https://t.co/jQJEsPxywY">pic.twitter.com/jQJEsPxywY</a></p>&mdash; 田中みそ (@miso_develop) <a href="https://twitter.com/miso_develop/status/947475270876856320?ref_src=twsrc%5Etfw">2017年12月31日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



# 処理の流れ
![image](https://qiita-image-store.s3.amazonaws.com/0/207109/b194d550-6cde-fa0f-ce94-2b282206eac5.png)



# いるもの

|いるもの|価格(&yen;)|備考|
|---|--:|---|
|[ESP8266開発ボード](https://ja.aliexpress.com/item/V2-4M-4FLASH-NodeMcu-Lua-WIFI-Networking-development-board-Based-ESP8266/32647690484.html)|292|　|
|[サーボモーター](https://ja.aliexpress.com/item/1-9-6ch-rc-helcopter-kds-esky-sg90/32840380975.html)|125|SG90|
|[電池ケース](https://ja.aliexpress.com/item/AA-Size-Power-Battery-Storage-Case-Box-Holder-Leads-With-1-2-3-4-Slots-of/32823420615.html)|31|単3×2本|
|[基盤](http://akizukidenshi.com/catalog/g/gP-12731/)|15|使わなくてもいいかも|
|ケース|34|100均で3箱セットのタッパーとかで適当に|
|**合計**|**497**|　|

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

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

* Firebase Realtime Databaseの作成
* Webアプリをデプロイ
* 開発環境構築
* 回路作成
* ESP8266へソース書き込み
* IFTTT Applet作成



## Firebase Realtime Databaseの作成
[Firebaseコンソール](https://console.firebase.google.com/)にてプロジェクトを作成し、以下のようにRealtime Databaseを作成して下さい。

```
プロジェクト名-xxxxx
 └ googlehome
 　 └ word: ""
```

そしてルールタブよりセキュリティルールを以下のように書き換えて下さい。
※プロジェクトIDを知ってれば誰でも読み書き自由のガバガバルールのなので管理に気をつけて下さい。

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



## Webアプリ
以下の過去記事の「作り方」を「デプロイ」まで実施してみて下さい。
[WebからGoogle Homeを喋らせたり家電操作したりしてみる(作り方)](https://qiita.com/miso_develop/items/09fcce17162db49dec55#%E4%BD%9C%E3%82%8A%E6%96%B9)

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

### data.jsへ追記
上記の記事でGitHubからダウンロードした状態の`data.js`に物理スイッチ用のタブとボタンを追加します。
以下のコードを追記してみて下さい。

```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 ボードをインストールする方法)](https://www.mgo-tec.com/esp8266-board-install01-html)の、
「１．Arduino IDE インストール」
「２．Arduino IDEのボードマネージャーにStable版ESP8266ボードをインストール」
を実施してみて下さい。
とても丁寧に解説されています。

「３．Arduino IDEの設定」は行わず、代わりにArduino IDEにて「ツール > ボード」より「NodeMUC 1.0(ESP-12E Module)」を選択して下さい。
シリアルポートもESP8266に相当するのを選択して下さい。
他の設定はデフォルトでおっけーです。

### Firebaseライブラリのインストール
[こちらの記事(ArduinoからFirebase(データベース)にアクセスする)](https://qiita.com/dobnezmi/items/3b5e52fdc3cc9fe274c5)より抜粋です。

> ArduinoからFirebaseのAPIを叩くための[FirebaseArduino](https://github.com/firebase/firebase-arduino)というライブラリが公開されています。これをArduinoIDEに取り込みます。
> まずzipファイルでダウンロードします。
> 
> 次にArduinoIDEから「スケッチ-ライブラリをインクルード-.zip形式のライブラリをインストール...」と選択して、さきほどダウンロードしたzipファイルを選択します。

↑だけです。簡単です。

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



## ESP8266へソース書き込み
以下のソースをArduino IDEに貼っつけてESP8266へ書き込んで下さい。
`FIREBASE_HOST`、`WIFI_SSID`、`WIFI_PASSWORD`は自身の環境のものに書き換えて下さい。

```c
#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](https://qiita-image-store.s3.amazonaws.com/0/207109/2116cffe-e6e8-7bde-6776-a19f205437b5.jpeg)

サーボモーターからは3色のケーブルが出ています。
それぞれのケーブルを以下のようにESP8266へ繋ぎます。

|サーボモーター|ESP8266|備考|
|---|---|---|
|茶色|GND|GND|
|赤|3.3V|電源|
|オレンジ|D8(GPIO15)|信号|

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

ちなみにGPIOが基盤にプリントされてなくぱっと見どれがどこか分かないので、[こちら](http://play.fallows.ca/wp/projects/electronics-projects/understanding-nodemcu-esp8266-12e-limitations/)の図を参考にしてみて下さい。
(今見返してみるとD4(GPIO02)、3.3V、GNDの並びに繋いだ方が配線すっきりですね…)

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

## IFTTT Appletの作成
ついでにGoogle Homeからも音声操作できるようにしちゃいましょう。
IFTTTで以下のようにAppletを作成します。

### 「this」のレシピ
「Google Assistant」の「Say a simple phrase」で以下のように設定します。
![image](https://qiita-image-store.s3.amazonaws.com/0/207109/fee5880d-c6f9-3367-7a5f-c4e49eac7dc3.png)

### 「that」のレシピ
「Webhook」の「Make a web request」で以下のように設定します。
URLの「xxxxxxxx-xxxxx」の部分はFirebaseのプロジェクトIDに書き換えて下さい。
![image](https://qiita-image-store.s3.amazonaws.com/0/207109/4a34fe29-575c-2d20-862e-90761d202288.png)

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



# おわりに
Wi-Fi装置がワンコインで買えちゃうなんてやばいですね。
サーボモーター制御を応用してスマートロックなんかもそのうち作ってみようと思います。

さてもうすぐ2017年も終わりですね。
みなさま良いお年を。