会話エンジンにWatson Conversationを使ったFacebook Messenger Botを作ってみた

前回の投稿（[会話エンジンにWatson Conversationを使ったSlack botを作ってみた](http://qiita.com/tsota/items/497513585f069386626f "会話エンジンにWatson Conversationを使ったSlack botを作ってみた")）の続編です。
[botkit-middleware](https://github.com/watson-developer-cloud/botkit-middleware "botkit-middleware")を使って、会話エンジンにWatson Conversationを使用したFacebook Messenger Botを作ってみました。
この投稿では、その作成手順をご紹介します。

手順は以下のステップになります。
1. Watson ConversationのWorkspaceの作成
2. Facebookページの作成
3. Facebookアプリの作成
4. アプリケーションをBluemixへデプロイ
5. FacebookアプリのWebhooksの設定

## Facebook MessengerのBotとは
Facebook MessengerのBotについては以下の記事が参考になります。
* [5分でわかるFacebook Messenger PlatformのBot概要](http://qiita.com/kpkpkp/items/bc9f6fa161d612fe496c "5分でわかるFacebook Messenger PlatformのBot概要")
* [Messengerで簡単なBotつくる(Facebook Messenger Platform from F8)](http://qiita.com/pochi-sato/items/f3f5598e36c1fa92d840 "Messengerで簡単なBotつくる(Facebook Messenger Platform from F8)")
* [ジャスト30分！FBメッセンジャーbotをとりあえず作ってみる手順まとめ](https://bita.jp/dml/facebookbot_exp "ジャスト30分！FBメッセンジャーbotをとりあえず作ってみる手順まとめ")

## 1. Watson ConversationのWorkspaceの作成
以下の前回記事の"1. Watson ConversationのWorkspaceの作成"を実施してください。前回と同じ会話定義を使います。 
Workspace作成後、**Watson Conversationのworkspace_id、username、passwordは後ほど使用しますので控えておきます。**
前回記事：[会話エンジンにWatson Conversationを使ったSlack botを作ってみた](http://qiita.com/tsota/items/497513585f069386626f "会話エンジンにWatson Conversationを使ったSlack botを作ってみた")

## 2. Facebookページ作成
以下のリンクからFacebookのページを作成します。任意の設定でFacebookページを作成します。
https://www.facebook.com/pages/create.php

## 3. Facebookアプリの作成
以下のリンクからFacebookアプリを作成します。右上の「マイアプリ」を選択し、「新しいアプリを追加」を選択します。
https://developers.facebook.com/


![F1.png](https://qiita-image-store.s3.amazonaws.com/0/103795/94b41287-cb87-b61c-c175-e99030d9506d.png)

任意の名前でFacebookアプリを作成します。カテゴリも任意です。
「アプリIDを作成してください」ボタンを押してアプリを作成します。
![F2.PNG](https://qiita-image-store.s3.amazonaws.com/0/103795/2979aabf-441c-7d7c-34af-686e36bc3bfa.png)

Facebookアプリの「製品を追加」の画面でMessengerを追加します。Messengerの右側の「スタート」ボタンを押します。
![F3.PNG](https://qiita-image-store.s3.amazonaws.com/0/103795/826587bc-bab4-9146-d13c-c12d2c7a5086.png)

「スタート」ボタンを押します。
![F4.PNG](https://qiita-image-store.s3.amazonaws.com/0/103795/c688d43f-1a8a-73f8-a7cb-3634d8af5810.png)

次にトークン生成を行います。Facebookページを選択し、ページアクセストークンを生成します。**このトークンは後ほど使用しますので控えておいてください。**
![F5.PNG](https://qiita-image-store.s3.amazonaws.com/0/103795/5a4d5c38-b83c-4453-1195-e3330e6643fe.png)

また、**Facebookアプリのapp secretも後ほど必要になるので、「設定」→「ベーシック」の画面から確認して控えておきます。**
![F10.PNG](https://qiita-image-store.s3.amazonaws.com/0/103795/0c297cc2-28bf-53a9-47c5-6c84e5f3c51d.png)



ここで一旦Facebookから離れて、アプリケーションをBluemixにデプロイします。

## 4. アプリケーションをBluemixへデプロイ

botkit-middlewareのサンプルコードをダウンロードし、今回使用するmulti-botディレクトリに移動します。以下のコマンドを実行します。

```
git clone https://github.com/watson-developer-cloud/botkit-middleware.git
cd botkit-middleware\examples\multi-bot
```

この投稿作成時には、multi-botディレクトリのpackage.jsonの"botkit-middleware-watson"のバージョン指定が"^0.0.1"のままでは動かなかったため、"^1.0.0"に変更しています。

```json:package.json(修正後)
{
  "name": "botkit-middleware-watson-multi-bot-example",
  "version": "0.0.1",
  "description": "Multiple social channel bot example using botkit-middleware-watson with Botkit.",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "license": "Apache-2.0",
  "dependencies": {
    "body-parser": "^1.15.2",
    "botkit": "^0.2.2",
    "dotenv": "^2.0.0",
    "express": "^4.13.4",
    "botkit-middleware-watson": "^1.0.0"
  }
}
```
multi-botディレクトリの.envファイルを変更します。
変更内容
>2,3,4行目：Watson Conversationのusername,password,workspace_idを設定します。
>10行目：コメントを外し、Facebookアプリのページアクセストークンを設定します。
>11行目：コメントを外し、任意の値を設定します。後のステップ（Webhooksの設定）で使用するので控えておいてください。
>12行目：コメントを外し、Facebookアプリのapp secretを設定します。
>22行目：USE_SLACK=trueをコメントにします。
>23行目：USE_FACEBOOK=trueのコメントを外します。

.envファイルの修正イメージ
![F1.png](https://qiita-image-store.s3.amazonaws.com/0/103795/3525d758-4d3f-ff11-de20-a206b3cba73a.png)


package.json、.envファイルの修正が終わったら、multi-botディレクトリで以下のコマンドを実行してBluemixへアプリケーションをデプロイします。\<app_name\>部分はBluemix上で他のアプリと被らない任意の名前を指定します。

```
cf push -b sdk-for-nodejs -m 256M <app_name>

以下は、上記のコマンドの結果（stateがrunnigになっていれば正常に起動しています。）
requested state: started
instances: 1/1
usage: 256M x 1 instances
urls: xxxxxx.mybluemix.net
last uploaded: Tue Nov 1 13:58:32 UTC 2016
stack: unknown
buildpack: sdk-for-nodejs

     state     since                    cpu    memory           disk           details
#0   running   2016-11-01 10:59:40 PM   0.0%   113.5M of 256M   125.5M of 1G

```
## 5. FacebookアプリのWebhooksの設定
再び、Facebookアプリに戻りWebhooksの設定を行います。「Webhooks」ボタンを押します。
![F7.PNG](https://qiita-image-store.s3.amazonaws.com/0/103795/082793b3-90d0-e80c-88f4-a924570a661d.png)

コールバックURLには、「bluemixアプリのURL + **/facebook/receive**」を設定します。
トークンを確認には、.envファイルに設定したFB_VERIFY_TOKENを設定します。
「messeges」にチェックして、「確認して保存」ボタンを押します。
![F8.PNG](https://qiita-image-store.s3.amazonaws.com/0/103795/15a046d4-424f-d4b1-1297-9492fa033373.png)



Webhooksの設定の中にpageのsubscribe設定が出来るようになるので、ページを選択して「フォロー」ボタンをおします。
![F9.PNG](https://qiita-image-store.s3.amazonaws.com/0/103795/60cf2ce3-bef9-6a0a-b68a-64204c7b359b.png)


作成したFacebookページを探して、メッセージを送信してみてください。
以下のような会話ができます。
![Screenshot_20161102-014458.png](https://qiita-image-store.s3.amazonaws.com/0/103795/c2b5df36-36fc-5ca6-8c08-736c11b28932.png)

これで、会話エンジンにWatson Conversationを使ったFacebook Messenger botが完成しました。