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

今回は下記の記事を参考に**MESH × myThings Developers**の記事を書きます。

 - [MESHのソフトウェアタグを使ってmyThingsとつないでみる](http://qiita.com/masato/items/159a35c5ce741b6f1058)
 - [MESHソフトウェアタグとmyThingsでクリスマスを演出してみる](http://qiita.com/crispytaffy/items/2b0da0954cfed5cbab3a)

## 概要
**MESH** の[ボタンタグ](http://meshprj.com/jp/tag/MESH-100BU-Button.html)を押したら **myThings Developers** に連携し、そこから Twitter で自分にリダイレクトメッセージを送るというサンプルを紹介したいと思います。

## 準備するもの
 - [MESH](http://meshprj.com/jp/)
    - [ボタンタグ](http://meshprj.com/jp/tag/MESH-100BU-Button.html)を使います。
 - [MESHアプリ](http://meshprj.com/jp/app/)
 - [myThings Developers](https://mythings-developers.yahoo.co.jp)

## 流れ
 1. myThings Developers の準備
 2. MESHソフトウェアタグの作成
 3. MESHアプリでボタンタグとソフトウェアタグ(myThings Developers)を繋いで、動かしてみる

## 1. myThings Developers の準備
### 1-1. 組み合わせの作成
今回は、下図の様にカスタムトリガーとTwitterを使った組み合わせを作成します。
![組み合わせ.png](https://qiita-image-store.s3.amazonaws.com/0/147237/94065f4e-a21c-5e0a-9dba-8ba2c87db841.png)

カスタムトリガーは下図のように設定します。
**キー**に **msg**、**名称**に **メッセージ** を設定します。
![カスタムトリガー.png](https://qiita-image-store.s3.amazonaws.com/0/147237/2bd2af1b-aaca-5856-8b21-2ba40dbd55b6.png)

Twitterは下図のように設定します。
**アクション**は **自分にダイレクトメッセージを送信** を選択し、**メッセージ**は以下のように設定します。
**{{メッセージ}}** の部分にMESHから送られてきたメッセージが入る予定です。

```
MESHからのメッセージ
{{メッセージ}}
```

![Twitter.png](https://qiita-image-store.s3.amazonaws.com/0/147237/6d435ecf-126b-dea1-6be4-178da99ce95b.png)

### 1-2. テスト実行
組み合わせの作成が完了すると、テスト実行ができるようになります。
作った組み合わせが正しく動作するか確認します。
下図のように設定を行い、テスト実行を行うとTwitterの自分のアカウントにメッセージが届きます。
![テスト実行.png](https://qiita-image-store.s3.amazonaws.com/0/147237/7a077925-60a3-cc64-c76d-a6ecf29bc029.png)

Twitterの自分へのダイレクトメッセージは下記のようになっているはずです。
![Twitterテスト実行.png](https://qiita-image-store.s3.amazonaws.com/0/147237/38e694f3-c3b0-34b3-6edf-09d8552cda41.png)

これで、組み合わせが正しく動作することが確認出来ました。

### 1-3. 疎通確認
次に疎通確認のサンプルコードから**MESH**との連携に必要な情報を抜き出します。

まずは下図の画面から**サンプルコードを表示** ボタンを押して、サンプルコードを表示させます。
![疎通確認サンプルコード.png](https://qiita-image-store.s3.amazonaws.com/0/147237/5d9243d8-c208-87be-936d-e184f1d4fc16.png)

下記のようなサンプルコードが表示されます。
**Step.2 組み合わせ実行確認**の部分へスクロールして下さい。（表示された画面の下の方にあります。）
表示させたサンプルコードから**$url**と**$access_token**に設定されている値をコピーして、手元に残しておいて下さい。後の手順で使用します。
![サンプルコード.png](https://qiita-image-store.s3.amazonaws.com/0/147237/fe0cc967-4315-803f-a497-2538f28d7a7f.png)

上記サンプルコードのすぐ上に**サンプルレスポンス**という部分があります。
そこから**url**に設定されている**https://mythings-developers.yahoo.co.jp/services/...**という部分をコピーしてブラウザのアドレスバーにペーストしてください。
![ユーザー設定URL取得.png](https://qiita-image-store.s3.amazonaws.com/0/147237/65d68dd7-aa6d-30cd-7838-613f85e889f6.png)

そうすると、下図のような画面が表示されるので、**設定完了**ボタンを押して設定を保存します。
（※コレを行っておかないとMESHでボタンタグを押してもTwitterへメッセージは飛びません。）
![ユーザー設定.png](https://qiita-image-store.s3.amazonaws.com/0/147237/cb24d816-7c65-edc0-0231-65a837a6b6a2.png)


## 2. MESHソフトウェアタグの作成
### 2-1. MESH SDKのDeveloperアカウント登録
まずは、MESHソフトウェアタグを作成するための準備として、アカウント登録を行います。
この[ページ](https://meshprj.com/openSDK)からDeveloperアカウントを登録して、SDKを開きます。
登録方法が分からない場合は下記の記事を参考にしてください。

 - [MESHのソフトウェアタグを使ってmyThingsとつないでみる](http://qiita.com/masato/items/159a35c5ce741b6f1058)

### MESHソフトウェアタグの作成
Developerアカウントの登録が完了すると[タグの作成ページ](https://meshprj.com/sdk/mypage/#)が表示されるので、 **Create New Tag** ボタンを押してタグの作成画面を呼び出します。
![タグ作成呼び出し.png](https://qiita-image-store.s3.amazonaws.com/0/147237/2effaa49-d610-3a32-bec7-5b9811c183be.png)

ボタンを押すと下記の画面が表示されるはずです。
まずは、タグの名称とFunctionの名称を設定します。
今回は、タグの名称は **myThings Dev** とし、Functionの名称は **call myThings**と設定します。
![タグ作成1.png](https://qiita-image-store.s3.amazonaws.com/0/147237/6c44bc99-8c45-7ef1-012b-94baad6b4dff.png)

次にInputを設定します。
（これを設定しておかないとMESHアプリに追加した時に、ボタンタグと繋げる事ができないです。）
![タグ作成2.png](https://qiita-image-store.s3.amazonaws.com/0/147237/3dfb0147-2fc1-95eb-082b-609454dbf31f.png)

最後にCodeを追加します。
**Code** の **Execute**を選択し、以下のサンプルコードをコピーします。

```
//The API which gets daily weather forecast
var apiURL = "https://mythings-developers.yahooapis.jp/v2/services/<個別の値>/mythings/<個別の値>/run";
 
// アクセストークン
var accessToken = "<個別の値>";

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

ajax ({
    url : apiURL,
    data : data,
    type : "POST",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        "Authorization": "Bearer " + accessToken,
    },
    timeout : 5000,
    success : function ( contents ) {
        log("Success");
    },
    error : function ( request, errorMessage ) {
        log("Error");
    }
});
 
```

サンプルコード内の**<個別の値>**となっている部分は、**myThings Developers** の**疎通確認** の部分で取得した値に置き換えてください。
**疎通確認**と**Execute**の各値の対応は以下になります。

| 疎通確認 | Execute | 備考 |
|:-:|:-:|:-:|
| $url  | apiURL | カスタムトリガー実行APIエンドポイント |
| $access_token | accessToken | アクセストークン |

上記全ての入力が完了したら、左上の**Save**を押して、タグを保存します。

![タグ保存.png](https://qiita-image-store.s3.amazonaws.com/0/147237/a2ebe5e0-1fa0-2718-5a43-be7d524d366d.png)

タグの作成は以上です。

## 3. MESHアプリでボタンタグとソフトウェアタグ(myThings Developers)を繋いで、動かしてみる
### 3-1. アプリにDeveloperアカウントを紐付ける
アプリの右上のメニューからSDKを選択し、Developerアカウント登録したアカウントを紐付けます。
![アカウント連携.jpg](https://qiita-image-store.s3.amazonaws.com/0/147237/893d1711-3e8d-22c0-39e7-f2d296300f1a.jpeg)

### 3-2. ソフトウェアタグを追加する
次に右下にあるカスタムの**追加**ボタンを押して、ソフトウェアタグの追加画面を出します。
そうすると先程作ったmyThings Devが一覧に表示されるので選択すると下記の画面が表示されます。
そして追加ボタンをおすと**ログ**の右隣に**myThings...**というタグが増えています。
![ソフトウェアタグ追加.jpg](https://qiita-image-store.s3.amazonaws.com/0/147237/6fdf2d3c-4eab-b9ed-ef21-f42491f24c10.jpeg)

### 3-3. ボタンタグをソフトウェアタグを繋げる
あとはボタンタグと先ほど追加されたソフトウェアタグを繋げて完成です。
![MESH.jpg](https://qiita-image-store.s3.amazonaws.com/0/147237/fae40f4d-7392-4aaf-df50-c2237bd1c9c3.jpeg)

### 3-4. ボタンタグを押したらTwitterにメッセージが飛ぶ
あとはMESHのボタンタグを押せばTwitterにメッセージが飛びます。
![動作確認.JPG](https://qiita-image-store.s3.amazonaws.com/0/147237/acc19443-0052-c389-697d-0bdd67c8dfcb.jpeg)


## 最後に
MESHとmyThings Developersって結構簡単に繋がりましたね。
（実際にやってみたら1時間程で繋がりました。）

但し、今回の方法には注意点があります！
今回の方法だと**1時間程度しかMESHと連携できません。**

理由は、私がサボって実装したからです。
今回、連携で使用したアクセストークンというものは有効期限があって、
それが1時間程度だからです。
サンプルコードにはリフレッシュトークンを使って有効期限が切れたアクセストークンをリフレッシュする処理が入っているのですが、私がサボってその実装を組み込んでいません。

すいません。時間があれば対応したいと思います！

**1時間以上経ってしまって動かないけど、また動かしたいと思った方**は、
**myThings Developers**で再度、サンプルコードを表示させてアクセストークンを取得して下さい。
そして、MESHソフトウェアタグの**Code**の**Execute**に設定しているアクセストークンを書き換えて保存し、再度アプリ側でソフトウェアタグの追加を行うと動くようになります。