2017-02-07

Slack のボットで今日の天気を通知する - 表示最適化編

朝の天気と、その後の降水予報が Slack に通知できるようになりました！
これで毎朝の天気を確認できるわけですが、その情報を見るツールとしてスマホを使った時に少し気になる点がありました.

作業環境

Slack
Android 6.0
Slack 2.27.0 (Android App)
Node.js 6.9.1 LTS
Botkit 0.4.9

スマホ表示の確認

ちゃんと表示されています！が天気アイコン、デカい！
分かりやすいと言えば分りやすいですが、ちょっと大きすぎですね. 1日分で、ほぼ画面が埋め尽くされてしまっています. もう少しコンパクトに表示するようにしたいと思います.

表示方法の検討

Slack のボットは発言する際に、アイコンと名前を変えることができます. (chat.postMessage method | Slack)
これを使うことで、現在ロボットのアイコンが表示されている部分を天気アイコンにし、名前の部分に天気情報を入れることにすれば、すっきりしそうです.

Botkit での実装方法ですが、その辺についての説明はありませんでした. 残念.
近いところとしては Slack-specific fields and attachments にリプライにアタッチする話があります. アタッチの中に　username や icon_url が登場しますが、アタッチしたいわけではないのでちょっと異なりそうです.

仕方がないのでソースに当たることにします.
ボットを話させているのは Slackbot_worker.js#send() – Botkit v0.4.9 です. こちらを参照すると slack_message 変数を作っているところに見事に username や icon_url があります. つまり、この関数の引数 message に渡してあげることで設定できそうです. 以下に Slackbot_worker.js#send() を抜粋.

bot.send = function(message, cb) {
    botkit.debug('SAY', message);

    /**
     * Construct a valid slack message.
     */
    var slack_message = {
        type: message.type || 'message',
        channel: message.channel,
        text: message.text || null,
        username: message.username || null,
        parse: message.parse || null,
        link_names: message.link_names || null,
        attachments: message.attachments ?
        JSON.stringify(message.attachments) : null,
        unfurl_links: typeof message.unfurl_links !== 'undefined' ? message.unfurl_links : null,
        unfurl_media: typeof message.unfurl_media !== 'undefined' ? message.unfurl_media : null,
        icon_url: message.icon_url || null,
        icon_emoji: message.icon_emoji || null,
    };
    // (省略)...
};

username や icon_url の渡し方ですが、こちらは、もうあまり考えることは無いですね. 既に channel や text を渡しているわけですから、それらと一緒に渡すだけになります.

Slack ボットの実装

以下にボットの発言部分 bot.say() の実装を抜粋します.

bot.say({
    channel:   channel,
    text:      text,
    username:  `${current.weather[0].main}(${current.weather[0].description})`,
    icon_url:  `http://openweathermap.org/img/w/${current.weather[0].icon.replace('n', 'd')}.png`
});

channel と text に合わせて、username と icon_url を設定するだけです.
前回は text にアイコンの URL を使っていたので、Unix timestamp をパラメータでつけていましたが、今回は常に展開されるので Unix timestamp は不要です.