ここでは

Slackで @textchan create 絵文字! と送ると、

という画像をアップしてくれるbotを作ってみる。

つくる理由

Slackでカスタム絵文字が多用されているようなチームでは、
文字だけを収めたカスタム絵文字が多く存在する。
またそれは、ユーザーの手作りであることが多い。

特にエンジニアが大活躍するようなところでは、
各エンジニアがPhotoshop等のデザインツールを持っていないことも珍しくないだろう。
カスタム絵文字の製作時間で職務に影響がでることは間違いない。効率化すべきである。

例）

嬉 / 嬉しいときに

**登校** / 登校したときに

何故、文字だけの絵文字が必要か

投稿に対して、すぐ読み取れるReactionを送ることができる

今の気持ちとして、IDの横にStatusとして表示しておくことができる

つくる

テキストから画像を起こすという処理をするのあたり、
Node.js 上で canvas を生成できる node-canvasというのがいいと思った。
ウェブ上のJavaScriptで <canvas> を生成するのと同じ要領で使える。
のちのち、文字位置調整や、色、フォントの変更をする際も、比較的楽にできる。

また、Slack上で、Mentionを検知、画像をアップロードするために Botkit を使用する。

# node-canvas を動かすためのライブラリのインストール
# こちらは MacでHomebrewでインストールする場合
# その他 https://github.com/Automattic/node-canvas#installation
brew install pkg-config cairo pango libpng jpeg giflib

# node packageのインストール
npm install --save node-canvas botkit

参考にするもの

BotKitを利用したSlack Botの開発環境を5分～15分位で構築する(Windows)
- Slack Bots Configurationの追加方法などもこちら
SlackのBotkitでファイルをアップロードする方法
Node.jsでCanvas(ImageData)を使った簡単な画像処理
その他、いろいろなリポジトリ

GitHub Repository 有り
Qiita上のコードは一部簡略化している

index.js

const Botkit = require('botkit')
const canvas = require('./canvas')

if (!process.env.token) {
  console.log('Error: Specify token in environment')
  process.exit(1)
}

const controller = Botkit.slackbot({
  debug: false
})

controller.spawn({
  token: process.env.token
}).startRTM(function (err) {
  if (err) {
    throw new Error(err)
  }
})

controller.hears('create(.*)', ['direct_message', 'direct_mention', 'mention'], function (bot, message) {
  var setting = {
    text: '',
    color: '#000',
    fontFamily: 'YuGothic'
  }

  var args = message.match[1]
  var reg = /\s+(["“”][^"“”]+["“”]|[^ ]+)/g
  var arg, i = 0

  while (arg = reg.exec(args)) {
    arg = arg[1].replace(/^["“”](.*)["“”]$/, '$1')

    switch (i) {
      case 0:
        setting.text = arg
        break
      case 1:
        setting.color = arg
        break
      case 2:
        setting.fontFamily = arg
        break
    }
    i++
  }

  canvas(setting).then(function (fileObj) {
    var messageObj = fileObj
    messageObj.channels = message.channel

    bot.api.files.upload(messageObj, function (err, res) {
      if (err) console.log(err)
    })
  })
})

▲Slack上でのMentionの検知や画像アップロードなどの処理などを記述

canvas.js

const Canvas = require('canvas')
const fs = require('fs')

var insertStr = function (str, index, insert) {
  return str.slice(0, index) + insert + str.slice(index, str.length);
}
var canvas_to_base64 = function (c) {
  return c.toDataURL().split(',')[1]
}
var decode_and_copy = function (string, filename) {
  return new Promise(function (resolve, reject) {
    var buffer = new Buffer(string, 'base64')
    fs.writeFile(filename, buffer, function (err) {
      if (err) {
        reject(err)
        return
      }
      resolve()
    })
  })
}

async function canvas(setting, next) {

  setting = setting || {
    text: 'えもじ！',
    color: '#000',
    fontFamily: 'YuGothic'
  }

  const text_n = insertStr(setting.text, 2, '\n')
  const filename = './' + setting.text + '.png'

  const c = new Canvas(128, 128)
  const ctx = c.getContext('2d')

  ctx.font = 'bold 60px ' + setting.fontFamily
  ctx.textAlign = 'center'
  ctx.fillStyle = setting.color
  ctx.fillText(text_n, 64, 56)

  await decode_and_copy(canvas_to_base64(c), filename)

  const fileObj = {
    file: fs.createReadStream(filename),
    filename: setting.text + '.png',
    title: setting.text
  }

  return fileObj
}

module.exports = canvas

▲テキストを画像にする処理を記述
今回は、全角４文字を２文字・２文字の２行にする処理のみ

うごかす

# [Slack API Token] は適宜置き換え
token=[Slack API Token] node index.js

Slack

@textchan create 絵文字！
@textchan create 赤・明朝 red "YuMincho"

恐らくこれらが返ってくるので
一旦ダウンロードしカスタム絵文字として追加する

課題

全角４文字以外でもキレイな画像を生成させる
canvasを一度画像ファイルで保存し、その画像ファイルを読み込んでいるが、恐らく不要な作業
使用できるフォントが、マシンなりサーバーなりに依存する
自動でカスタム絵文字追加させたい

おわり

楽しいカスタム絵文字ライフを。