Yeoman で Hubot を作成して Heroku へデプロイし Slack と連携する


みんな大好き？ Hubot ですが、GitHub チームが作ってる Yeoman の [Hubot ジェネレータ](https://github.com/github/generator-hubot) があるので、これを元にボットを作成して Heroku へデプロイし、更に Slack と連携してチャット上の発言を監視、までやってみました。

# 1. 前提

- 作業している手元の OS は `Mac OS X 10.9.5 (Mavericks)` です。
	- （なんか怖くて Yosemite にはしていない--;）
- 手元に Node.js および Yeoman の環境があること。
	- もし無い場合は、次のように構築してください。
	- ⇒ [Mac で Yeoman の環境を構築する手順](http://qiita.com/hkusu/items/0d2ed38c47b73201f4c2)
- Heroku のアカウントおよびコマンドラインツールがあること。
	- もし無い場合は、Railsの場合の手順を以前に書いたので、よろしければ参考にしてください。
		- ⇒ [Rails4のアプリケーションを Heroku へデプロイする手順](http://qiita.com/hkusu/items/7e091307f758f39b3b9d)
- もしかして CoffeeScript を別途インストールする必要があるかも。
	- `$ npm install -g coffee-script`
	- ただ私の環境だと、無くても Hubot は動いてはいます。

ちなみに Hubot ジェネレータ（[genetator-hubot](https://github.com/github/generator-hubot)） のバージョンは、現時点で `0.1.4 ` です。
（なんか更新が早そうなので、上手くいかない場合は GitHub 側で記載されている手順を確認してください。）

# 2. 環境構築の手順

## ① Hubot ジェネレータのインストールと起動

- Node.js の `npm` コマンドでインストールします。

	```shell:
	$ npm install -g generator-hubot
	```

- 適当なワーク用のディレクトリを作成して、ジェネレータを起動します。

	```shell:
	$ mkdir hoge_dir
	$ cd hoge_dir
	$ yo hubot
	```

- `Bot name` と `Description` を適当にいれ、`Bot adapter` は `slack` と入力します。

	![screen2.jpg](https://qiita-image-store.s3.amazonaws.com/0/35733/8d8363d5-4cc0-e67e-208a-29588733e445.jpeg "screen2.jpg")

- 次のようにファイルが展開されます。

	![screen10.jpg](https://qiita-image-store.s3.amazonaws.com/0/35733/dfd2e951-5088-2311-981e-e378607e5b66.jpeg "screen10.jpg")

	`package.json` は次のような感じ。Google の画像とか Youtube とかも連携できるのだろうか？

	![screen8.jpg](https://qiita-image-store.s3.amazonaws.com/0/35733/a4ed0ce0-9ca4-1b4b-1999-e16b9c114ee8.jpeg "screen8.jpg")


- ローカルで動作確認します。

	```shell:	
	$ cd hoge_dir
	$ bin/hubot
	```

	なんか警告が出ますが、よく分らないのでスルーで^^;

	![screen1.jpg](https://qiita-image-store.s3.amazonaws.com/0/35733/b1e472d3-7df8-fade-3edf-c70e2fd2dcba.jpeg "screen1.jpg")

	Hubot のプロンプトで `hubot ping` と打ちます。`PONG`と返ってくればOK。

	![screen6.jpg](https://qiita-image-store.s3.amazonaws.com/0/35733/8393d628-c65e-e95f-0378-63ca2fcd2b52.jpeg "screen6.jpg")

## ② Heroku へのデプロイ

- まずは Git でコミットします。

	```shell:
	$ cd hoge_dir
	$ git init
	$ git add .
	$ git commit -m "hoge comment"
	```

- Heroku へプッシュします。

	```shell:
	$ heroku create
	$ git push heroku master
	```

- 動作確認します。

	```shell:	
	$ heroku open
	```

	ブラウザが開いて、次のように表示されればOK。

	![screen9 2.jpg](https://qiita-image-store.s3.amazonaws.com/0/35733/ac9d02f6-b3e1-96d0-933a-9c60e38de0ce.jpeg "screen9 2.jpg")

## ③ Slack 側の設定

- `integration` メニューで、Hubot を選択します。

	![screen7.jpg](https://qiita-image-store.s3.amazonaws.com/0/35733/cb3ac3b1-e821-b3c2-e622-a311d88391b0.jpeg "screen7.jpg")

	> 画面に表示されている `HUBOT_SLACK_TOKEN` と `HUBOT_SLACK_TEAM` は、後で使います。

	`Hubot URL` に、先程の Heroku の トップURL を入力して保存します。

	![screen4.jpg](https://qiita-image-store.s3.amazonaws.com/0/35733/54760ba3-150b-3b62-a17c-646ba96726f1.jpeg "screen4.jpg")

- Heroku へ環境変数を追加します。

	```shell:
	$ heroku config:add HUBOT_SLACK_TOKEN=[Slackの画面で表示されたもの]
	$ heroku config:add HUBOT_SLACK_TEAM=[Slackの画面で表示されたもの]
	$ heroku config:add HUBOT_SLACK_BOTNAME=[呼びかける任意のBot名]
	$ heroku config:add HEROKU_URL=[先程の Heroku の トップURL]
	```

	ちなみに上記のようにコマンドラインからでなくても、Heroku のダッシュボードから設定してもOKです。

	![screen12.jpg](https://qiita-image-store.s3.amazonaws.com/0/35733/3eb6748a-3e19-e305-dcc7-ee19157f44e4.jpeg "screen12.jpg")

- 動作確認してみます。今回は、ボット名は `hogebot` としました。Slack のオープンな CHANNELS で ping してみます。（PRIVATE GROUPS では使えない。）

	![hubot_test___Yumemi_Slack 3.png](https://qiita-image-store.s3.amazonaws.com/0/35733/f0d84d35-da1e-8761-2b27-788b96ae03fd.png "hubot_test___Yumemi_Slack 3.png")

# 3. Slack の発言を監視してみる

Hubot で色々できそうなのですが、とりあえず、Slack の発言を監視して、特定の文字列が現れたら反応するようにしてみます。試しに、`あいうえお` という文字列を監視してみます。

```coffeescript:scripts/hoge.coffee
module.exports = (robot) ->

  robot.hear /あいうえお/i, (msg) ->
    msg.send "呼びました？"
```

> `scripts` ディレクトリに置いた任意のスクリプトファイルが自動的に読み込まれるぽい。

上記のファイルをコミット、Heroku へ反映して、Slack で発言してみます。

![hubot_test___Yumemi_Slack 4.png](https://qiita-image-store.s3.amazonaws.com/0/35733/773fe740-f1b9-a7b0-dce6-a406d085a5e9.png "hubot_test___Yumemi_Slack 4.png")

たったこれだけのソースで、簡単にできました^^

# 4. ほか

- 今回のソースは GitHub にも置きました。
	- ⇒ https://github.com/hkusu/Hubot_Slack_sample
	- Hubot ジェネレータ（[genetator-hubot](https://github.com/github/generator-hubot)）が上手く動かない場合は、これを利用して頂いて構いません。