BlockKitBuilderを使ってSlackBotのメッセージをイイ感じに盛り付けてみた

SlackBotの投稿メッセージが無骨に感じたこともあり、BlockKitBuilderを用いて飾り付けをしてみました。

#Slack

haoyayoi

2019.08.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

Slackへの投稿メッセージ体裁を整える時にはAttachmentを利用すると効果的ですが、組み立てるのが中々大変です。Block Kit Builderを用いると、仮組みしたデザインを元にコードが出力され、メッセージのフォーマットを組み立てる負担が大幅に減ります。

Block Kit Builder | Classmethod Slack

先程作成したBotのメッセージが無骨な感じを受けたため、Block Kit Builderを用いてフォーマットを組み立ててみました。

SlackのBoltフレームワークを使ってWordPressをSlackから検索するBotを作ってみた

BlockKitBuilderの操作

左側のBlocksから用途に応じたものを選択していきます。あくまでも枠組みで、中に入れる情報は別途用意する必要があります。

今回用いたBlockは以下の通りです。

Section
Divider

Sectionに文字情報を追加し、Dividerで区切りとしています。Builderから実際にSlackのチャンネルへ投稿できるため、組み立てたサンプルを残しておきたい場合は使っておきしょう。

実際の記述例

前回のBotでの投稿処理部分にBuilderで出力したコードを加えています。フォーマット追加にあわせて、スコアも足してみました。

// Listens to incoming messages that contain "hello"
app.message('記事検索', ({ message, say }) => {
  // say() sends a message to the channel where the event was triggered
  var keyword = message.text;
  keyword = keyword.replace(/記事検索 /g,'');
  require('https').get(URL+keyword, function (res) {
    res.setEncoding('utf8');
    var body = ''
    res.on('data', function (chunk) {
        body += chunk;
    });
    res.on('end', function (chunk) {
    // body の値を json としてパースしている
    res = JSON.parse(body);
    var result = `「${keyword}」の検索結果\n`;
    var format = []
    var header = {
          "type": "section",
          "text": {
              "type": "plain_text",
              "text": `:earth_asia:「${keyword}」の検索結果\n`,
              "emoji": true
          }
    };
    var divider = {
          "type": "divider"
    }
    format.push(header);
    format.push(divider);
    res.forEach(function(item, index) {
      var desc = item.post_meta.description;
      if(desc != '') {
        desc = '```' + `${item.post_meta.description}` + '```';
      }
      var body = {
        "type": "section",
        "text": {
            "type": "mrkdwn",
            "text": `<${item.link}|${item.title.rendered}>\n` + desc + `\n>*スコア* ${item.post_meta.total_share_count} (:facebook:${item.post_meta.facebook_count} :twitter:${item.post_meta.twitter_count} :hatebu:${item.post_meta.hatena_count})`
        }
      }
      format.push(body);
      format.push(divider);
    });
    var response_message = {
      response_type: 'in_channel',
      blocks: format
    }
    say(response_message);
  })

  }).on('error', function (e) {
    console.log(e.message);
  });
});

実際の出力は以下のようになります。