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

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

#はじめに
Watson Assistant(以降Assistant)はチャットボットのAPIを提供するサービスなので、ユーザー・インターフェース(UI)は別途作成するか、あるいは既存のツールと組み合わせて使用することになります。Assistantは製品としてSlackをUIにするための機能を持っていいるので、その設定方法を紹介します。

#準備
###Slack
管理権限のあるSlackのワークスペースが必要になるので、無い場合は [slack.com/create](https://slack.com/create) から作成しましょう。メールアドレスがあれば簡単に作成することができます。

###Assistant
SlackとつなぐAssistantのワークスペースも準備します。私は[別記事](https://qiita.com/schiyoda/items/a50ea70232382bdcf766)で作成したレンタカー予約のワークスペースを使用しますが、最低限のDialogフローが動けば何でもよいです。

#Slackとつなぐ
AssistantワークスペースのDeployタブを開き、Slackの「Deploy」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/394c9a87-e739-9341-b322-d7c94066c54a.png)

「Deploy to Slack app」「Test in Slack」のどちらかが選択できますが、まずは簡単な「Test in Slack」の方からやってみます。

##簡単編
<font color="Red">2018/6/19追記 2018年5月のリリースで「Test in Slack」機能は削除されました</font>
「Test in Slack」の場合ボットの名前が「@ibmwatson_test」で固定等、細かいカスタマイズはできませんが、とりあえず使ってみたいという場合にお勧めです。「Test in Slack」ボタンをクリックし、表示される画面で「Authorize Slack」をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/ad393f49-3d42-dec8-5150-c13654929b26.png)

SlackワークスペースのURLを入力し、「Continue」をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/a5f5e5d1-df0e-95ba-12d1-ed1851dcac54.png)

メールアドレス、パスワードを入力し、「Sign in」をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/9d2e8786-cb71-fd93-7fa0-dd46599cebf2.png)

承認画面が表示されるので、「許可する」をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/7d0460a3-3dd0-39f1-c1cc-952d94c00296.png)

Slackの適当なチャンネルに「@ibmwatson_bot」を招待します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/59f228f9-5c6b-a89d-7e34-ab8525a0c2c1.png)

これで会話の準備ができたのでやってみます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/77deeb48-2445-6b7c-c88e-626fbd4a92f2.png)

うまく会話できているようです。

##応用編
「Deploy to Slack app」の方もやってみます。「Deploy to Slack app」ボタンをクリックすると作業のステップが表示されます。まず [Create a Slack app](https://api.slack.com/slack-apps) をクリックし、表示される画面で「Create a Slack app」をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/c7a72087-74b3-b0c5-3a43-94a4b29aad4d.png)

「App Name」「Deployment Slack Workspace」を指定し、Slackアプリを作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/64691b1a-9149-7b87-ba37-37153403caef.png)

AssistantのDeploymentの名前を指定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/0e2d4166-7747-f61b-3e3f-a1854d2a1e67.png)

SlackアプリのBotユーザーを作成します。「Always Show My Bot as Online」は「On」にします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/847a6b53-b4d0-39ce-dc26-1cb6067fcd22.png)


Slackアプリの設定画面で確認できるCredentialを、Assistantの設定画面にコピペして、「Generat」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/c2e011fb-2bf2-6c8e-b9d7-c03c2ac5adda.png)

Redirect URL が生成されるので、Slackアプリの「OAuth & Permissions」の「Redirect URLs」にコピペして「Save URL」します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/00b5b54a-17bb-665a-550d-1f94f06e7590.png)

「Event Subscriptions」で「Enable Events」を「On」にして、Assistantの設定画面からRequest URLをコピペします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/6a42127e-f77d-0c97-9a13-882cb27dd92e.png)

「Subscribe to Bot Events」セクションんで「Add Bot User Event」をクリックし、「message.channels」を追加します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/3352899a-bd6f-46d2-894f-2b567635a0e9.png)

「Save Changes」をクリックして設定を保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/824f962f-ebbb-905d-92b6-e4c1f7f15013.png)

Assistant設定画面で「Authorize Slack」ボタンをクリックし、表示される画面でSlackワークスペースを指定いします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/23d30213-fb40-3022-cf91-3c7b16a20c14.png)

承認画面が表示されるので、「許可する」をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/a0a73101-5e21-e5d8-9bbf-0ce2b4364439.png)


Slackの適当なチャンネルにBotユーザーを招待します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/a2c48eb6-05a7-15f8-48da-def053fcc485.png)

会話の準備ができたのでやってみます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/f7f8ce0e-411f-174e-895c-c646c25361c0.png)