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

昨年からずっと投稿しようと思って放置してしまっていましたが、

そろそろやる気を出して投稿します。

 

この記事は、

qiita.com

で投稿したのと同じ内容です。

 

目次

 

 

この記事でやったこと

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

まずは、前提知識を入れときましょう。

 

MESH、IFTTT、Slackについて

MESHとは

ソニーから発売されている、ブロック状の電子タグ。(= MESHタグ)
様々な機能を持ったブロック状の電子タグを、アプリ上でつなげることで、自分だけの機能を作り出すことができます。

f:id:we11dan:20170201224240p:plain

 

f:id:we11dan:20170201224254p:plain

実際に作成てみるとレシピはこんな感じになります。
ここでは、動きタグとボタンタグを使用して、特定のタイミングでGmailへのメール送信を行っています。

f:id:we11dan:20170201224322p:plain

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

詳細は以下のリンクより
MESH:遊び心を形にできる、アプリとつなげるブロック形状の電子タグ|ソニー

 

IFTTTとは

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

IFTTTはその名の通り、If This Then That
という感じで、「もし、これをしたら、あれをする」 というイメージで異なるWEBサービス同士を自動的に連携させるレシピを作成して使います。
実際に作れるレシピはこんな感じ。
もしMESHで○○をしたら、Slack(Google Drive)で××をする。

f:id:we11dan:20170201224729p:plain

まだ使用したことない方には、この辺が参考になりそうです。

作りながら覚える「IFTTT」レシピの使い方活用講座!(全5回) | hoomey

 

Slackとは

チャット形式で行えるコミュニケーションツール。

f:id:we11dan:20170201224855p:plain

実際の画面はこんな感じ!(Windows版のアプリです。)
作成したチーム内で会話をすることができます。

f:id:we11dan:20170201224910p:plain

 

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

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

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

まだ使ったことがない方は、この辺参考になりそうです。

Slackの使い方①:登録から基本説明までまるっと紹介|#mayonez [マヨネーズ]

 

差入れBOXのレシピに挑戦

このツールのイメージ

f:id:we11dan:20170201225039p:plain

 

レシピの詳細と使用したタグ

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

f:id:we11dan:20170201225150p:plain

 

差入れボックスのふたに張り付けた紙です。
これで、皆さんにボタンをポチポチしてもらいます。

f:id:we11dan:20170201225126p:plain


そして作成したレシピはこんな感じ。

f:id:we11dan:20170201225320p:plain

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

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

 

MESH SDKを使用してみる

MESH SDK⇒Slack

SDKでカスタムタグを作る画面はこんな感じ。

f:id:we11dan:20170201225504p:plain

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

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

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

gist.github.com

 

レシピ結果

f:id:we11dan:20170201225937p:plain

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


まとめ

今回作成した「差入れBOX」では、

  • MESH
  • MESH SDK
  • IFTTT
  • Slack API

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