この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
Slackへの投稿メッセージ体裁を整える時にはAttachmentを利用すると効果的ですが、組み立てるのが中々大変です。Block Kit Builderを用いると、仮組みしたデザインを元にコードが出力され、メッセージのフォーマットを組み立てる負担が大幅に減ります。
Block Kit Builder | Classmethod Slack
先程作成したBotのメッセージが無骨な感じを受けたため、Block Kit Builderを用いてフォーマットを組み立ててみました。
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);
});
});
実際の出力は以下のようになります。
気をつけるべきところ
利用可能なmarkdownに気をつける
メッセージで利用可能なmarkdownはそれほど幅広くありません。一度確認してから利用しましょう。
カスタムemojiが利用可能か確認する
emojiはworkspace上の登録に依存します。絵が表示されるかどうかの違いですが、気になる場合は正確に登録しておきましょう。
あとがき
Attachmentでかなり悩まされた後に触ると、思い通りに作ることもあり、全くストレスを感じませんでした。
今回はあくまで自動投稿されるメッセージのフォーマットにのみ利用しており、ボタンなどのアクションが伴うBlockには触れていません。また機会があれば詳しく触ってみようと思います。