メタル桃子は、
話しかけられたら『メタル桃子だけど。』と回答するだけでよいので。
bot開発に入門するには、取り組みやすいテーマだと考えられます。

そこで、このエントリでは、
Hubotというbot-frameworkを使って、slack用のメタル桃子botを作ることにします。
作成したbotは、herokuにdeployします。

Hubot
https://hubot.github.com/

前提とする環境:

  • Node.js (v10.7.0を利用しました)
  • yarn (1.7.0を利用しました)
  • Heroku

以下の流れでメタル桃子botを作成していきます。

  • ローカルPCでhubotの環境を準備する
  • メタル桃子botを実装する
  • Herokuにbotをdeployする
  • メタル桃子アイコンを作る
  • slackと連携させる

ローカルPCでbotを動かしてみる

Node.jsとyarnは利用可能となっている前提として。

以下のチュートリアルに従ってhubotの環境を用意します。

Getting Started With Hubot | Hubot
https://hubot.github.com/docs/

以下のコマンドで、hubot generatorをインストールします。

$ yarn global add yo generator-hubot

以下のコマンドで、hubotのインスタンスを生成します。

$ mkdir metalmomoko-hubot
$ cd metalmomoko-hubot
$ yo hubot

「yo hubot」で、いろいろと聞かれますが、
「? Bot adapter (campfire)」に対して「slack」と答える以外はデフォルトでよいです。

以下のように、生成したコードをgitにコミットしておきます。

$ git init
$ git add .
$ git commit -m "Initial commit"

generatorの生成するコードが、
nodeのバージョンが古い、npm前提なので、
バージョンの変更とyarnへの切り替えを行います。

以下のように、package.jsonのenginesのversionを修正。

  "engines": {
    "node": "10.7.0"
  }

以下のように、npmからyarnに変更します。

$ yarn install
$ git rm package-lock.json
$ git add yarn.lock

ここでも、いったんコミットしておくことにします。

$ git commit -a -m "nodejs verup and use yarn"

「bin/hubot」で起動して、エラーが表示されず入力待ちになればローカルでの環境準備は完了です。

メタル桃子botを実装する

ここまでで環境は整備できたので、次はメタル桃子を実装してきます。

hubotでは、script配下にbotの処理を実装していきます。

何か話しかけられたら『メタル桃子だけど。』と返答するbotは、以下のように実装します。

scripts/metalmomoko-dakedo.js

module.exports = function (robot) {
  robot.hear(/.*/i, res => {
    res.send('メタル桃子だけど。')
  })
}

hear以下の正規表現が、反応する文言（ここでは「.*」として、すべての問いかけに反応）
send以下が、返答するメッセージです。

このスクリプトを配置して、
再びhubotを起動し、話かけてみると、返答が返ってきます。

$ bin/hubot
※途中省略※
メタル桃子って何？
metalmomoko-hubot> メタル桃子だけど。

実装が完了したので、ここでコミットしておきます。

$ git add yarn.lock
$ git commit -a -m "add metalmomoko-dakedo"

Herokuにbotをdeployする

作成したbotをHerokuにdeployします。
Herokuアカウントがあること、CLIのセットアップは前提として説明します。

Herokuのアカウント作成とCLIセットアップは、以下を参考にしてください。

Heroku
https://jp.heroku.com/

Heroku CLI
https://devcenter.heroku.com/articles/heroku-cli

CLIでHerokuにログインします。

$ heroku login

以下のようにして、アプリケーションの作成とdeployを行います。
※create時のアプリケーション名は任意に指定してください。

$ heroku create metalmomoko
$ git push heroku master

デプロイが成功することを確認します。
※nodeのバージョンが古いままだと失敗します。

以下のコマンドでRedisも追加しておきます。

$ heroku addons:add redistogo:nano

メタル桃子アイコンを作る

slackにメタル桃子botを参加させる前に、メタル桃子bot用のアイコンを作っておきます。

対応しているスマートフォンでミリシタを起動し、
周防桃子をセンターにして好きな曲のMVを再生し、スクリーンショットをとります。
※まだミリシタをやっていない方は、以下から入手し周防桃子が手に入るまでプレイしてください。

アイドルマスター ミリオンライブ！ シアターデイズ
http://millionlive.idolmaster.jp/theaterdays/

スクリーンショットをPhotoshopに取り込み、以下のように加工します。
（Photoshop CS6で作業しました）

(1) 顔部分アップの正方形にトリミング(300x300px)

(2) フィルター→表現手法→エンボス

metalmomoko01

(3) レイヤー効果→グラデーションオーバーレイ

metalmomoko02

(4) png形式で出力

slackと連携させる

最後に、作成したbotをslackに参加できるように設定します。

slackのワークスペースメニュー（左上）から、
「Administration」->「Manage Apps」を選択します。

「Search App Directory」(上部中央)に「Hubot」と入力して、Hubotアプリを追加します。

「Integration Settings」で以下の項目を設定します。

  • Customize Name: metalmomoko
  • Customize Icon: 前項で作成したアイコン
  • Full Name: メタル桃子

同じページの「Setup Instructions」に記載されている
「HUBOT_SLACK_TOKEN=xxxx」の部分をコピーして。
以下のように、herokuに設定します。

$ heroku config:add HUBOT_SLACK_TOKEN=※コピーした値※

正しく設定出来ていれば、slackのApssに「メタル桃子」が出てきます。
直接話しかけたり、チャネルにInviteしてメンションすると、
以下のように返答してくれるようになります。

metalmomoko03

以上で、
『メタル桃子だけど。』と回答するbotが作成出来ました。

Webhookと連携させたbotなど、便利なbotを作成する入門として、
メタル桃子botを作ってみるのも楽しいのではないかな思います。