MESHのソフトウェアタグを使ってmyThingsとつないでみる

　ソニーから発売されている[MESH](http://meshprj.com/jp/)は、さまざまな機能を持ったMESHタグをMESHアプリ上でつなげて、自由に組み合わせを作ることができるキットです。WebサービスやIoTデバイスを組み合わせる[myThings](http://mythings.yahoo.co.jp/)とさらに組み合わせると、もっと便利な使い方ができそうです。今回は[MESH SDK](https://meshprj.com/sdk/doc/ja/)の[ソフトウェアタグ](http://support.meshprj.com/hc/ja/articles/212118088-%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%82%BF%E3%82%B0%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%A7%E3%81%99%E3%81%8B-)を使いmyThingsで自作デバイスと連携することができる[「IDCF」チャンネル](http://www.idcf.jp/cloud/iot/)とつないでみようと思います。


## MESHアプリ

　[MESHアプリ](https://itunes.apple.com/jp/app/mesh-creative-diy-toolkit/id981090691)はiPhoneやiPadなどにインストールして使います。画面に表示されるキャンバス上でアイコンをビジュアル的につなげるだけでIoTのプロトタイプを簡単に作成できます。

## MESHタグ

　MESHタグはブロック形状をした電子タグです。執筆時では次の種類が発売されています。

* [Move（動き）タグ](http://meshprj.com/jp/tag/MESH-100AC-Move.html)
* [Button（ボタン）タグ](http://meshprj.com/jp/tag/MESH-100BU-Button.html)
* [LEDタグ](http://meshprj.com/jp/tag/MESH-100LE-LED.html)
* [Motion（人感）タグ](http://meshprj.com/jp/tag/MESH-100MD-Motion.html)
* [Brightness（明るさ）タグ](http://meshprj.com/jp/tag/MESH-100PA-Brightness.html)
* [Temperature & Humidity（温度・湿度）タグ](http://meshprj.com/jp/tag/MESH-100TH-TemperatureAndHumidity.html)
* [GPIOタグ](http://meshprj.com/jp/tag/MESH-100GP-GPIO.html)

　GPIOタグは特殊ですがそれぞれ特定の機能を持っています。MESHタグで何ができるのかわかりやすいです。MESHアプリのチュートリアルを開始すればMESHタグをBluetoothでペアリングして、簡単なサンプルの作成と実行までできます。プログラミングや電子工作の知識は必要ありません。

　MESHを使うと次のようなことができるようになります。

>* 新聞紙が勇者の剣に！
* 部屋に近づく人を検知！
* ぬいぐるみが走り出す
* カメラリモコンを簡単作成！
* プレゼントにさらなる驚きを
* メール受信をこっそり確認
* 乾燥アラームで風邪予防！


### MESH SDK

　プログラミングが苦手な方でもIoTのプロトタイピングをすぐに始められるのがMESHの良いところです。さらに[MESH SDK](https://meshprj.com/sdk/doc/ja/)を使って作成する[ソフトウェアタグ](http://support.meshprj.com/hc/ja/articles/212118088-%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%82%BF%E3%82%B0%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%A7%E3%81%99%E3%81%8B-)は自分で書いたJavaScriptのコードをMESHのタグとして追加することができます。

　MESH SDKの[トップページ](https://meshprj.com/sdk/)から[Start using the MESH SDK](https://meshprj.com/openSDK)ボタンをクリックしてDeveloperアカウントの作成してSDKを開きます。詳しい使い方は[MESH SDK Reference Manual](https://meshprj.com/sdk/doc/ja/)の日本語マニュアルをご確認ください。

### Webサービスと連携するサンプル

　MESH SDKは外部WebサービスのAPIにAjaxでアクセスできるソフトウェアタグをJavaScriptで実装することができます。このソフトウェアタグを使うとMESHのタグの組み合わせの中に外部のWebサービスを組み込むことができます。

　[サンプル](https://meshprj.com/sdk/doc/ja/#sdk_chapter_4)として天気予報タグの作り方が掲載されています。これを読むとMESHが提供しているjQuery風のAjaxライブラリの使い方の参考になります。天気予報タグは、OpenWeatherMap serviceが提供する[Weather API](http://openweathermap.org/api)を利用しています。インプットがあった時に、特定の場所の天気を判別して晴れ、雨、曇りごとにアウトプットを出力しわける例です。

### ソフトウェアタグのinputとexport

　MESH SDKで作成したソフトウェアタグはDeveloperアカウントに紐付いています。MESHアプリのメニューからSDKにサインインすると作成したソフトウェアタグが使えるようになります。

　現状では他の開発者が作成したソフトウェアタグのコードはimportして利用する必要があります。

1. 開発者は、ブラウザからMESH SDKにサインインしてソフトウェアタグのコードをJSON形式でexportする。
2. 開発者は、他の人がアクセス可能な場所に公開する(gistなど)
3. 利用者は、ブラウザからMESH SDKにサインインしてJSON形式のコードをimportする。
4. 利用者は、iPadのMESHアプリからSDKにサインインしてソフトウェアタグをダウンロードする。

## MESH SDKでmyThingsタグをimportする

　前置きが長くなりましたが[こちら](https://gist.github.com/masato/718bad2a074d5e8588e8)にmyThingsのソフトウェアタグを公開しているのでMESH SDKにサインインした後にimportしてからお使いください。

### MESH SDKにサインインする

 [MESH SDK](https://meshprj.com/sdk/mypage/)にサインインすると作成したソフトウェアタグの一覧画面が開きます。下の画面はまだ１つも作成していない状態です。「Create New Tag」ボタンを押してタグの作成画面に移動します。

<img width="512" alt="mesh-01-create-new-tag.png" src="https://qiita-image-store.s3.amazonaws.com/0/43745/ac7d8348-611c-b7b3-0440-293ee12bdd78.png">


### タグ作成画面

　タグの作成するメイン画面に移動します。今回は作成済みのコードを使うので「Import」ボタンを押します。

<img width="512" alt="mesh-015-new-tag.png" src="https://qiita-image-store.s3.amazonaws.com/0/43745/1dd19060-0138-4602-3bba-baffd6c44f28.png">

### myThingsのコードをimportする

　「Imported JSON Data」のフィールドに[こちら](https://gist.github.com/masato/718bad2a074d5e8588e8)にあるJSONをコピーしてペーストします。「Load JSON」ボタンを押すとimportが終了します。

<img width="512" alt="mesh-02-import.png" src="https://qiita-image-store.s3.amazonaws.com/0/43745/bdac7241-1a5f-6857-358d-0530d9571bfa.png">

### タグを保存する

　importするとタグは「myThings」の名前になっています。好きなように変更できます。別名でタグを保存すれば複数のバージョンを使い分けることができます。左上の「Save」ボタンを押してタグの作成を完了します。

<img width="512" alt="mesh-03-save.png" src="https://qiita-image-store.s3.amazonaws.com/0/43745/a22663e6-9db8-370c-bd39-95d297940161.png">


### myThingsタグのコードについて

　JSON形式でペーストしたコードは読みづらいですが、タグの画面からimportしたJavaScriptのコードを確認できます。

* 「Trigger」-> 「Code」-> 「Execute」

　MESH SDKのAjaxライブラリを使い、タグに入力コネクタからインプットが来ると「IDCF」チャンネルのトリガーを発火するためPOSTする簡単なサンプルになっています。

<img width="494" alt="mesh-code.png" src="https://qiita-image-store.s3.amazonaws.com/0/43745/59825550-aaab-e254-ee24-6433462120b0.png">



## MESHアプリでmyThingsタグをダウンロードする

　iPadなどでMESHアプリを起動してMESH SDKで作成したタグをMESHアプリで使えるようにしていきます。


### SDKにサインインする

　MESHアプリを起動したら右上メニューボタンからSDKの項目をタップします。

![IMG_0385.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/96a23d73-c760-22f8-ced5-c50be29f0aac.png)


　MESH SDKにサインインするため先ほどブラウザで登録したDeveloperアカウント情報を入力します。

　![IMG_0386.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/575c3086-30d4-2ef0-19d6-8b44be7fd1f0.png)


### 新しいレシピを作成する

　次に左上のプラスボタンを押します。作成された「New Recipe」のタイルをタップしてレシピ作成画面に移動します。

![IMG_0400.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/1f5190a6-ca89-e9ab-ce7d-66c074784e1c.png)


### myThingsタグをダウンロードする

 レシピ作成画面が開きます。右側メニューの一番下の「Custom」セクションのプラスボタンを押します。

![IMG_0391.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/7f9a2ce8-bb10-94ce-d8c8-469a27b96e7f.png)

　先ほどimportしたmyThingsタグの情報が表示されます。更新日時やタイトルなどを確認して「Add」ボタンを押します。

![IMG_0392.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/b76b1af8-a4e3-5f46-0491-b98ee8be2a4e.png)

　myThingsタグが右下のCustomフィールドに表示されて使えるようになりました。

![IMG_0393.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/9b2788b6-5ecc-81d7-a078-cc6294c3bd0c.png)



## myThingsアプリで組み合わせを作る

　ここでMESHアプリから一度離れ、myThingsアプリから「IDCF」チャンネルを使いMESHと連携する組み合わせを作ります。「IDCF」チャンネルとのトリガーの詳しい使い方は[こちら](http://qiita.com/masato/items/e7edac534d9aa95d8fb8)の記事を参考にしてください。またアクションのチャンネルは[Evernote](https://evernote.com/intl/jp/)を使います。予めEvernoteのアカウントをご用意ください。

### 「IDCF」と 「Evernote」チャンネル
　
　スマホからmyThingsアプリを起動して
トリガーに「IDCF」、アクションに「Evernote」を使った組み合わせを作ります。他のチャンネルを使う場合はアクションの作成を読み替えて以下のような組み合わせを作ってください。

![IMG_0003.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/fdcd9126-09a8-703c-2e93-59eda5338d69.png)


　この組み合わせが実行されると、トリガーの「IDCF」チャンネルの「trigger-4」の条件を満たしたら、アクションの「Evernote」チャンネルを実行します。Evernoteの「MESHの記録」ノートに「MESHが押されたよ」という文字を追記していきます。


## MESHでmyThingsタグを使って見る

　それではいよいよMESHに作成したmyThingsタグを使ってみましょう。

### タグをキャンバスにドラッグ&ドロップする

 CustomフィールドのmyThingsタグを中央のキャンバスにドラッグ＆ドロップします。現在のmyThingsタグは「トリガー」しか作成していないので、「Trigger」ファンクションが表示されます。「uuid」などが表示されているプロパティをタップして設定画面に移動します。

![IMG_0394.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/1bbe2a11-6863-7c67-b431-ac0fe6f0abf8.png)


### 「IDCF」チャンネルのトリガーを設定する

　プロパティ設定画面では「IDCF」チャンネルのトリガー情報を設定します。前のステップでmyThingsアプリの組み合わせで使った「trigger-4」のuuidとtokenを指定します。メールなどでuuidなどの情報をiPadに転送してそれぞれのフィールドに入力します。

![IMG_0395.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/f2fddabc-96cc-d1c4-3712-97311bebc4ae.png)

　iPadだとuuidなどの入力が不便なので、ブラウザからMESH SDKの画面を開きプロパティのフィールドに初期値として予め入れておくこともできます。

* Trigger -> Property

<img width="494" alt="mesh-props.png" src="https://qiita-image-store.s3.amazonaws.com/0/43745/b060a859-3c04-4d53-1a40-8d2a3bad2709.png">

　MESH SDKでコードを編集して保存したら、MESHアプリ側でも右メニューのCustomフィールドからmyThingsタグをタップして「Tag Info」画面を開きます。「Check for Updates」ボタンを押して更新したコードをダウンロードします。

![IMG_0402.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/01befea7-a29a-1095-570c-1c31c0f55201.png)



### レシピ（組み合わせ）を作る

　トリガーの情報を設定するとキャンバスに戻ります。

![IMG_0397.png](https://qiita-image-store.s3.amazonaws.com/0/43745/18fdb963-d7bb-c51f-a3be-378bad38e876.png)

　今回のMESHタグは[Button（ボタン）タグ](http://meshprj.com/jp/tag/MESH-100BU-Button.html)を使います。タグのボタンを押す動作で次のタグへ処理が移動するので、レシピの起点としてわかりやすいです。

　Buttonタグをキャンバスにドラッグ&ドロップします。Buttonタグの右側の出力コネクタのつまみをタップして動かすと線が伸びます。そのままmyThingsの入力コネクタへ凸凹の形を合わせるとシャキーン！と音が鳴り気持ち良くダグ同士がつながります。

　myThingsタグからの出力コネクタはPlayタグを使います。「IDCF」チャンネルサーバーと正常に通信ができたらiPadから音が鳴るようにします。Playタグをつなげると以下のようになります。

![IMG_0398.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/93c5e2a2-7133-62b1-7a03-076c4a2fe9c0.png)

### Buttonタグを押す

　その前に右側のメニューの「Tag」セクションに表示されているButtonタグに警告が表示されずに正常にiPadと通信ができていることを確認してください。MESHアプリを一度閉じてしまうとタグとの接続が切れてしまうので、「Tag」セクションの左ボタンで表示されるようにタグを再認識させてください。


　それでは実物のButtonタグについているボタンを押してみましょう。正常にレシピが実行されるとiPadから音がなります。myThingsタグのログは「Custom」セクションにある「Log」ボタンをタップすると確認することができます。


![IMG_0399.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/226185d7-9ac4-09e8-5c14-42ee176e29ea.png)

## myThingsアプリで確認する

　Buttonタグを押した後しばらくするとmyThingsに作成しておいた組み合わせが実行されます。すぐに実行したい場合は組み合わせの「手動実行」ボタンを押してください。成功するとタイムライン画面にログが表示されます。

![IMG_0004.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/7d409a35-ee83-344b-e657-9314c68c689a.png)


　Evernoteアプリを開くと「MESHの記録」というノートにmyThingsからのメッセージが記録されました。

![IMG_0002.PNG](https://qiita-image-store.s3.amazonaws.com/0/43745/5c85125e-c82c-4d68-4bbe-1d77893e219b.png)

## 他のMESHタグでも

　myThingsのトリガーにすることができるMESHタグは他にもたくさんあります。何かイベントが発生したら何かの処理を実行するという仕組みはとてもシンプルで、専門のプログラム知識がない方にもわかりやすいと思います。MESHタグとmyThingsチャンネルの「Webサービス」や「IoTガジェット」をつなげて自分だけの組み合わせを考えてみると楽しいと思います。

* [Move（動き）タグ](http://meshprj.com/jp/tag/MESH-100AC-Move.html)

タグをひっくり返したら

* [Motion（人感）タグ](http://meshprj.com/jp/tag/MESH-100MD-Motion.html)

人や動物の動きを検知したら

* [Brightness（明るさ）タグ](http://meshprj.com/jp/tag/MESH-100PA-Brightness.html)

明るさが指定した範囲内に変化したら

* [Temperature & Humidity（温度・湿度）タグ](http://meshprj.com/jp/tag/MESH-100TH-TemperatureAndHumidity.html)

温度が指定した範囲内に変化したら