AWS EC2でmyThings DevelopersとMESHソフトウェアタグをつないでみた

# 概要

今回はMESHのMOVE（動き）タグを振ると「メッセージ」というコメントがTwitterのダイレクトメッセージに届くという組み合わせを動かしてみます。

先日、清土さんが投稿した[MESHソフトウェアタグとmyThings Developersをつないでみる](http://qiita.com/nsedo/items/8d0c15dacc8d48290829)の次のステップとして、ウェブサーバで実装してみました。この方法を使うと、アクセストークンの有効期限である1時間以上が経ってしまっても組み合わせを実行することができます。

# 使うもの
- [myThings Developers](https://mythings-developers.yahoo.co.jp)
- [AWS EC2](https://aws.amazon.com/jp/ec2/)
- [MESH動きタグ(MOVE)](http://store.shopping.yahoo.co.jp/firstflight/4-mesh-100ac.html)
- [MESH SDK](https://meshprj.com/sdk/)
- [MESHアプリ](http://meshprj.com/jp/app/)

# 完成イメージ
![やりたいこと.001.jpeg](https://qiita-image-store.s3.amazonaws.com/0/58993/8be3184c-f2ec-1716-53d0-19399d11b9e0.jpeg)

#今回の流れ
1. myThings Developersで組み合わせを作る
2. サーバの構築
3. MESHソフトウェアタグの作成
4. MESHアプリで動きタグとソフトウェアタグ(myThings Developers)を繋いで、動かしてみる

所要時間の目安は約30分です。では始めてみましょう！

#1. myThings Developersで組み合わせを作る

 [myThings Developers](https://mythings-developers.yahoo.co.jp)にログインして、実行させたい組み合わせを作成します。今回はカスタムトリガーとTwitterを使った組み合わせを作成します。

<img width="350" alt="mesh01.png" src="https://qiita-image-store.s3.amazonaws.com/0/58993/7c2256c9-9f78-8c3e-1036-84fb3144d5df.png">

まず、カスタムトリガーのアイコンを引っ張ってきて、トリガーのところにドロップします。クリックすると右側に「トリガー/アクション設定」がでてくるので、適当なトリガー名をつけ、入力項目欄で**キーに msg、名称にメッセージ**を設定します。

<img width="316" alt="mesh02.png" src="https://qiita-image-store.s3.amazonaws.com/0/58993/82abb2f8-22b5-9ebe-f51e-34a1b85fec5e.png">

次に、アクションを選びます。左にあるアクションチャンネル一覧からTwitterアイコンを選んで選択し、「自分ダイレクトメッセージを送信」を選び、メッセージ欄に先ほど指定したカスタムアクションの値を入れます。テキストフィールドの下に表示されている値の表示名クリックすると入力されます。前後にテキストを加えることもできます。

<img width="314" alt="mesh03.png" src="https://qiita-image-store.s3.amazonaws.com/0/58993/ac432252-b21c-2bc7-9bec-97315878c90d.png">

組み合わせができたら設定を保存し、テストを実行。うまくTwitterにメッセージが届いたら、ページ中央にある疎通確認内にある「サンプルコードを表示」をクリックし、サンプルコードを取得します。

<img width="350" alt="mesh04.png" src="https://qiita-image-store.s3.amazonaws.com/0/58993/1cee9cc2-3dce-358c-c1df-542dae3efeed.png">

サンプルコードはこの後のステップで使うので開いたままにしておいてください。

#2. サーバの構築

次に、ウェブサーバの設定をします。今回使うのは[AWS EC2](https://aws.amazon.com/jp/ec2/)です。

##2-1. AWS EC2の設定

EC2のアカウント作成してログインし、インスタンスを作成します。

構築にあたり、[知識0から、AWSのEC2でウェブサーバーを構築するまで](http://qiita.com/shunsuke227ono/items/23dbf4f3bc663a2875f0)や[AWS EC2 Linux開発環境 構築メモ](http://qiita.com/oshou/items/b9c2de7bbf0116ffca6a)を参照しました。私の説明で不足している箇所がありましたら、こちらも合わせてご覧ください。

インスタンスが作成できたら、ターミナルから流れに沿って手順を進め、ウェブサーバを立ち上げます。インスタンスのパブリックDNSに表示されているURLに接続します。

EC2が立ち上がったら、以下のコマンドでApatchのインストール、ついでPHPをインストールします。

sudo yum -y install httpd
sudo yum install -y php

ここまできたら、myThings Developersのサンプルコードを書き込む準備が完了です。以下ディレクトリに移動します。

/var/www/html

##2-2. サンプルコードの書き込み

ここで、先ほど取得したサンプルコードを使います。

「Step.1 ユーザー設定画面確認」「Step.2 組み合わせ実行確認」それぞれにphpのファイル名があるので、その名称でEC2にファイルを作成、保存します。

なお、サンプルコードを一括選択を押すと、全文がコピーできます。

sudo vi setting_sample.php
sudo vi trigger_sample.php

正しくコードが書き込めたかどうかは、ブラウザにEC2のURLの下に続けてファル名を入れて確認できます。

▽ユーザー設定画面確認（setting_sample.php）
<img width="350" alt="mesh07.png" src="https://qiita-image-store.s3.amazonaws.com/0/58993/cc95c152-38f9-5e96-ffd8-daf52aea1bf2.png">

▽組み合わせ実行確認（trigger_sample.php）
<img width="350" alt="mesh08.png" src="https://qiita-image-store.s3.amazonaws.com/0/58993/ae4f5f36-a9b8-1596-3097-27d467e5bb51.png">

組み合わせ実行確認画面をブラウザで叩くと同時に、設定したアクション（この場合はTwitterにダイレクトメッセージが届く）が実行されますので、そちらでも正常に動作していることが確認できます。

以上で、サーバの準備は完了です。

#3. MESHソフトウェアタグの作成

次にmyThings Developersのカスタムトリガーを発火するためのMESH側の設定をします。

[MESH SDK](https://meshprj.com/sdk/)にログインし、Create New Tagを選択して設定を進めます。

<img width="350" alt="mesh05.png" src="https://qiita-image-store.s3.amazonaws.com/0/58993/de2647a2-86b3-b697-324d-92357f455016.png">

各項目の設定方法は[他の記事](http://qiita.com/nsedo/items/8d0c15dacc8d48290829)でも詳しく書かれているので、ここではExecuteにプログラムのみに触れます。

```
//The API which gets daily weather forecast
var apiURL = "＜インスタンスのパブリックDNSに表示されているURL＞/trigger_sample.php";

var postArgs = {"msg": "テストメッセージ"};
var data = {"entry": JSON.stringify(postArgs)};

ajax ({
    url : apiURL,
    data : data,
    type : "POST",
   
    timeout : 5000,
    success : function ( contents ) {
        log("Success");
    },
    error : function ( request, errorMessage ) {
        log("Error");
    }
});
 
```

ここまでできたら、上部にあるSaveを押して保存するのを忘れないでくださいね。

#4. MESHアプリで動きタグとソフトウェアタグ(myThings Developers)を繋いで、動かしてみる

ではMESHアプリを起動して、下にあるカスタムから、作成したカスタムタグを追加してみましょう。MOVE（動き）タグを振るとカスタムトリガーが発火するようにレシピを作成してみます。
<img width="250" alt="mesh10.png" src="https://qiita-image-store.s3.amazonaws.com/0/58993/333e749a-942c-4ea5-ce16-a2b0e41e3f3e.png">

タグを振ると、Twitterにメッセージが届いているのが確認できます。
<img width="250" alt="mesh09.png" src="https://qiita-image-store.s3.amazonaws.com/0/58993/f74643a9-b683-1387-e289-9effec7d01c0.png">

無事に接続できました！

#まとめ

ウェブサーバ構築は初めてでしたが、myThingsエバンジェリストでご一緒している清土さんにAWS EC2のハンズオンしていただきながら実装することができました。私の場合、PHPやApatchのインストールも必要だったので少し時間がかかりましたが、それでもサーバ構築してmyThings Developersの組み合わせを実行まで30分ほどで完了しました。

今後はカスタムトリガーを使っていろいろと遊んでみようと思います。

今回はmyThings Developersのサンプルコードをそのままコピーして使います。そのため、トリガー発火の際にアクションチャンネルに受け渡す文言は、サンプルコードで置き換えた「メッセージ」というテキストが送られます。別の文言に変更する方法は別の機会にまとめますね。


参照した記事：
- [MESHソフトウェアタグとmyThings Developersをつないでみる](http://qiita.com/nsedo/items/8d0c15dacc8d48290829)
- [知識0から、AWSのEC2でウェブサーバーを構築するまで](http://qiita.com/shunsuke227ono/items/23dbf4f3bc663a2875f0)
- [AWS EC2 Linux開発環境 構築メモ](http://qiita.com/oshou/items/b9c2de7bbf0116ffca6a)