Watson Assistant の ユーザー・インターフェースに Facebook Messenger を使用する

(2018/6/19 Conversation -> Assistant の変更他、最新の情報にUpdate)

#はじめに
[こちら](https://qiita.com/schiyoda/items/f1dc9766614c28768b15)の記事で、Watson Assistant（以降Assistant）のユーザー・インターフェース（UI）としてSlackを使用する方法を紹介しましたが、今回は Facebook Messenger を使う方法を紹介します。

#準備
###Facebook
Facebookのアカウントが必要になりますので、持っていない場合は作成します。

###Assistant
今回も[こちら](https://qiita.com/schiyoda/items/a50ea70232382bdcf766)のレンタカー予約のワークスペースを使用しますが、最低限のDialogフローが動けば何でもよいです。

###Github
[GitHub](https://github.com/)のアカウントが必要なので作成しておきます。

#設定方法
基本的には[こちら](https://github.com/watson-developer-cloud/conversation-connector/blob/master/channels/facebook/README.md)に記載の手順に従って設定していきます。

[リンク先](https://github.com/watson-developer-cloud/conversation-connector/blob/master/channels/facebook/README.md)の「Deploy to IBM Cloud」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/26b6eb8e-822a-2989-fd34-aceb921b61b8.png)

「Tool Integration」の「GitHub」タイルを選択し、IBM Cloud から GitHub へのアクセスできるようにするために「認証」ボタンをクリックし、表示される画面で「Authorize IBM-Cloud」をクリックします。
>既に権限付与されている場合は「認証」ボタンは表示されません。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/5b04a289-4c1d-426a-1df3-4e5489fbd2a0.png)


「Tool Integration」の「Delivery Pipeline」タイルを選択し、地域が「米国南部」であることを確認します。また、適当な「Deployment Name」を指定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/da177079-a2e6-30a6-a7ab-8c9326f50a53.png)


[https://developers.facebook.com/apps/](https://developers.facebook.com/apps/) を開いてログインします。「新しいアプリを作成」をクリックし、「表示名」「メールアドレス」を指定して「アプリIDを作成してください」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/5ddbfde0-067c-5db8-1b8c-dd7a10519798.png)

「設定」->「ベーシック」で「app secret」の「表示」ボタンをクリックし、表示される「app secret」を「Delivery Pipeline」の「Facebook App Secret」にコピペします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/ad3a261e-c5a7-1305-d19e-22f707fd1d75.png)


FacebookのダッシュボードからMessengerの「設定」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/3d284521-53bc-1e99-83b1-1e1e9d8f313e.png)

「トークン生成」セクションで「新しいページを作成」をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/9eea944f-d780-bd59-df0f-987faf65d885.png)

適当なFacebookページを作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/042d2700-db88-2eb4-23e8-cdbebad56ccb.png)

Messengerの設定画面の「トークン生成」セクションに戻り、作成したページを選択します。「Facebookでログイン」画面が別ウィンドウで表示されたら「OK」を選択します。

ページアクセストークンが生成されるので、「Delivery Pipeline」の「Facebook Page Access Token」にコピペします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/23b79b2a-1215-a864-de16-c21ae696dd60.png)

「Facebook Verification Token」には任意の文字列を指定し、Assistantのユーザー名、パスワード、ワークスペースIDを各々指定して、「作成」ボタンをクリックし、デプロイを開始します。
>「Facebook Verification Token」は後ほどWebhooksの設定で使用します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/1a80b117-2b1b-5df3-5c92-e73baccc7379.png)

「Delivery Pipeline」タイルをクリックすると、デプロイの状況を参照することができます。デプロイが完了したら「Delivery Stage」の「ログおよび履歴の表示」をクリックし、下の方の「Your Request URL is:」で始まるURLをコピーします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/6f727cb4-03d8-ca9c-1b97-8b3cf951ddff.png)


Facebookアプリの設定の「Webhooks」セクションで「Webhooksの設定」ボタンをクリックします。「コールバックURL」にはコピーしたURL、「トークンを確認」には先の手順で設定した「Facebook Verification Token」を設定し、「サブスクリプションフィールド」は「messages」「messaging_postbacks」をチェックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/aa69da99-f10c-d839-ea76-4bcb59ae1cc1.png)

「Webhooks」セクションでページを選択し、「フォローする」を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/c8cb749a-58fc-c8b9-256f-c78e04429daa.png)

以上で設定完了なのでテストしてみます。Messenger でページを検索して、メッセージを送ってみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/3ec3093f-45d6-bcd6-47ef-6000fcf23242.png)

うまく会話できるようになりました。