[執筆中フラグ] ESPr® Developer(ESP8266ボード)でGoogle Paper Signalsしてみた

# 概要
この記事は[IoTLTアドベントカレンダーNeo版(2枚目)](https://qiita.com/advent-calendar/2017/iotlt_neo)の23日目です。
先日[Google Paper Signals](https://papersignals.withgoogle.com/)というのが公開されまして、Google Assintantアプリからペーパークラフトのガジェットを動かしたりできるようになりました。これを入手しやすいESP8266ボードのESPr® Developerで実現できたらいいなと思いチャレンジしてみましたので紹介します。
# 準備
[こちら(Building your first Paper Signal)](https://papersignals.withgoogle.com/getstarted)を参考にして用意します。

Google Paper Signalsは、Aidafruitの[Adafruit Feather HUZZAH ESP8266](https://learn.adafruit.com/adafruit-feather-huzzah-esp8266/overview)というボードを元にした[キット](https://www.adafruit.com/product/3022)で製作できるのですが、わざわざUSから入手する必要もないなと思いました。国内で販売されているESP8266ボードであればなんでもよさそうです。ここでは代表的で扱いやすいスイッチサイエンスさんのESPr® Developerを使います。

* 電子部品
 * [ESPr® Developer（ピンソケット実装済）](https://www.switch-science.com/catalog/2652/)1個
 * [SG-90 マイクロサーボモーター](http://akizukidenshi.com/catalog/g/gM-08761/) 1個
 * LED 2個、抵抗2個（省略可）
 * ブレッドボード 1個
 * ジャンパワイヤ（オスーオス）必要数
+ ペーパークラフト関係
 + A4用紙（画用紙・ケント紙などかたい目のもの）
 + のり、セロハンテープ、両面テープ
 + はさみ、カッター、さし
- スマホ
 - Googleアシスタントが入ったAndroidまたはiPhone
  - [Google アシスタント iPhoneアプリ](https://itunes.apple.com/jp/app/google-%E3%82%A2%E3%82%B7%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%88/id1220976145?mt=8)
  -  [Google アシスタント Androidアプリ](https://play.google.com/store/apps/details?id=com.google.android.apps.googleassistant&hl=ja)

今回は、Android(Nexus 5 ver.6.0.1), iOS(iPhone 5s )で検証しました。
あと、**言語設定を英語にしておく必要**があります（今のところ…）。
(Androidでは[設定]ー[言語と入力]ー[言語]から[English(United Stetes)]を選択）

# 配線
以下の図に従って、サーボモータを接続してください。

* サーボのシグナル（SG90ならオレンジ色のケーブル）は14番ピン
* Action LED（動作確認用）は、4番ピン
* Connection LED（接続確認用）は、5番ピン

![image](https://qiita-image-store.s3.amazonaws.com/0/4092/3627cffc-f6d2-5c67-0ae2-bf16f1bd1f14.png)

※4番ピンのAction LED（動作確認用）や、5番ピンのConnection LED（接続確認用）は、つながなくても動作します。

# ペーパークラフト
[Paper Signals: A Voice Experiment](https://papersignals.withgoogle.com/getstarted)に従って、Umbrellaのペーパークラフトを行います。
まずはPDFファイルの印刷を行います。
![image](https://qiita-image-store.s3.amazonaws.com/0/4092/f06ac1f0-7438-d03b-aba6-2b41710dc3a4.png)
プリントアウトしたペーパークラフトのパーツのうちパーツAだけ、以下に示すように余分に穴を開けておきます。
![image](https://qiita-image-store.s3.amazonaws.com/0/4092/5b825ce0-e6dd-c9f0-b345-f905ed96aebe.png)
ESPr® Developerをペーパークラフトの外に出して、サーボモータのケーブルとつなぐための穴になります。
[image]


# Arduino IDE側の準備
## ソフトウェアのダウンロード
Arduinoのスケッチ(Paper Signals Code)を[ダウンロード](https://github.com/googlecreativelab/paper-signals/archive/master.zip)してzipファイルを解凍します。
解凍したら、「ArduinoSignals」フォルダを探して、「ArduinoSignals」フォルダごとArduinoプロジェクトフォルダへ移動します。
![image](https://qiita-image-store.s3.amazonaws.com/0/4092/c80e401d-f889-a138-dda5-e41d8297324d.png)

ソースは[Githubに公開](https://github.com/googlecreativelab/paper-signals/tree/master/ArduinoSignals)されています。
Arduino IDEやESP8266ライブラリ、シリアルドライバはすでにインストール済みということで進めます（シリアルドライバは、最近のMac,Win10ならインストール不要のようです）。

## Arduinoスケッチの書き換え
Arduinoスケッチ`ArduinoSignals`を開くと、以下のプロジェクト構成になっています。
![image](https://qiita-image-store.s3.amazonaws.com/0/4092/a7eaeb64-fb58-67bb-ffed-1ff1f5e27a5b.png)
今回書きかえるのは、`ArduinoSignals.ino`と`Credential.h`ファイルになります。

### ArduinoJsonライブラリの追加

まず先にコンパイルのみ行っておきます。
（Arduino IDEのメニューから[スケッチ]ー[検証・コンパイル]または[✔検証]ボタンをクリック）
以下のメッセージが出れば、ArduinoJsonライブラリが入っていないのでライブラリを追加します。

```cpp
sketch\APICalls.h:18:25: fatal error: ArduinoJson.h: No such file or directory

 #include <ArduinoJson.h>
 ```
 《ライブラリの追加方法》

1. Arduino IDEのメニューから[スケッチ]ー[ライブラリをインクルード]ー[ライブラリを管理...]を選択
2. ライブラリマネージャの画面から検索欄に「ArduinoJson」を入力し検索すると以下の画面になる。
![image](https://qiita-image-store.s3.amazonaws.com/0/4092/8b3c31da-09cf-d5e6-83fc-ded87ac4df62.png)
3. ArduinoJsonの項目が表示されるので、[インストール]ボタンをクリックしてライブラリをインストールし、[閉じる]ボタンをクリックする。
4. 再度コンパイルのみ行って、コンパイルが完了するのを確認する。

### ArduinoSignals.inoの書き換え

以下のピンのマクロ定義を書きかえます。LEDを接続していない場合は書きかえず放置しておいても大丈夫です。

```cpp:ArduinoSignals.ino
#define ACTION_LED_PIN LED_BUILTIN
#define CONNECTION_LED_PIN 2
```

4番ピンのAction LED（動作確認用）、5番ピンのConnection LED（接続確認用）に書きかえます。

```cpp:ArduinoSignals.ino
#define ACTION_LED_PIN 4
#define CONNECTION_LED_PIN 5
```

LEDのオン・オフにかかわるメソッドも書きかえておきます。

```cpp:ArduinoSignals.ino
void SetActionLEDOn()
{
//    digitalWrite(ACTION_LED_PIN, false); 書きかえ前
    digitalWrite(ACTION_LED_PIN, HIGH);//書きかえ後
}

void SetActionLEDOff()
{
//   digitalWrite(ACTION_LED_PIN, true);  書きかえ前
   digitalWrite(ACTION_LED_PIN, LOW); //書きかえ後
}

void SetConnectionLEDOn()
{
//   digitalWrite(CONNECTION_LED_PIN, false);  書きかえ前
   digitalWrite(CONNECTION_LED_PIN, HIGH); //書きかえ後
}

void SetConnectionLEDOff()
{
//    digitalWrite(CONNECTION_LED_PIN, true);  書きかえ前
    digitalWrite(CONNECTION_LED_PIN, LOW); //書きかえ後
}
```

こちらもLEDを接続していない場合は書きかえず放置しておいても大丈夫です。

### Credentials.hの書き換え

#### WiFiのSSID/パスワード入力
まずは、WiFiの設定を自分の使っているものに設定します。5GHz帯のAPは使えませんので注意とあります。

```cpp:Credentials.h
/* WiFi Network must be 2.4GHz */
const String SSID = "YOUR_WIFI_NETWORK"; //自分のAP（アクセスポイント）のSSID
const String Password = "YOUR_WIFI_PASSWORD"; //自分のAP（アクセスポイント）のパスワード
```

#### GoogleアシスタントのシグナルIDの入手と入力
次に、Googleアシスタントアプリに表示させたシグナルID文字列を入力します。

```cpp:Credentials.h
/* Your Signal ID should be lowercase, and each word should be separated by dashes. 
If Google Assistant spoke too quickly, you can ask to repeat the identifier at any 
time be saying "What is the setup code for [SIGNAL NAME]?" */
const String SignalID = "your-signal-id"; //自分のシグナルID
```

シグナルID文字列の入手には、Android/iPhoneのスマホアプリGoogleアシスタントが必要です。
まずGoogleアシスタントを起動します。
![Kobito.1E7LwD.png](https://qiita-image-store.s3.amazonaws.com/0/4092/25689ea9-20e9-ac40-acd4-f10a7e71dd6f.png "Kobito.1E7LwD.png")

自分のgmailアカウントで入っておきます。[CONTINUE...]ボタンをタップします。
![image](https://qiita-image-store.s3.amazonaws.com/0/4092/d9eb58a9-5707-64c6-2609-220cffca4161.png)
次の画面で、[YES I'M IN]ボタンをタップします。
![image](https://qiita-image-store.s3.amazonaws.com/0/4092/eaafdff4-64b0-63c0-7302-c1fc31f47f55.png)
通知やメールについての表示が出ますが適宜返答して、以下の画面でキーボード入力アイコンをタップします。
![Kobito.aIxivg.png](https://qiita-image-store.s3.amazonaws.com/0/4092/2b25f5d2-9572-36b6-6465-8791aeb4d597.png "Kobito.aIxivg.png")
Googleアシスタントに、"`Talk to paper signals`"とキー入力し[Send]ボタンをタップします（マイク入力アイコンをタップして音声で入力しても構いません。結構認識してくれます:smile:）。
![Kobito.NJ6bOg.png](https://qiita-image-store.s3.amazonaws.com/0/4092/b9792ec7-574d-6cd3-7724-190a40dc1d66.png "Kobito.NJ6bOg.png")

6種類あるPaper Signalを選択する表示になるので今回は"`Umbrella Signal`"をタップします。
![Kobito.OoS9YJ.png](https://qiita-image-store.s3.amazonaws.com/0/4092/7ac1b77b-4bd4-a95e-585a-7e64b14c036b.png "Kobito.OoS9YJ.png")

準備ができているか確認されるので、"`I'm ready`"ボタンをタップします。
次に、シグナルIDが表示されます。
![Kobito.dfSs6g.png](https://qiita-image-store.s3.amazonaws.com/0/4092/58333e65-62c3-21eb-8c46-971271de6b56.png "Kobito.dfSs6g.png")
シグナルIDは英単語3ワードをハイフンで区切ったものになります。
これを`Credential.h`ファイルに入力します。
![image](https://qiita-image-store.s3.amazonaws.com/0/4092/20b23f6c-8c75-52c3-1118-fff22cb33eae.png)

#### 天気APIサービスのDarkSkyのAPIキーの入手と入力

"`Umbrella Signal`"では、天気と位置の情報が必要です。Dark SkyのWeather APIキーとGoogleマップ のGeocoding APIキーを取得して以下のソース部分に入力します。

```cpp:Credential.h
/* Enter the below API keys to track the weather on Umbrella Signal and Pants Signal. */
const String DarkSkyAPIKey = "YOUR_DARK_SKY_API_KEY"; //天気APIのDark SkyのAPIキーを取得して入力
const String GeoCodingAPiKey = "YOUR_GEOCODING_API_KEY"; //Google Map のAPIキーを取得して入力
```

Dark Skyのweather APIのAPIキーは以下のサイトから無料登録して入手します。
[Dark Sky API ](https://darksky.net/dev)

Googleマップ のGeocoding APIキーは、以下のサイトなどから入手します。
[キーの取得、認証  |  Google Maps Geocoding API  |  Google Developers](https://developers.google.com/maps/documentation/geocoding/get-api-key?hl=ja)

以上、ArduinoSignalsスケッチの書き換えが終わったら、ESPr® Developerに書き込みます。
（Arduino IDEのメニューから[スケッチ]ー[マイコンボードに書き込む]または[→マイコンボードに書き込む]ボタンをクリック）

# 動作確認
## Arduino IDE シリアルモニタ側 接続確認
ArduinoSignalsスケッチの書き込みが終わったら、シリアルモニタを開いてモニタします。
（Arduino IDEのメニューから[ツール]ー[シリアルモニタ]または[🔎シリアルモニタ]ボタンをクリック）
![image](https://qiita-image-store.s3.amazonaws.com/0/4092/0cf7a15b-754e-3b1c-3495-5fdfbdbc5cea.png)
シリアル通信速度を115200bpsにセットしてください。まずWiFi接続によるプライベートIPアドレスの表示が行われ、Firebaseサービスとの接続が定期的に行われます。
Googleアシスタント アプリ側で、天気予報を行う場所の指定を行った後、シリアルモニタで動作確認を行いますので、シリアルモニタをこのままにしておきます。

## Googleアシスタント アプリ側
まずはGoogleアシスタント上で再度"`talk to paper signals`"と入力します。キー入力でも音声入力でも構いません。
![Kobito.M83t35.png](https://qiita-image-store.s3.amazonaws.com/0/4092/eff5486e-9f12-8c16-1bbc-98138ae409ab.png "Kobito.M83t35.png")
次に、"`Test Umbrella Signal`"をタップします（隣の"`Create a new signal`"をタップすると、残り5種類のPaper signalを試すことができます)。
![Kobito.SOITuQ.png](https://qiita-image-store.s3.amazonaws.com/0/4092/80a6dfa3-ef79-41b0-6a21-de411e8d28e8.png "Kobito.SOITuQ.png")
Arduino側がうまく通信していれば、トラッキングすべき雨の降る場所について聞いてきます。"`track the rain`"をタップします（"`will I need an umbrella`"でも結果同じ）。
![Kobito.7cDTne.png](https://qiita-image-store.s3.amazonaws.com/0/4092/765c3300-20e0-302d-06ae-9c59192304cc.png "Kobito.7cDTne.png")
雨の降る場所の地名、住所、都道府県を入れます。ここでは、"`Tokyo`"にしました。
![Kobito.f8AVgL.png](https://qiita-image-store.s3.amazonaws.com/0/4092/16f76022-78b3-9d42-f34f-ffbb87095aae.png "Kobito.f8AVgL.png")
以下のメッセージが出ればGoogleアシスタント側のUmbrella Signalの設定は完了です。
"`No Thanks`"をタップしていったんPaperSignalのアシスタント会話は終了します。
![Kobito.5ypRHU.png](https://qiita-image-store.s3.amazonaws.com/0/4092/24699e72-4107-b940-2a79-2baf33712d47.png "Kobito.5ypRHU.png")

## Arduino IDE シリアルモニタ側 動作確認
しばらく待っていると、"`Tokyo`"の緯度・経度のリクエストが入ります。
![image](https://qiita-image-store.s3.amazonaws.com/0/4092/b8cef428-b606-a06a-5c61-a18efdd99520.png)
その結果返ってきた位置情報jsonの緯度・経度を使って、DarkSky.netに天気予報をリクエストします。
![image](https://qiita-image-store.s3.amazonaws.com/0/4092/78febaba-c095-1c85-4fd3-4451a844b5ed.png)
返ってきた天気予報のjsonの中にあるiconキーの値によって、サーボモータに取り付けられた傘が開いたり閉じたりする仕組みです。
![image](https://qiita-image-store.s3.amazonaws.com/0/4092/5582656e-bfd4-49aa-6378-3a5f7293d924.png)
上記のような表示であれば、Arduino側の接続および動作は問題なく行われています。

## 雨の降っている場所にトラッキング位置を変更して、動作を確認する。
以上の設定で、東京のUmbrella Signalの設定はできましたが、雨が降っていないとペーパークラフトの傘が開きません。
そこで、DarkSky.netで雨の降っている場所を見つけて、トラッキング位置を変更してみましょう。
まずは、 http://darksky.net にアクセスして、"Tokyo"で検索し天気を見てみます。「emoji」の天気マップにすると、探しやすいと思います。
![Kobito.Ild9eW.png](https://qiita-image-store.s3.amazonaws.com/0/4092/240dd64c-8923-57a3-f44e-dc479f26cd12.png "Kobito.Ild9eW.png")
天気マップをスクロールして、ようやく雨の絵文字がある地域を見つけました。"Stockholm"が良さそうです。
![Kobito.AQSuGL.png](https://qiita-image-store.s3.amazonaws.com/0/4092/25219850-b6a0-688a-f929-45a1430ad0a4.png "Kobito.AQSuGL.png")
Googleアシスタントアプリで"Talk to paper signals"-"Modify Umbrella Signal"-"track the rain"-"Stockholm"（ここは雨が降っていそうな地域の地名ならなんでも良い）と入力していけば、ペーパークラフトの傘が開くでしょう:umbrella::umbrella::umbrella: