Message Buttonとは

最近になってSlack APIに追加された新機能　普段使ってるタイムライン上でボタン出せるよ！って話

ニュースになって（一部の界隈では）結構話題になった

jp.techcrunch.com

japan.cnet.com

その割に「実際に試してみた」的な記事は殆ど見かけない。あのQiitaですら音沙汰ない（平成28年7月2日現在）

何故か、理由は簡単で APIはシンプルなくせに実装がくっそ煩わしいから である

けどどうしてもボタンを作ってみたくなったので試しにやってみた

用意するもの

Slack
1 Integration消費するっぽい　かなC
SSL通信できるサーバー
証明書はLet's Encryptでも可能
上記サーバーに接続するためのドメイン１つ

構成

数値はポート番号を表す。

[ いんたーねっと ]-----[ ルーター ]--443--[ nginx ]--3000--[botkit]

証明書の準備

繰り返すがLet's Encryptでもできた　要はHTTPSなら何でもいいっぽい（オレオレ証明書は未確認）

thr3a.hatenablog.com

Slackの設定

これが結構ややこしい

https://api.slack.com/apps/newにアクセスしてアプリを作る　作成時は適当でもおｋ

次にココからさっき作ったアプリの設定画面に行き各種設定を行う

App Credentialsより
- Redirect URIをhttps://YOUR_HOST/oauthにする
- Client IDとClient Secretは後で使うので控えておく
Bot Userより
- 適当な名前を設定しておく
Interactive Messagesより
- Request URLを https://YOUR_HOST/slack/receive にする

nginxのインストール

省略リバースプロキシ役なので適当に443でlistenしてhttp://localhost:3000に投げればおｋ

Botの作成

npm initして npm install -S botkit は予めやっておく bot.jsとして以下を作成

var Botkit = require('botkit');

/***********************************
 * Setup
 ***********************************/

if (!process.env.clientId || !process.env.clientSecret || !process.env.port) {
  console.log('Error: Specify clientId clientSecret and port in environment');
  process.exit(1);
}

var controller = Botkit.slackbot({
  json_file_store: './bot_db/'
}).configureSlackApp(
  {
    clientId: process.env.clientId,
    clientSecret: process.env.clientSecret,
    scopes: ['bot']
  }
);

controller.on('create_bot',function(bot,config) {

  if (_bots[bot.config.token]) {
    // already online! do nothing.
  } else {
    bot.startRTM(function(err) {

      if (!err) {
        trackBot(bot);
      }

      bot.startPrivateConversation({user: config.createdBy},function(err,convo) {
        if (err) {
          console.log(err);
        } else {
          convo.say('I am a bot that has just joined your team');
          convo.say('You must now /invite me to a channel so that I can be of use!');
        }
      });

    });
  }

});


// Handle events related to the websocket connection to Slack
controller.on('rtm_open',function(bot) {
  console.log('** The RTM api just connected!');
});

controller.on('rtm_close',function(bot) {
  console.log('** The RTM api just closed');
  // you may want to attempt to re-open
});

controller.setupWebserver(process.env.port,function(err,webserver) {
  controller.createWebhookEndpoints(controller.webserver);

  controller.createOauthEndpoints(controller.webserver,function(err,req,res) {
    if (err) {
      res.status(500).send('ERROR: ' + err);
    } else {
      res.send('Success!');
    }
  });
});

var _bots = {};
function trackBot(bot) {
  _bots[bot.config.token] = bot;
}

controller.storage.teams.all(function(err,teams) {

  if (err) {
    throw new Error(err);
  }

  // connect all teams with bots up to slack!
  for (var t  in teams) {
    if (teams[t].bot) {
      controller.spawn(teams[t]).startRTM(function(err, bot) {
        if (err) {
          console.log('Error connecting bot to Slack:',err);
        } else {
          trackBot(bot);
        }
      });
    }
  }

});

/**************************
 * Reply
 **************************/

controller.hears('hi', ['direct_message','direct_mention','mention'],function(bot,message) {
  var reply = {
    "text": "朝にする挨拶は？",
    "attachments": [{
      "text": "どれか１つ選んでね",
      "fallback": "failed...",
      "callback_id": "my_quiz",
      "color": "#3AA3E3",
      "actions": [
        {
          "type": "button",
          "name": "atari",
          "text": "おはよう"
        },
        {
          "type": "button",
          "name": "hazure",
          "text": "こんにちは"
        },
        {
          "type": "button",
          "name": "hazure",
          "text": "こんばんわ"
        }
      ]
    }]
  };
  bot.reply(message, reply);
});

controller.on('interactive_message_callback', function(bot, message) {
  var users_answer = message.actions[0].name;
  if (users_answer == "atari") {
    bot.replyInteractive(message, "正解！");
  }else {
    bot.replyInteractive(message, "はずれ。。。。");
  }
});

コードは以下を参考にした

実行！

clientId=CLIENT_ID clientSecret=CLIENT_SECRET port=3000 node bot.js

動かざることバグの如し

近づきたいよ君の理想に

【Slack】Message Buttonを使ったクイズを作ってみる