MESH + IFTTT + Slackで差入れボックスを作成する

#この記事でやったこと
MESHタグをトリガーに、IFTTTを使ってSlackへメッセージ送信できるような機能を作成しました。
具体的には、会社の共有スペースにあるお菓子BOX(差入れBOX)をカスタマイズして、
差入れを通したコミュニケーションツールに進化させてみました。

まずは、前提知識を入れときましょう。
#MESH、IFTTT、Slackについて
###:beginner:MESHとは
ソニーから発売されている、ブロック状の電子タグ。(= MESHタグ)
様々な機能を持ったブロック状の電子タグを、アプリ上でつなげることで、自分だけの機能を作り出すことができます。
![image](https://qiita-image-store.s3.amazonaws.com/0/130367/b1708286-4e19-ffef-d43e-2695f8d934f2.png)
![image](https://qiita-image-store.s3.amazonaws.com/0/130367/20bb51d5-0b40-b336-5b48-3bcc46948de2.png)

実際に作成したレシピはこんな感じ。
ここでは、動きタグとボタンタグを使用して、特定のタイミングでGmailへのメール送信を行っています。
![image](https://qiita-image-store.s3.amazonaws.com/0/130367/fc9e47fc-af92-b4fc-bd30-aeed1ab3d668.png)

また、今回はMESH SDK(Software Development Kit)を使用してオリジナルタグも作成しています。
※MESH SDK(Software Development Kit)では、JavaScriptベースでレシピ内の処理の分岐条件の追加やAjaxの追加が可能です。

詳細は以下のリンクより
:computer:[公式サイト](http://meshprj.com/jp/)


###:beginner:IFTTTとは
>IFTTT(イフト)とは「レシピ」と呼ばれる個人作成もしくは公に共有しているプロフィールを使って数あるWebサービス（Facebook、Evernote、Weather、Dropboxなど）同士で連携することができるWebサービスである。(出典：wikipeiaより)

IFTTTはその名の通り、**I**f **T**his **T**hen **T**hat 
という感じで、**「もし、これをしたら、あれをする」** というイメージで異なるWEBサービス同士を自動的に連携させるレシピを作成して使います。
実際に作れるレシピはこんな感じ。
もしMESHで○○をしたら、Slack(Google Drive)で××をする。
![image](https://qiita-image-store.s3.amazonaws.com/0/130367/f791d9a2-26a6-307d-ac0f-9a9f69f84261.png)

まだ使用したことない方には、この辺が参考になりそうです。
:computer:[作りながら覚える「IFTTT」レシピの使い方活用講座！](http://hoomey.net/ifttt_study_1/)

###:beginner:Slackとは
チャット形式で行えるコミュニケーションツール。
![image](https://qiita-image-store.s3.amazonaws.com/0/130367/24af844b-7371-e916-93e7-f1e7aaf059f3.png)

実際の画面はこんな感じ！(Windows版のアプリです。)
作成したチーム内で会話をすることができます。
![image](https://qiita-image-store.s3.amazonaws.com/0/130367/d363d1cd-c300-6f24-081c-93ac94b1165a.png)

SkypeやLINEと似ている部分もありますが、

- チームを作成して使う
- トピックごとにチャンネルを作成して会話ができる
- 画像やPDFなどのファイル、コード、共同編集できるドキュメント、Google driveのファイルの共有ができる
- 様々な外部サービスとの連携が可能

というような、様々な機能があります。
ちなみに私は無料版を使って、勉強会の内容共有、開発者との細かいやり取りや、チーム内のToDo管理等などに使用してます。
どんどん新しい機能も追加されていて、無料版でも十分使えますね。

まだ使ったことがない方は、この辺参考になりそうです。
:computer:[Slackの使い方①：登録から基本説明までまるっと紹介](http://mayonez.jp/1780)

##差入れBOXのレシピに挑戦
###このツールのイメージ
![image](https://qiita-image-store.s3.amazonaws.com/0/130367/0a25f055-d40d-e306-917c-a875c38605af.png)

###レシピの詳細と使用したタグ
今回は、
BOXが明けられたことを探知するために**「明るさタグ」**
差入れを受け取った人がリアクションするための**「ボタンタグ」**
特に必要性はないけど、ボタンを押した人が楽しむための**「明るさタグ」**
の3つのタグを使用しました。

![image](https://qiita-image-store.s3.amazonaws.com/0/130367/6e9271d0-52e6-c80e-7ba8-b3f9ad0d4138.png)

差入れボックスのふたに張り付けた紙です。
これで、皆さんにボタンをポチポチしてもらいます。
![image](https://qiita-image-store.s3.amazonaws.com/0/130367/eec43416-a02c-810e-6e58-87eeaa397838.png)


そして作成したレシピはこんな感じ。
![image](https://qiita-image-store.s3.amazonaws.com/0/130367/2f0ad961-7008-0fdd-b806-10b5d1217c4e.png)

「明るさタグ」で、ふたが開いたのを検知して、Slackにメッセージを送信します。
メッセージの送信は、IFTTT(もし、MESHから信号が来たら、Slackへメッセージを送信する)を使用しています。
ボタンタグについても流れは一緒。
このレシピでは、ついでにGoogle Drive(スプレッドシート)ともIFTTTを使用して連携していて、箱が開いたり、ボタンを押してもらった回数と時間を記録してみました。

ただし、「ボタンタグ」の長押しではIFTTTではなく、MESH SDKを使用してslackへメッセージを送信しています。
MESH SDKではSlackのWEB APIを利用して、箱の空いた回数や、ボタンの押された回数の集計値をメッセージに含めて送信させています。

##MESH SDKを使用してみる

###MESH SDK⇒Slack
SDKでカスタムタグを作る画面はこんな感じ。
![image](https://qiita-image-store.s3.amazonaws.com/0/130367/e426adeb-248f-da03-957c-f8debe9accd6.png)

Codeの部分はこんな感じで作成しています。
知識ゼロなので、ぐっちゃぐちゃですが、

- 変数の初期化
- 箱のOPENやボタン押下回数のカウント
- Ajaxを用いて、Slackへメッセージを投げる

などを行っています。
(何となくで見ていただければ...)
いろんな方の投稿でAPI使って～とかはありましたが、
パラメータの値を保持して、メッセージなどで送信する。というのをやっていた方はほとんどいなかったので、何か参考になればと思います。

```JavaScript:Initialize
return {
	 // 変数を定義し初期化
	runtimeValues : { outputIndex : -1 
					 			,openCount : properties.openCount
					 			,count : properties.doublePush
								,sPushCount : properties.singlePush
								,messageText : ""}
}
```
```JavaScript:Receive
runtimeValues.outputIndex = index;
switch ( index ){
  case 0:
		runtimeValues.openCount++;
		break;
  case 1:
		runtimeValues.sPushCount++;
		break;
  case 2:
		runtimeValues.count++;
		break;
  case 3:
		var msgVal = {};
		msgVal.msgtext = "\n ◆箱が空いた回数：" + runtimeValues.openCount + "\n"
									+ " ◆ありがとうの回数：" + runtimeValues.sPushCount + "\n"
									+ " ◆｢美味しい｣いただいた回数：" 
									+ runtimeValues.count; 
		runtimeValues.messageText = msgVal.msgtext;
		runtimeValues.openCount = 0;
		runtimeValues.sPushCount = 0;
		runtimeValues.count = 0;
		break;
}
    return {
		runtimeValues : runtimeValues,
        resultType : "continue"       //処理を継続
    };

```
```JavaScript:Execute
properties.openCount = runtimeValues.openCount;
properties.singlePush = runtimeValues.sPushCount;
properties.doublePush = runtimeValues.count;

if ( runtimeValues.outputIndex == 3 ) {
	//slackWebAPI
	var apiURL = 'https://slack.com/api/chat.postMessage';
	//APIを叩く際のパラメータ
	//プロパティの値を渡す
	var data = {
			token : 'xxxxxx', //取得したトークン
			channel : '#general', //どのチャンネルに
			username : 'name', //送信するユーザー
			text : '差し入れなくなりました！！' + runtimeValues.messageText
	};
	
	ajax({
			url : apiURL,
			data : data,
			type : "GET",
			timeout : 5000,
			success : function ( data ) {
				log("OK:" + runtimeValues.messageText);
			}
        });
}

return {
	runtimeValues : runtimeValues,
	resultType : "continue"       //処理を継続
};
```
```JavaScript:Result
return {
	 // 変数を定義し初期化
	runtimeValues : { outputIndex : -1 
					 			,openCount : properties.openCount
					 			,count : properties.doublePush
								,sPushCount : properties.singlePush
								,messageText : ""}
}
```

###:star:レシピ結果
![image](https://qiita-image-store.s3.amazonaws.com/0/130367/54c38c82-5880-dfc8-8038-11144fc6b889.png)

だいたいレシピ通りの結果を得ることができました。
左のメッセージはIFTTTを使って送信しているので、送信者がIFTTTさんですが、中央のメッセージは、Slack APIを使用しているので、指定したユーザーから送信された感じになっています。


##まとめ
今回作成した「差入れBOX」では、

- MESH
- MESH SDK
- IFTTT
- Slack API

を使用しました。
この記事から、色々なWEBサービスが気軽に利用・連携できることを感じていただけるかと思います。
今回使用した以外にも、たくさんのIoTプラットホームがあるので、遊びがてらもっといろいろ試してみたいです＾＾