LoginSignup
12
11

More than 5 years have passed since last update.

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

Posted at

この記事でやったこと

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

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

MESH、IFTTT、Slackについて

:beginner:MESHとは

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

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

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

詳細は以下のリンクより
:computer:公式サイト

:beginner:IFTTTとは

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

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

まだ使用したことない方には、この辺が参考になりそうです。
:computer:作りながら覚える「IFTTT」レシピの使い方活用講座!

:beginner:Slackとは

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

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

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

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

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

まだ使ったことがない方は、この辺参考になりそうです。
:computer:Slackの使い方①:登録から基本説明までまるっと紹介

差入れBOXのレシピに挑戦

このツールのイメージ

image

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

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

image

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

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

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

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

MESH SDKを使用してみる

MESH SDK⇒Slack

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

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

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

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

Initialize
return {
     // 変数を定義し初期化
    runtimeValues : { outputIndex : -1 
                                ,openCount : properties.openCount
                                ,count : properties.doublePush
                                ,sPushCount : properties.singlePush
                                ,messageText : ""}
}
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"       //処理を継続
    };

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"       //処理を継続
};
Result
return {
     // 変数を定義し初期化
    runtimeValues : { outputIndex : -1 
                                ,openCount : properties.openCount
                                ,count : properties.doublePush
                                ,sPushCount : properties.singlePush
                                ,messageText : ""}
}

:star:レシピ結果

image

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

まとめ

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

  • MESH
  • MESH SDK
  • IFTTT
  • Slack API

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

12
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
11