【初心者向け】ビジュアルプログラミングアプリRobipを使って、Gmail着信を光って知らせるアイテムを作る方法

電子工作をしたい！とあなたが思ったとしましょう。
とりあえず、インターネットで色々調べると思います。又は直接、秋葉原に出かけ秋月電子通商や千石電商に足を運び、情報を得ると思います。
しかし、大体の場合はつまづきます。まずはマイコンをどれにするか、Arduino(アルデュイーノ)UnoだのDueだのNanoだの....素人では違いすらわかりません。
じゃ、Raspberry Piの方が良いよ！と言われますが、マイコンが乗っているボードという点は同じですが、似てて非なる別物です。Raspberry PiはLinuxというOSが乗ってます。Arduino(アルデュイーノ)は乗ってません。
その辺を1から勉強して、いざプログラムを書き込んで思い通りに動かそうと思っても、設定でつまづいたり、エルチカでつまづいたりします。
私もここまでくるのにかなりの時間を使いました。（笑）

なるべくつまづきを少なくして、楽しいい部分を味わいたい。皆そうですよね。
そこで生まれたのが、プログラミングソフトRobipです。
今回は「プログラミングソフトRobip」と、スイッチサイエンスから購入できる「ESP-WROOM-02開発ボード」を使って、Wi-Fi経由でメール（Gmail）の通知を光でお知らせしてくれるアイテムを作成します。


## ビジュアルプログラミングアプリRobipとは？
ニャンパス株式会社が開発した、ビジュアルプログラミングアプリです。同じくニャンパス株式会社が開発したHaLake Kitは勿論の事、ESP-WROOM-02 Wi-Fiモジュール等に、プログラムを書き込む事ができる開発環境の事です。
Wi-Fi経由で書き込む事が可能な為、PCを使わず開発が行なえます。
[プログラミングソフトRobip](https://robip.halake.com/)

## ESP-WROOM-02開発ボードとは？
![7a35a360-fbf7-ec7e-6eaf-ef08df0058cc.png](https://qiita-image-store.s3.amazonaws.com/0/46262/5a7c45b2-3aae-1fdd-4a5e-c78670feba04.png)

ESP-WROOM-02開発ボードはスイッチサイエンスで製造販売をしているESP8266EXを搭載したWiFiモジュール及びマイクロUSBが内蔵されている基板です。
現在は、スイッチサイエンスのサイトから購入が可能です。
販売価格2,160円です。※2016年5月22日現在
[ESP-WROOM-02開発ボードの購入](https://www.switch-science.com/catalog/2500/)

## 構成イメージと購入するもの
構成としては、メール(Gmail)が届いた時に、IFTTTを経由し、ご自宅のWi-Fiからライトを光らすというものです。
何を言ってるのか分かりにくいので、早速作ってみましょう。作ってみれば何となく分かります。
![構成図.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/05939738-9701-5bbb-7442-70c26791a3b3.jpeg)

### 購入するもの
基本的には下記以外の物は他でも代用が可能ですが、もしよくわからなければ、そのままそっくり購入してください。

* [ESP-WROOM-02開発ボード](https://www.switch-science.com/catalog/2500/) ¥2,160※2016年6月7日現在
* [LEDライト](http://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-4KL3)¥220※2016年6月7日現在

## まずはプログラミングソフトRobipとESP-WROOM-02開発ボードをWi-Fi経由で更新が出来る様にします。
こちらに以前、投稿させて頂いた記事がありますので、参考に設定を行なってみてください。
[【初心者向け】プログラミングソフトRobipで、ESP-WROOM-02開発ボードをWi-Fi経由でプログラム更新が出来る様にする](http://qiita.com/cw-hirama/items/c6593dc4d6020cbafefb)

## IFTTTでレシピを作成する
IFTTTとは既存のWebサービス同士を連携させ、個人がより便利にカスタマイズできるサービスです。今回は、こちらでGmailからESP-WROOM-02開発ボードへ更新情報を送り込むレシピを作ります。

### IFTTTの登録方法
[https://ifttt.com](https://ifttt.com)にアクセスして頂き登録を済ませます。
【Sign Up】ボタンをクリックすると下記の様な画面がでますので、メールアドレスをパスワードを設定してください。
![ifttt登録1.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/362d590d-5cf0-3705-86ef-898a21f2cae1.jpeg)

次に、登録したメールアドレス宛にIFTTTよりメールがきているので、「Confirm your account」をクリックすれば登録完了です。
![ifttt登録2.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/2afdbee4-2dea-0fb7-d41d-d6dc1f1d190b.jpeg)

### IFTTTでレシピの作成
早速、レシピを作りましょう。レシピは「もしも■の場合●をする。」の様に■と●の部分を繋げたいサービスを組み合わせる事で簡単につくれてしまいます。

【My Recipes】をクリックし、ページ内の「Create Recipes」をクリックします。
![ifttt1.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/2293ed8c-a4b9-6fc8-7b0b-da2efc98973c.jpeg)

提携サービスの中から「Gmail」を探しクリックします。
![IFTTT2.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/4b10dfc6-25f5-bcba-b42f-8032214446d4.jpeg)

条件がいくつか出てきます。
ここでは、とりあえずメールが来たら通知されるシンプルなものを選びます。
![IFTTT3.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/e6db2de7-f1e6-1226-3573-a9ea84403561.jpeg)

最後に「Create Trigger」を押してGmailと連携させます。
![IFTTT4.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/f8933338-b4b7-5be3-6fc7-cc250352efb7.jpeg)

次にGmailの着信があった後の処理を登録します。「that」をクリックすると、接続できるサービスが一覧ででてきますので、ここでは「Maker」を選んでください。
![IFTTT5.5.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/a1ce56c6-5c29-7e10-6d94-4e2958b6fec4.jpeg)

「Maker」チャンネルの場合は、シンプルに出来る事が1個だけなので素直にえらんでください。
![IFTTT6.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/03bf9626-eaaa-e99e-0fa7-4cf078a696a4.jpeg)

下記の様な画面が表示された所で、先に【webscript.io】の設定を済ませましょう。
![IFTTT7.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/cc18837b-d5c8-ed0f-f09c-eeba3ef68809.jpeg)

## Web Serverを立てる。
IFTTTで「Maker」チャンネルをthatで指定した場合、Web Serverを立てる必要があります。しかし、[webscript.io](https://www.webscript.io/)というサービスがあれば、サーバーをたてる必要がなく、初心者にはもってこいのサービスです。
但し、無料版は7日後にはきえてしまいますので、頻繁に使う場合は有料をご使用ください。

### webscript.ioに登録する
サイトの右上にある「Login / Signup」をクリックすると【Log in】が表示されますので、入力フォーム下「Sign up for free.」をクリックしてください。
![webscript.io1webscript.io1.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/4e94a081-6c86-ba9d-0651-bc7e678ee53a.jpeg)

必要情報を入力して「Sign Up」をクリックすれば登録は完了です。
![webscript.io2.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/4123e4c5-34ca-c76d-d460-4e7633960307.jpeg)

### Scriptを保存します
メニューから「script」をクリックし、scriptページに移動します。
ページ内の「Create a New Script」をクリックします。
![webscript.io3.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/5adb4979-1759-d9ce-da36-b066504a73b3.jpeg)

URLの設定が出てくるので、それぞれ自由に名前を付けて上げてください。
![webscript.io4.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/701d4f54-1d37-6060-5bb6-e2ace4cf0ecf.jpeg)
ここでは、次の説明の為に仮に名前をつけておきます。
**test01.webscript.io/notification**

画面に下記の様なScriptを流し込み「Save」をクリックすれば完了です。
![webscript.io5.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/36bfd415-9cb7-dcad-52c5-d4f1ba4ce355.jpeg)

`if request.method == "POST" then
	storage.state = 1
	return "ok"
else
	state = storage.state or 0
	storage.state = 0
	return tonumber(state) == 1 and "on" or "off"
end`

## IFTTTに戻って「Maker」チャンネルの設定を終わらせる
下記の画面おぼえてますでしょうか？
大分前になるのですが、設定が途中だったかと思います。早速設定をしていきましょう。
![IFTTT7.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/cc18837b-d5c8-ed0f-f09c-eeba3ef68809.jpeg)

**【URL】** → webscript.ioで作成したURLを登録してください。（例：test01.webscript.io/notification）

**【Method】** → プルダウンメニューから「POST」を選んでください

**【Content Type】** → 初期値でOKですPlease select

**【Body】** → 特に使用しません。

最後に「Create Action」でIFTTTの設定は完了です。
お疲れ様でした。

動いて切るかどうかは、webscript.ioの設定した画面のしたにLOGが表示されるのでわかります。
![webscript.io6.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/1326ec25-93d4-ec7a-f50f-e8ad00cfbb00.jpeg)

## プログラミングソフトRobipでプログラムを作って、ボードに書き込む
いよいよ最後になりました。長かったですね。ちょっと休憩してもいいですよ。無理せずに。
早速プログラミングソフトRobipを使って、プログラムを作っていきたいと思います。
初めの方でも説明しましたが、プログラミングソフトRobipとESP-WROOM-02開発ボードをWi-Fi経由で更新が出来る様にした状態で、進めてください。
設定をしていないと言う方は、下記の記事を参考にセッティングしてくださいね。
[【初心者向け】プログラミングソフトRobipで、ESP-WROOM-02開発ボードをWi-Fi経由でプログラム更新が出来る様にする](http://qiita.com/cw-hirama/items/c6593dc4d6020cbafefb)

## プログラミングソフトRobipでプログラムを作る
早速Robipでプログラムをつくりましょう。
下記の図を参考にブロックを組み合わせください。
![robip.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/17b2e790-1fd3-28b9-1126-79aae771bd70.jpeg)

ブロックの中に**test01.webscript.io/notification**と記載の有る箇所は、先ほどご自身が作ったURLに変更してください。

簡単に説明しますと、“test01.webscript.io/notification”にアクセスして、もしONになっていた場合は、16番のピンに6秒間電気を流す。“test01.webscript.io/notification”にアクセスしてONじゃなかったら、16番のピンには電気を流さない。という処理になっています。

![robip2.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/c038a906-58cb-8dbc-7b33-7fb5a80734dc.jpeg)

ブロックが組み終わったら、ビルドをしてください。ビルドでエラーが出る様なら、何処か間違いがあります。

## ESP-WROOM-02開発ボードにプログラムを書き込み、動作を確認する。
### ESP-WROOM-02開発ボードにプログラムを更新
基本的には、ESP-WROOM-02開発ボードの初期に書き込んだWi-Fiが動いていれば、自然にネットワークに接続し、プログラムが更新されますので、USBケーブルから電源を取って頂ければOKです。

### LEDライトを取り付ける
今回、プログラミングで“16番のピン”を使う指定にしましたので、16番ピンにLEDを取り付けます。
LEDには足が2本ありますので、短い方をGNDの穴、長い方を16番の穴にいれてみてください。
これで、Gmailがあった時に、6秒間光ってお知らせするアイテムが完成しました。
LED以外にもモーターを動かしてお知らせするなど、アイディア次第で色々な物がつくれそうですね！

ちなみにこちらが完成写真
ESP-WROOM-02開発ボードに足を付け足して、ブレットボードに差しているので、皆さんと見た目は違うかもしれません。
![IMG_0763.jpg](https://qiita-image-store.s3.amazonaws.com/0/46262/d3fd21bd-14e1-a99c-6f1a-60d265fb6ece.jpeg)