MilkcocoaとIFTTTがつながる中継サーバーHeroku Buttonつくりました

この記事は、Milkcocoa Advent Calendar 2016の3日目の記事です。

前日は [m2wasabi](http://qiita.com/m2wasabi) さんの [Milkcocoaしくじり先生ー紅白編ー](http://qiita.com/m2wasabi/items/241426241004d7a83ebf) です。

ウフル川野さんと<a href="http://blog.mlkcca.com/backend/milkcocoa-heroku-button/" target="_blank">以前のMilkcocoaが使えるHerokuサーバー記事</a>の仕組みを発展させて、IFTTT用にルールを整えてやってみようと盛り上がりまして、HerokuがMilkcocoaとIFTTTがつながる中継サーバーHeroku Buttonつくりました。

# 今回のWebアプリケーションの仕組み

今回のWebアプリケーションはMilkcocoa NodeJS SDKを利用したHerokuサーバーで中継し、IFTTT Maker ChannelとMilkcocoaとやり取りできるアプリです。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/4c5b4f37-823e-c1a2-8cf2-1b90972c7331.png)

* トップページで「Hello Milkcocoa!」と表示する機能
* IFTTT Maker Channelから送信されてきたデータをMilkcocoaのデータストアに通知する
* Milkcocoaの特定のデータストアに送られたデータをIFTTT Maker Channelに通知する

を備えています。

これができると、**IFTTTのTwitterチャンネルで取得したツイートをMilkcocoaの反応として扱えたり、Milkcocoaから送ったデータをIFTTTのSlackチャンネルに流すことができたり** と、やれることが多岐に広がります。

# 今回の事前準備と作業の流れ

今回の事前準備と作業の流れです。

* 前提
    * Herokuに登録済みでアカウントがあること
    * IFTTT Maker Channelが利用可能なこと
* 作業の流れ
    * 今回使うMilkcocoaのアプリIDを決めて控えておく
    * IFTTT Maker Channelのキーを控えておく
    * Heroku ButtonでHerokuサーバー構築
    * IFTTT Maker ChannelのDo Buttonレシピをつくる（IFTTT→Milkcocoa）
    * MilkcocoaからIFTTT Slack Channelに送るレシピをつくる（Milkcocoa→IFTTT）

# 設定を控えておきます

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/fc45e1f1-d330-e96d-0714-a41b8cfc180b.png)

今回使うMilkcocoaのアプリIDを決めて控えておきます。

つづいて、IFTTT Maker Channelのキーを控えておきます。

Makerのチャンネルページに行きます。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/fd3a3c98-7fb1-04b7-ad13-336eb58d848d.png)

Settingを押します。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/b7c48908-a0fe-0f59-4121-5ab24a3a99ce.png)

URL:と書かれているところをコピーしてアドレスバーに入れてアクセスします。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/4dc83ca7-120d-cd8c-887f-13a255de09aa.png)

「Your key is」の部分です。（以前よりも、ちょっとたどり着くまでの階層が深くなりましたね！）

# Heroku ButtonでHerokuサーバー構築

つづいて、サーバー構築です。

<a href="http://blog.mlkcca.com/backend/milkcocoa-heroku-button/" target="_blank">以前の記事「HTTPでMilkcocoaが使えるHerokuサーバーを気軽に立ち上げられるHeroku Buttonを作りました」</a>も参考になります。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/0a863005-c5bd-2306-1ab8-08b98700260a.png)

<a href="https://github.com/1ft-seabass/heroku-ifttt-maker-channel-milkcocoa" target="_blank">1ft-seabass/heroku-ifttt-maker-channel-milkcocoa</a> にアクセスし、Heroku Buttonを押します。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/c0bac910-b12b-d32b-a16e-d921dbbb42d7.png)

サーバーの名前を決めます。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/aef3ded6-5b62-c90a-122e-dd5a9db3e156.png)

Config Variablesは、すでに入っている値はそのままで、

* IFTTT_SECURITY_KEY
* MILKCOCOA_APP_ID

を入力しましょう。

仮にIFTTT_SECURITY_KEYが「ABCDEFGHIJKLMN」で、MILKCOCOA_APP_IDが「hogehoge」の場合は以下のようになります。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/195de6cb-d588-f250-ac0d-f924d726911a.png)

IFTTT_SECURITY_KEY・MILKCOCOA_APP_IDを入力したら、デプロイボタンを押してサーバー構築します。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/da77d6d2-5350-ae2f-a704-fa6914ae1dce.png)

デプロイ完了したら、Viewボタンでサーバー確認します。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/2f055e79-9371-7867-9cd8-39aeb44c516e.png)

これで準備完了です。

なお、Herokuサーバーの設定値（Config Variables）は以下のようになっています。

* IFTTT_SECURITY_KEY
    * IFTTT Maker Channelへ送る際に必要なセキュリティキー
* MILKCOCOA_APP_ID
    * MilkcocoaのアプリID
* IFTTT_RECEIVE_DATASTORE_ID
    * IFTTTがMilkcocoaにデータを送る時のMilkcocoaデータストア
        * 初期値：IFTTTReceiveData
* IFTTT_RECEIVE_URL
    * IFTTTがMilkcocoaにデータを送る際の中継URL
        * 初期値：/ifttt/receive
* IFTTT_SEND_DATASTORE_ID
    * MilkcocoaからIFTTTにデータを送る時のMilkcocoaデータストア
        * 初期値：IFTTTSendData
* IFTTT_SEND_EVENT_NAME
    * MilkcocoaからIFTTT Maker Channelにデータを送る時のIFTTT Maker Channelイベント名
        * 初期値：IFTTTSendData
* IFTTT_SEND_URL
    * MilkcocoaからIFTTTにデータを送る時の中継URL
        * 初期値：/ifttt/send

仕組みに慣れてきたら、調整してみましょう。

# IFTTT Maker ChannelのDo Buttonレシピをつくる（IFTTT→Milkcocoa）

IFTTTからMilkcocoaの連携をしてみます。今回はIFTTT Maker ChannelのDo Buttonレシピを作成し、Milkcocoaのデータストア画面でデータが保存されているか確認します。

まず、IFTTT DoButtonの設定をします。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/ecfd31cb-4929-0027-c1c9-fc09bf979341.png)

スマホアプリ上で新規作成。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/dc9ea253-042d-c0e5-1462-3d4142ca6d69.png)

URLには今回Herokuサーバーを構築したサーバーに/ifttt/receiveを追記した文字列を入力します。この追記した文字列はHerokuサーバー初期設定時にIFTTT_RECEIVE_URLに入っていたものです。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/dea600cb-34c4-d67f-bbbc-fda9398c0589.png)

* Methodの設定
    * POST
* Content Typeの設定
    * application/json
* Bodyの設定
    * {"value1":"value1","value2":"value2","value3":"value3"}

と入力してSaveし、IFTTT DoButtonを作成します。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/24059833-e8b4-9b25-78fb-1ca055c5a91d.png)

ボタンを押してみます。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/4db527a2-a26d-3ac3-2f90-208328853dca.png)

無事設定されると、Milkcocoaのデータストア画面でデータが保存されています！

# MilkcocoaからIFTTT Slack Channelに送るレシピをつくる（Milkcocoa→IFTTT）

つづいて、MilkcocoaからIFTTT Slack Channelに送るレシピを作ってみます。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/0f105a5e-6b8b-7bbd-8660-de9129a6b7af.png)

このように、Maker ChannelのトリガーでSlack Channelが動作するレシピを新規作成します。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/7bb7c1f6-1c5d-02ef-1e52-3d8d7a65730f.png)

EventNameの設定は「IFTTTSendData」をします。これはHerokuサーバー構築時のMilkcocoaからIFTTT Maker Channelにデータを送る時のIFTTT Maker Channelイベント名の文字列を一致させます。

つづいて、Slackの文言設定です。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/7a90c122-fe93-a70e-8940-acfef64624b3.png)

Which Channels はアクティベートしてるSlackの好きなチャンネルにしましょう。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/fc006b90-c5f9-a7dd-4506-4d8aae76a88f.png)

Messageもこんなかんじで。Value1～Value3となっているところがMaker Channelから反映される動的に変わる文言です。

> The event named "{{EventName}}" occurred on the Maker Channel Value1:{{Value1}} Value2:{{Value2}} Value3:{{Value3}}

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/97363a4e-7c87-7d67-9993-7ee09f55b904.png)


Titleは自動生成のものを。

> The event named "{{EventName}}" occurred on the Maker Channel

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/0f105a5e-6b8b-7bbd-8660-de9129a6b7af.png)

出来上がりました。

## 試してみる

早速、

<a href="http://jsdo.it/1ft-seabass/ABFN" target="_blank">Milkcocoa IFTTT Sender - jsdo.it</a>

にアクセスして送信を試してみます。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/c47aa3d1-cfeb-2fa6-99a5-0b15b7450758.png)

MilkcocoaIDのところにMilkcocoaのアプリIDを入力して、CONNECTボタンを押します。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/a12cd790-4daa-89db-7bef-b12bfc3c8506.png)

DATASTORE_IDは、Herokuサーバー構築時の設定値IFTTT_SEND_DATASTORE_IDのMilkcocoaからIFTTTにデータを送る時のMilkcocoaデータストア名と一致させます。特に設定を変えていなければそのままでOKです。

SEND_DATAは一旦そのままで送ってみましょう。SENDボタンを押します。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/f86a5c37-20ce-cd55-4ee6-f849cda3e309.png)

無事に設定されていれば、該当のSlackチャンネルに文言が入ってきます！

# 使用上の注意点

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/0ed06c03-5ae9-5920-3cb9-b4f1167d2ae9.png)

HerokuサーバーはFreeアカウントで起動していると、アクセスしないと30分程度でスリープしてしまい、MilkcocoaからIFTTTへの送信が発動しなくなります。これを回避するにはURLを叩いて再度起こしてあげるか、HobbyアカウントになりDynoを与えて常時起動するようにしておきましょう。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/abd0be17-3dba-c4eb-ad74-801c4bd75342.png)

なお、IFTTTからMilkcocoaの通信についてはHTTPでURLを叩く形になるので、たとえスリープしていても起きてくれるので大丈夫です。

# おわりに

このように、IFTTTとMilkcocoaが垣根なくやりとりできている仕組みはこのHeroku Buttonで可能になります。

この仕組みができると、IFTTTで試せるいろいろなAPIのデータをひとまずMilkcocoaに集めてリアルタイムにWebアプリケーションを動かすことや、MilkcocoaとつながるデバイスにIFTTTでの反応を連携させたり、デバイスの操作をMilkcocoa経由でIFTTTに送ることもできるため、制作の幅がより広がります。

ぜひいろいろと試してみてください。

# さて、次回のアドベントカレンダーは…

[Milkcocoa Advent Calendar 2016](http://qiita.com/advent-calendar/2016/milkcocoa)も明日で4日目、
書いてくれるのは我らのMilkcocoaエバンジェリストこと[n0bisuke](http://qiita.com/n0bisuke)さんです