Bluemixで爆速Hubot＆API連携

この記事はteratailの[Bluemixアドベントカレンダー](https://teratail.com/Bluemix)4日目の記事です！

今時Bot動かすならBluemixだと風の噂で聞いたので、いっちょやってみます(｀・ω・´)キリッ

## 目標
1. HubotをBluemix上で動かす
2. WatsonAPIをBluemix上でバインドする
3. Hubotを通してAPIで遊ぶ


## 1. HubotをBluemix上で動かす
### ローカルで作成
Bluemixにpushするために、まずはローカルでHubotを作っていきます！
以下はnode.jsとnpmを利用した手順です。

```
// インストール
npm install -g yo generator-hubot
npm install -g coffee-script

// 任意のプロジェクトディレクトリを作成する
mkdir mybot
cd mybot/

// hubotの作成
yo hubot
```

よしなにファイルが作成されるので、Procfileの中身をslack向けに書き換えれば完成です。

```Procfile
web: bin/hubot --adapter slack
```

`/bin/hubot` でとりあえずローカルで実行できます。
デフォルトでBotに`ping`と話しかけると`PONG`と返してくれます。

<img width="209" alt="スクリーンショット 2016-12-04 14.25.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/119003/7a552b89-e60c-a70b-7b64-601b4ebc6460.png">

（caloryはBot名です、つっこまないでください。）

Hubotにmanifest.ymlというファイルを追加しておきます。

```manifest.yml
applications:
- buildpack: https://github.com/jthomas/nodejs-v4-buildpack.git
  command: ./bin/hubot --adapter slack
  path: .
  instances: 1
  memory: 256M
```


### Bluemixにデプロイする
Bluemix上にアプリの箱だけ先に作っておきます。
SDK for Node.jsを選んで作成を押すと、デプロイ手順が1つずつ説明されているのでこれに沿ってやっていきます！

まずコマンドラインから操作できる`cf-cli`をインストールします。
Macの人は`brew install cf-cli`でOK。

コマンドラインからbluemixに接続していきます。

```
cf api https://api.***.bluemix.net
```

ここのURLはBluemixでスペースを作った地域（「米国南部」「シドニー」など）によって変わるので注意。
デプロイ手順に記載してあります。

```
cf login
```

ユーザ名とパスワード、スペース名等が求められるので入力。

```
cf push アプリケーション名
```

Bluemixに作っておいたアプリ名でpushします。
これで一応のデプロイは完了。

### SlackとBotを連携
<img width="978" alt="スクリーンショット 2016-12-04 14.45.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/119003/411bf8b8-7877-1c99-0ed6-ef6168bb4175.png">

SlackのCustom IntegrationsからHubotを追加します。
任意の名前、アイコン等を設定したら、API Tokenをコピー。
<img width="1025" alt="スクリーンショット 2016-12-04 14.45.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/119003/7bc70f2c-c788-1199-05c3-65b2c1f9d2e0.png">

このトークンがSlackとHubotの連携に必要なため、Bluemixの環境変数として登録します。

```
cf set-env bot名 HUBOT_SLACK_TOKEN トークン
```

Slack側でチャンネルにBotを招待！
`/invite 名前`で招待できます。
<img width="464" alt="スクリーンショット 2016-12-03 18.23.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/119003/36e1b506-9ed8-3121-860c-ff1d8f25af92.png">

爆速！

### 機能追加
hubotは`scripts/`にファイルを追加していくとゴリゴリ動いてくれます。

```scripts/hoge.coffee
module.exports = (robot) ->
  robot.respond /hoge$/i, (msg) ->
    msg.send "ホゲー"
```

<img width="358" alt="スクリーンショット 2016-12-04 15.16.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/119003/739d3228-58ae-1730-f6e4-f65a0604dc2b.png">


こんな感じ。

## 2. WatsonAPIをBluemix上でバインドする
Bluemix上の「接続」からサービスを追加することができます。

<img width="748" alt="スクリーンショット 2016-12-04 14.56.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/119003/a5259f12-5630-b3d1-6a8b-ebb2daeaac1b.png">

たくさんのBluemixのサービスが簡単に追加できてよいですね！


## 3. Hubotを通してAPIで遊ぶ
今回はSlackに画像を投げたらHubotがVisualRecognitionという画像認識のAPIに渡し、戻ってきたデータであそ

・・・びたかったのですが。

<img width="436" alt="スクリーンショット 2016-12-04 15.19.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/119003/2b422bc6-5c96-ccc3-def2-1624cf1e2f0e.png">


Hubotにはデフォルトで画像を受け取ってくれる機能はないようです・・。
LINEBotのイメージでmessageとimageを簡単に処理してくれるのではと勝手に思っていました(´；ω；｀)うっ

自前で実装するとなんとかやってくれる方法もあるようです。
http://a3no.hatenablog.com/entry/2015/09/13/005334

カレンダーの日にち的にタイムリミットが近いので、続きはどこかの記事で・・・！

ご利用は計画的に！＼(^o^)／ぎゃぼん

明日は@n0bisukeさんです！すごいやつよろしくお願いします！（煽り