DEV Community: amotarao

Create Slack bot to Generate text image

amotarao — Sun, 10 Dec 2017 14:53:15 +0000

Japanese posted on dev.to, Qiita

I am Japanese. My English level is 💩. Thank you.

Let's create Slack bot using Node.js

This time, I will create Slack bot that sends text and generates images.
Images is used for text emoji.

For example,
Send @textchan create 絵文字！
Bot returns
Note: textchan is bot name. 絵文字 means 'emoji'.

What's text emoji?

It consists only of text.

On Slack, text emoji is important and amazing.

For reaction:

すごいね means 'You are amazing'. 嬉 means 'glad'.

And for status:

登校 means 'go to school'. 大学 means 'university'.

Install libraries

Today, use node-canvas to generate images and Botkit to connect Slack.

# Install libraries for node-canvas on Mac.
# Guide for other OS: https://github.com/Automattic/node-canvas#installation 
brew install pkg-config cairo pango libpng jpeg giflib

# Install node packages.
npm install --save node-canvas botkit

Write programs

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

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

Run

# [Slack API Token] is Slack Bots Integration's API Token
token=[Slack API Token] node index.js

@textchan create 絵文字！

@textchan create 赤・明朝 red "YuMincho"

Finally

GitHub repository is here.

Emoji is amazing!!!

Slackで送った文字を画像で返すbot作った

amotarao — Sun, 10 Dec 2017 13:45:32 +0000

※ Qiita記事のコピペ

ここでは

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

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

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

課題

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

おわり

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

GoogleHomeに話しかけてツイートしてもらう

amotarao — Fri, 01 Dec 2017 11:09:33 +0000

dev.to 投稿テストを兼ね、
Qiita にも書いた記事をそのまま載せる。

こんにちは

「ねぇGoogle」派の amotarao(あもたらお) です。デザイナー職見習いです。

この記事では 『GoogleHomeに話しかけて、内容を代理でツイートしてもらうこと』 を目的とします。

「ねぇGoogle、Twitterに『おなかすいた』とつぶやいて！」
「Twitterに『おなかすいた』と、つぶやきました。」
という感じ。

GoogleHomeはセットアップされていることを前提とし、
今回、 IFTTT というものを使います。
プログラム一切なし なので、誰でもできると思います。
できるだけ分かりやすい文章を心がけます。
分かりづらい表現は教えてください。
よろしくお願いいたします。

IFTTTって？

IFTTTの説明ですが、Wikipediaが分かりやすいと思いますが、ちょっと古かったので、以下引用＋ちょい変更。

「if this then that」というシンプルなコンセプトに基づく「Applet」を作成し共有することができる。
Appletの「this」の部分は「Facebookで写真をタグ付けした時」「Foursquareでチェックした時」といった「きっかけ」になり、
「that」の部分は「テキストメッセージの送信」「Facebookでステータスメッセージを作成」といった「行動」になる。
ユーザーが使用するサービスで有効にする「きっかけ」と「行動」のコンビネーションがAppletである。

サービスというのは、Twitter、Facebook、LINE、Instagram等々で、いろいろ使えます。
あるサービスで起こした きっかけ (つぶやく、写真を上げる、チェックインする等)で、
別のサービスで行動 (つぶやく、記事を投稿する等)してくれる、
仲介業者みたいなものが IFTTT です。

ですので今回、「GoogleHomeに話かける」という きっかけ で、「Twitterにツイートする」という行動をしてもらいます。

IFTTTに登録しよう

トップページに、3種のボタンがあると思います。
好きなもので登録してみましょう。

1. Enter your email

自分のメールアドレスからアカウントを登録します。
メールアドレスを入力したら、Get Startedをクリックしましょう。

Set your password という、パスワードの入力ページが出てくるので、
パスワードを入力して、Sign up　をクリックしましょう。

2. Continue with Google

Googleアカウントの情報を利用して登録をします。
Continue with Googleのクリックで、Googleのログインページが出てくるはずなので、
メールアドレス、パスワードを入力して、ログインしましょう。

3. Continue with Facebook

Facebookアカウントの情報を利用して登録をします。
Continue with Facebookのクリックで、Facebookのログインページが出てくるはずなので、
メールアドレス、パスワードを入力して、ログインしましょう。

アカウントを認証しよう

どのGoogleHomeから、どのTwitterアカウントに投稿するのかが分からないので、それぞれ設定してあげます。

まず、Google Assistant のConnectをクリックし、
GoogleHomeを設定したGoogleアカウントでログインします。
「ifttt.com にアクセスを許可しますか？」と出たら、許可をクリックします。

Twitter も同じく Connectをクリックし、
ツイートさせたいアカウントで認証します。

目的のApplet(アプレット)を探そう

Applet とは、きっかけ・行動をつなぐ架け橋のようなものの名前です。

「Twitterにツイート」したら、「同じ内容をFacebookに投稿」する
「Facebookに投稿」したら、「同じ内容をTwitterにツイート」する
「Twitterのプロフィール写真を変更」したら、「同じ写真をFacebookのプロフィール写真に設定」する

などなど、TwitterとFacebookをつなぐだけでも、さまざまなつなぎ方、架け橋があります。

それぞれが、 Applet なのです。

今回使うAppletは「Post a tweet using your voice」です。

Appletの設定

まず、Turn onをクリックして、このAppletを使える状態にしましょう。

次に英語の入力欄がいっぱいでてきます。

1. 最初の入力欄

「Post a tweet using your voice」と入力されているところです。
このAppletの名前をつけてあげることができますが、あまり意味はないので、そのままでも問題ないです。

2. Receive notifications when this Applet runs + 緑のスイッチ

このAppletが動くごとに、アカウント登録したメールアドレスに通知が行きます。
恐らく余計なので、オフ(緑が黒)にして問題ありません。

3. What do you want to say?

GoogleHomeに何と話しかけたらいいのかを記入します。

「ねぇGoogle、Twitterに『おなかすいた』とつぶやいて！」で動かすようにしたいので、
「Twitterに $ と、つぶやいて」 と入力しましょう。

「OK,Google」「ねぇGoogle」は不要です。
つぶやく内容が入る部分に $ という記号を使います。
最初の文字には使えないのと、他の文字のすぐ隣につけるときは、スペースをいれましょう。
OK 「Twitterに \$ と〜」
NG 「Twitterに\$と〜」スペースがないのでダメ
NG 「\$ と〜」最初に \$ があるのでダメ

4. What's another way to say it? (optional)

3 と同じですが、他のパターンを記入できます。
必須項目ではありません。

「Twitterに $ って、つぶやいて」 とか。

5. And another way? (optional)

4 と同じです。
必須項目ではありません。

「Twitterに $ と、ツイートして」 とか。

6. What do you want the Assistant to say in response?

ツイートが成功したときに、GoogleHomeに何としゃべらせるかを記入します。

「Twitterに $ とツイートしました」 とかでいいと思います。

7. Tweet text

ツイート内容を記入します。
が、ツイート内容に置き換わります。
「 by Google Home」 とかもできますが、そのままでもいいです。

8. Save

クリックして、ここまでの設定を保存しましょう。

9. もう1度設定画面へ

Turn onをクリックしたときの画面に戻ると思います。
右上の歯車をクリックし、もう1度設定画面を開いてください。

10. Language

先ほどなかった、 Language が何故か出現しています。
Japanese を選択しましょう。

11. Save

もう1度保存。
お疲れさまでした。

いざ実行！

「ねぇGoogle、Twitterに『おなかすいた』とつぶやいて！」

いかがでしょうか...?
「Twitterに『おなかすいた』とツイートしました」という返事があったと思います。
また、ツイートもされてるのではないでしょうか。

IFTTT を使って、簡単に設定することができました。

おわりに

恐らくこういう記事、他にもあると思います。
似たような記事だったらごめんなさい。

IFTTT、ホントいろんなサービスが繋げられます。
英語で苦しいかもしれませんが、是非いろいろなことに挑戦してみてください。

GoogleHome、IFTTT どっちがメインだったんだろう :thinking:

それでは。