Watson Assistant New ExperienceによるSlack連携

# 概要
2021年10月に登場した「IBM Watson Assistant New Experience(new Watson Assistant)」におけるSlack連携を確認します。Slack連携には、Watson Assistant プラスプランが必要です。IBM Cloudを利用している場合、30日間無料で使える「トライアル」という名称のWatson Assistantのプランがありますので、それを使用します。

## 設定することで出来るもの
Watson Assistant New Experience (new Watson Assistant)のSlack連携を使って、次のようなチャットボットを作成します。
### もとになるWatson Assistantで作成したチャットボット
下図は、Watson AssistantをNew Experienceに切り替え、作成したチャットボットです。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/2a63bb4a-ad1c-1856-3062-992bf4f2c514.png)|
|:--|

### Slack連携後のチャットボット
Slack連携により、Slack上で動くようになったWatson Assistant チャットボット

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/412c39d4-4a8f-1c92-1501-eca51cfa26ed.png)|
|:--|

# 準備しておくもの
Slack連携に取り組むにあたり、次の2つを用意しておきます。
## Watson Assistantの料金プランで、トライアルを選び作成
IBM Cloudで、Watson Assistantを作成します。料金プランは、トライアルを選び、Watson Assistantのインスタンスを作成します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/3d56e535-8d31-13c5-1e29-c2facbafcb1d.png)|
|:--|

## Watson Assistant New Experienceで、チャットボットを作成
こちらについては、以下の資料を参考に作成してください。
[Watson Assistant によるホームページに設置できるチャットボットの作成手順：3. Watson Assistant によるチャットボットの作成](https://private-athlete-4ea.notion.site/Watson-Assistant-7e647f9ceebb4e72abfd3bb0368777e0#42b1ae63d37748f3a1bd0378d5d79c18) << Watson Assistant New Experience におけるチャットボットの作成手順になります。

# Slack連携
New Experience状態のWatson Assistantで、Integrations から、Slackを見つけ、「Add」をクリックします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/55e85435-fee3-89cc-7e55-dd1502dfebb3.png)|
|:--|
 
「confirm」をクリックして、Slack連携のセットアップを行います。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/fe8bd2ba-f79d-5535-7235-e0bc25db7d9a.png)|
|:--|

## Set up to slack : Get Started
作業手順が表示されます。英語が指示が表示されます。画面右上の「Next」をクリックして次へ進みます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/c7b73c2a-6d24-c919-33b9-7f8f57147e5d.png)|
|:--|

## Set up to slack : Step1

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/ab3a15c5-0e29-5b63-1fab-24cad9f4a421.png)|
|:--|

### Slackアプリの作成
画面の英文を読みます。Slackアプリを作るように指示していますので、https://api.slack.com/apps にアクセスして、Slackアプリを作ります。今回は、開発や検証に使用している自分用のSlack環境(例 cogbot-group)を使用し、下図のような名前のSlackアプリを作りました。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/9e1961cb-cb8a-5a61-949f-4a47fdb448fa.png)|
|:--|

### Verification Token の取得
Slackアプリ作成後、Slackアプリの画面で、Basic Information 内のApp Credentialsから、Verification Tokenをコピーします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/e66c27dd-96ff-3322-85d5-5deeb0cdd94b.png)|
|:--|

Watson Assistantの画面に戻り、「Next」をクリックします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/ab3a15c5-0e29-5b63-1fab-24cad9f4a421.png)|
|:--|

## Set up to slack : Step2
取得したSlackアプリの「Verification Token」を入力します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/7de42fb4-332b-d948-e96c-471b55d49d37.png)|
|:--|

画面指示に従い、SlackアプリのOAuth & Permissionsで、Bot Token Scopesに、OAuth Scopeを追加するとともに、Bot OAuth access token をSlackアプリ側で取得し、入力します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/3f71477d-2aa1-f6e2-2972-17c8902c97f9.png)|
|:--|

### Slackアプリ側の操作

Slackアプリで、OAuth & Permissionsで、Bot Token Scopesに指示通りにOAuth Scopeを「Add an OAuth Scope」をクリックして追加します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/bd4e2cb0-d71d-42d6-872c-5da445b327d9.png)|
|:--|

Watson Assistant の指示に従って追加した場合。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/53dff194-eec4-ba84-b6ac-2b967f19f970.png)|
|:--|

OAuth & Permissionsで、「Install to Workspace」をクリックします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/4a63daeb-9b53-e62a-3542-f7898efa454b.png)|
|:--|

アプリの権限リクエスト画面が表示されますので、「許可する」をクリックします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/aca1aaa0-6c96-5a91-b0f2-56f28d6cbb3d.png)|
|:--|

Bot User OAuth Tokenが表示されます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/fd5103e6-0a0c-12f3-39ab-501d20b560da.png)|
|:--|

### 取得したBot User OAuth Tokenを入力
Watson Assistantの画面に戻り、取得したBot User OAuth Tokenを入力します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/343fec18-535f-7004-50f3-ec274565ea73.png)|
|:--|

画面右上の「Next」をクリックします。

## Set up to slack : Step3
Step3 では、生成された「request URL」をSlackアプリ側に設置します。また後々の作業でも「request URL」は使用しますので、どこかに控えておきましょう。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/ce12a88a-575a-6efb-064b-09b7faec9bb3.png)|
|:--|

### Slackアプリの、Event Subscriptionsを設定
Slackアプリで、画面左側の「Event Subscriptions」をクリックします。表示される「Enable Events」のトグルボタンをクリックし、Onの緑色の状態にします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/7c1d18c2-36f4-494e-ee76-94df26d0ca5d.png)|
|:--|

「Request URL」の欄に、Watson Assistant側で生成された「request URL」を配置します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/53f61605-5e95-40ae-208d-918fe4b31db1.png)|
|:--|

次に、「Subscribe to bot events」をクリックします。「Add Bot User Event」をクリックして、「message.im」と「app_mention」を追加します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/d591761f-f310-1288-7368-e8c7bf3c945f.png)|
|:--|

画面右下の「Save changes」をクリックして保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/e3f4d160-97c9-a8b4-9400-9338553fa829.png)

### Watson Assistantの画面に戻り、「Next」をクリック
次の画面へ。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/7f542fa8-4a1d-3377-c919-940ddaeefd3b.png)|
|:--|

## Set up to slack : Step4
Slackアプリ側の設定を行う必要があります。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/f8ea0504-012e-b17d-f3d5-418006b4a48e.png)|
|:--|

### SlackアプリのApp Home 設定
Slackアプリの画面左側で、App Homeをクリックし、表示された「Always Show My Bot as Online」をトグルボタンをクリックして有効にします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/12f28b76-48ad-f100-aa96-6bde895552fc.png)|
|:--|

もし、Slackアプリのアプリ名を変更したい場合は、App Home画面で、「App Display Name」の「Edit」をクリックすることで変更することができます。

### App Home下のShow Tabsの設定
引き続き、App Home 画面で、「Show Tabs」下の「Messages Tab」のトグルボタンをクリックして有効にします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/7c0cd103-8ef2-a46d-f2aa-363eaba9cc98.png)|
|:--|

### Interactivity & Shortcuts 設定
Slackアプリの画面左側で、Interactivity & Shortcutsをクリックし、表示された「Interactivity」のトグルボタンが「On」になっていることを確認します。
次に、「Request URL」に、控えておいた「request URL」をセットします。この「request URL」は、【Set up to slack : Step3】の作業で確認したWatson Assistantで生成された「request URL」のことです。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/6ff99279-6fa8-c094-143b-f0bdeef9772d.png)|
|:--|

画面右下の「Save changes」をクリックして保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/e3f4d160-97c9-a8b4-9400-9338553fa829.png)

### Watson Assistant 画面に戻る
Watson Assistantの画面に戻り、「Finish」をクリックします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/f8ea0504-012e-b17d-f3d5-418006b4a48e.png)|
|:--|

## Watson AssistantのIntegrationsで、Slack連携の有効化確認
New Experience状態となっている Watson Assistant 画面で、画面左側の「Integrations」をクリックし、下図のようにSlack連携が有効になっていることを確認します。
また、最初に設定したSlack連携はDraft環境として扱われ、Live環境(=本番)向けに「Open」をクリックすることで、Live環境向けのSlack連携を設定することができます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/542e94d8-72c1-bc3b-0666-fffc43c04dd7.png)|
|:--|

## 動作確認
Slackにアクセスし、Slackアプリに対して質問をしてみましょう。
Watson Assistant New Experienceで作成したチャットボットが、Slack上で動作することを確認することができます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/412c39d4-4a8f-1c92-1501-eca51cfa26ed.png)|
|:--|

# 所感
Watson Assistant New Experienceは、2021年11月9日現在、Actions Skillがメインで、Dialog Skillを使用することはできませんが、「Draft」と「Live」といった、開発・検証の場合や本番の場合で分けて、Slack連携やWeb Chatの公開ができ、より開発者にフォーカスしている印象を受けます。

# 参考資料

- [Watson Assistant リリースノート](https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-watson-assistant-release-notes)
- [new Watson Assistant](https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-welcome-new-assistant) << Watson Assistant New Experience
- [Watson Assistant によるホームページに設置できるチャットボットの作成手順](https://private-athlete-4ea.notion.site/Watson-Assistant-7e647f9ceebb4e72abfd3bb0368777e0) << Watson Assistant New Experience におけるチャットボットの作成手順