* Qiita-Artikel kopieren und einfügen

hier

@textchan create 絵文字! in Slack

Lassen Sie uns einen Bot erstellen, der das Bild hochlädt.

Warum wir es machen

Für Teams, die in Slack häufig benutzerdefinierte Emojis verwenden,
Es gibt viele benutzerdefinierte Emojis, die nur Buchstaben enthalten.
Außerdem wird es oft vom Benutzer erstellt.

Gerade dort, wo Ingenieure eine aktive Rolle spielen,
Es ist nicht ungewöhnlich, dass jeder Ingenieur nicht über ein Designtool wie Photoshop verfügt.
Es besteht kein Zweifel, dass die Zeit, die zum Erstellen eines benutzerdefinierten Emojis benötigt wird, Ihre Arbeit beeinflusst. Es sollte effizient sein.

Beispiel)

glücklich / Wenn ich glücklich bin

zur Schule gehen / Wenn ich zur Schule gehe

Warum brauchen wir Nur-Text-Emoji

Sie können eine Reaktion auf einen Beitrag senden, die sofort gelesen werden kann.

Als Gefühl können Sie es jetzt als Status neben der ID anzeigen

Erstellen

Beim Erstellen eines Bildes aus Text
Kann Canvas auf Node.js node-canvas generieren Ich fand es gut.
Es kann genauso verwendet werden, wie in JavaScript im Web generiert wird.
Später, wenn Sie die Zeichenposition anpassen, Farben und Schriftarten ändern, ist dies relativ einfach möglich.

Außerdem auf Slack Botkit, um Erwähnungen zu erkennen und Bilder hochzuladen benutzen.

# 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

Referenzen

• Erstellen Sie eine Slack Bot-Entwicklungsumgebung mit BotKit in 5 bis 15 Minuten (Windows)
  • So fügen Sie die Konfiguration von Slack Bots usw. hinzu
• Wie man Dateien mit dem Botkit von Slack hochlädt
• Einfache Bildbearbeitung mit Canvas (ImageData) in Node.js
• Andere Repositories

GitHub-Repository Ja
Der Code auf Qiita ist teilweise vereinfacht

// 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)
    })
  })
})

▲ Beschreiben Sie Prozesse wie die Erkennung von Erwähnungen und Bild-Uploads auf Slack

// 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

▲ Beschreiben Sie den Vorgang zum Konvertieren von Text in ein Bild
Dieses Mal wird nur verarbeitet, um 4 Doppelbyte-Zeichen in 2 Zeilen mit 2 Zeichen und 2 Zeichen umzuwandeln

bewegen

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

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

vielleicht kommen diese wieder
Einmal herunterladen und als benutzerdefiniertes Emoji hinzufügen

Aufgaben

• Generieren Sie wunderschöne Bilder auch mit anderen Zeichen als 4 Double-Byte-Zeichen
• Die Leinwand wird einmal als Bilddatei gespeichert und die Bilddatei wird gelesen, aber das ist wahrscheinlich unnötige Arbeit
• Verfügbare Schriftarten hängen vom Computer oder Server ab
• Ich möchte benutzerdefinierte Emojis automatisch hinzufügen

Ende

Genießen Sie Ihr benutzerdefiniertes Emoji-Leben.