皆さん、こんにちは。戸倉彩です。

今回は、Watson APIを使ったSlack Botアプリの開発する手順をご紹介いたします。コーディングなしで進めることができますので、プログラミングに慣れていない方も触ってみてください。この操作を終えると、SlackにWatsonが連携されたSlack Botと自然な会話の流れでチャットを体験することができます。
※今回は、IBM WatsonとSlackの連携が簡単に行えることを解説するため、英語サンプルを利用していますが、実際はWatson Assistant上でカスタマイズすることで日本語も利用することが可能です。
【Slack bot完成後の例】

[Memo]
こちらの操作は、Firefox および Chrome のWebブラウザで操作を試しました。
万が一、他のブラウザを利用した際に、メニューが正しく表示されない、手順とは挙動が異なるなどの問題が発生した場合には、FirefoxまたはChromeで再度操作を試してみてください。

IBM Waton Assistantについて

Watson Assistantは、チャットボット等、ユーザーとコンピューターが自然言語で対話可能なアプリケーションを簡単に開発するためのAPIサービスです。
詳しくは、Watson Assitantサイトをご覧ください。

用意する環境と操作の流れ

必要なシステム

Webブラウザ上ですべての操作を行うため
* Webブラウザ (私のほうでは Chrome, Firefox 環境で検証しました)
* インターネット接続
をご用意ください。

操作の流れ

今回は次の5つのステップで手順を解説しています。
所用時間目安は30分〜くらいです。Slack bot開発に慣れている方だともう少し早く完成させることが出来ると思います。

1. IBM Cloud アカウント作成

IBM Watson Assistantサービスを利用するためには、IBM Cloudアカウントが必要です。
初めてIBM Cloudを利用される方は、コチラから無料で利用できるライトアカウント登録をしてください。
※メールアドレスのみの登録で始められます。

2. Slack ワークスペースの作成

※すでにご自身でSlackワークスペースをお持ちの場合は、こちらの手順はスキップしてください。
1. Slack ワークスペース新規作成の画面へアクセスする。
2. 自分のメールアドレス を入力して 「次へ」 をクリックする。

3. Slack から届いたメールにある 6 桁の確認コード入力する。

4. 「社名またはチーム名を教えてください。」の下のボックスに任意で名前を入力して、「次へ」をクリックする。(デモサンプルでは「DeveloperAdvocate」と入力しました)

5. 任意の「プロジェクト名」を入力して「次へ」をクリックする。※Slackのチャンネル名に使用できるのは日本語、英数字、スペース、ハイフンのみの21文字以下となっています。※「general」のプロジェウト名を入力すると先に進めないため、別の名前を指定してください。

6. 「後で」をクリックする。

7. Slackワークスペースとチャンネルができました！

3. IBM Watson Assitantの作成

WebブラウザからIBM Cloudダッシュボードへアクセスする。
「カタログ」→「AI」→「Watson Assistant」の順に選択する。
「サービス名」に任意のサービス名を入力し、「作成」ボタンをクリックする。

4. IBM Watson Assitantの設定

ここではすでに用意されている英語の会話モデルを利用した手順を紹介しています。

(もし日本語のスキル(会話モデル)をスクラッチから作成したい場合にはこちらの解説動画(すべて字幕が付いていますので、音声無しでも視聴することができます)を参考に作成してみてください。その場合には、「IBM Watson Assistant」→「Assistants」タブで「Create assitant」ボタンより作成したスキルを「Add dialog skill」ボタンから呼び出し、画面右に表示される「Integrations」→「Add integration」ボタンで「Slack」を指定してください。)

英語のまま進める方は下記の手順を行ってください。

1. 「Watson Assistantの起動」ボタンをクリックする。

2. 「IBM Watson Assistant」画面が表示されたら「Skills」タブをクリックし、「Create new」をクリックする。

3. 「Add Dialog Skill」画面で今回は既存のサンプル(英語)を利用するため、「Use sample skill」タブより、「Customer Care Sample Skill」をクリックする。

4. 「IBM Watson Assistant」をクリックし、「Assitants」タブより「Create new」ボタンをクリックする。

5. 「Name」に任意の名前を入力し、「Enable Preview Link」チェックを外した後、「Create assistant」ボタンで次に進む。(例えば、今回の画面では「Customer Service Assistant」と入力しました。)

6. 作成した名前の画面が表示されたら、「Add Dialog Skill」ボタンをクリックする。

7. 「Add existing skill」タブが表示されている状態になっていることを確認し、ご自身で作成したSkillをクリックする。

8. 「Add Integration」ボタンをクリックする。

9. 「Add Integration」画面で「Slack」を選択する。

10. 「Slack Integration」画面が表示されたら「Name」に任意の名前を入力する。(例えば、今回の画面では「Customer Service Integration」と入力しました。)

5. Slackとの連携を設定する

ここからはSlackサービスとの連携をするための操作になります。

5-1 Slackの設定 (Configuration for Slack)

「Create a Slack app」リンクをクリックする。
「Slack API」画面が表示されたら、画面を下にスクロースして「Create a Slack app」ボタンをクリックする。
「App Name」に任意のアプリ名を入力し、「Development Slack Workspace」でご自身のSlack Workspaceを選択し、「Create App」ボタンで次に進む。 ※ここではSlack Workspaceの作成方法を割愛させていただきます。
「Basic Information」画面が表示されたら、左側のメニューから「Bot Users」をクリックする。
「Bot User」画面で「Add a Bot User」をクリックする。
「Always Show My Bot as Online」を「On」にし、「Add Bot User」をクリックする。

5-2 SlackとWatson Assistantの連携 (Connect Watson Assistant to Slack)

左メニューの「Basic Information」をクリックし、下にスクロールして「App Credentials」セクションに表示されている「Verification Token」をコピーする。
※Credentialの情報は大切に管理してください。
「IBM Watson Assistant」画面に戻り「Configuration for Slack」のStep 2の「Verification toke」に貼り付ける。
「Slack API」サイトに戻り続いて左メニューの「OAuth & Permissions」より「Install App to Workspace」をクリックしてインストールする。
確認画面が表示されたら内容を確認し「許可する」ボタンをクリックする。
生成された「OAuth Access Token」と「Bot User OAuth Access Token」をコピーしながら「IBM Watson Assistant」サイトに戻りStep 2のそれぞれのボックスに入力する。

5-3 Slack bot の設定

「Slack API」サイトに戻り、「Event Subscriptions」の「Enable Event」を「On」にする。
「IBM Watson Assistant」サイトのStep 3の「Configure your Slack bot」で「Generate request URL」をクリックし、生成されたURLをコピーする。
「Slack API」サイトに戻り、先ほどの項目の下 (左メニュー「Event Subscriptions」→「Event Subscriptions」→「Enable Events」) の「Request URL」を入力する。 ※Verifiedと緑のチェックマークが表示されればOKです。

5-4 Assitantへの接続

画面を下のほうへスクロールし、「Subscribe to Bot Events」の「Add Bot User Event」ボタンをクリックする。
ドロップダウンメニューより下記の2つのイベントを選択し、画面右下の「Save Changes」ボタンをクリックする。
message.im
app_mention
「IBM Watsno Assitant」サイトで先ほど5-3の手順で生成した「Generated request URL」をコピーする。
「Slack API」サイトの左側メニューの「Interactive Components」より「Interacitity」を「On」に変更する。
「Interactivity」の「Request URL」を入力し「Save Changes」ボタンをクリックする。