直感的に操作できる Actions で対話フローを作成してみる 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/05e2dbd6-22fd-109d-c01e-bb70714b5acd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/43bcec6d-cb49-d9f5-7b86-9f226236cec3.png)


# New Watson Assistant を使ってバーチャル・エージェントを開発してみましょう！
今回の記事から、New Watson Assistant を使って、バーチャル・アシスタントを開発する手順を具体的に解説していきます。
New Watson Assistant について初めてという方は、第一回目と第二回目の記事を参照されることを推奨いたします。
この記事を参照しながら、実際に手を動かして自身の環境でバーチャル・アシスタントを開発したい方は、特に第二回目の記事を参照して、New Watson Assistant インスタンスの作成を実施してください。
それでは早速始めます。

第一回目 [New Watson Assistantがやってきた！](https://qiita.com/yanagih/items/4bd8add06d1e0695b314)
第二回目 [Watson Assistantのインスタンスを立てる](https://qiita.com/yanagih/items/b02db00d06de397bec64)

# アーキテクチャー
オンライン・マニュアルに [New Watson Assistant のアーキテクチャー](https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-plan-assistant)が掲載されています。
概念的に 3 つの層で構成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/32797e0c-9cf1-740d-1638-d4e1839447c0.png)
\(補足\)
| 層 | 機能 | 構成要素 |
|:----------|:-----------|:------------|
| Channel<br>(チャネル)| ユーザーが利用するインターフェースとの接続| Web Chat<br>Slack<br>Facebook Messenger<br>電話、等|
| Routing<br>(ルーティング)| チャネル層とレゾリューション層のルーティング| ルーティング・エンジン<br>機能拡張インターフェース<br>ログ出力インターフェース|
| Resolution<br>(レゾリューション)| ユーザーからの発話を自然言語処理, 転送| Actions / Dialog<br>Search<br>Hand Off|

2016年7月11日に正式リリースされた 旧 Watson Conversation (現 Watson Assistant) では、Resolution層のTask Completion に位置付けられるワークスペースのみの提供だったことを思うと隔世の感があります。
当時は、チャットボットを構築するアプリケーション・アーキテクトがワークスペースを 1 つのコンポーネントとしアーキテクチャーを開発する必要がありましたが、現在では、New Watson Assistant のアーキテクチャーをベースに要件に応じたカスタマイズを加えることでチャットボットやバーチャル・アシスタントを構築することが可能です。

# 早速起動してみましょう

ダッシュボードから、「WatsonAssistant-lite」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/d575c60d-2e27-4140-5986-e68ef432f82f.png)

[Watson Assistant の起動] をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/c9ddd401-38ae-266d-273e-302d6eeb5cee.png)

日本語が選択されていることを確認して、[Next] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/15d06fdf-2013-d2cc-3ee6-e504df922ee9.png)

赤枠は任意です。選択したら、[Next] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/649a8cb5-d730-f849-123d-2afed9b4802a.png)

この段階では、特に変更せず、[Next] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/687d5f3c-5c64-5e33-8bcb-59229641cecd.png)

この段階では、特に変更せず、[Create] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/06147338-dd4a-3634-9e6c-ae18af03031f.png)

New Watson Assistant でバーチャル・アシスタントを開発する **HOME 画面**が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/fb9ebaa7-2aad-cd66-9d55-88943160006e.png)

# 対話フローの作成

チャットボットの基本中の基本である対話フローを作成してみましょう。
ユーザーとの対話内容を対話フローとして定義することで、ユーザーとの対話を自動化するチャットボットを構成することが可能です。

New Watson Assistant では、この対話フローを作成するためのツールとして Actions が提供されています。

#### Actions を使用した対話フロー作成のイメージ

ユーザーの発話内容に応じてアクションがトリガーされ、そのアクションに定義されているステップに従って、ユーザーとの対話が行われます
\(**アクション**は、「**話題**」もしくは「**トピック**」と呼ばれる場合があります\)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/fac9f24c-373a-df61-4a0c-63fbe0d27090.png)

#### アクションとステップ
* アクション
    * 対話シナリオで扱う**話題**(**トピック**)を**アクション**という単位で定義します
    * アクションをトリガーするユーザの発話例を複数登録します
    * 最初の発話例がアクション名として自動的にセットされます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/732d829d-787e-2135-84a4-32e4067c93c3.png)
* ステップ
    * ユーザーとの対話内容を定義します
    * １ つのアクションに対して、複数のステップを定義できます
    * ステップが複数ある場合は上から下へ順番に実行されます
    * ステップは以下の 5 つで構成されています
        * ステップを実行するための条件
        * 変数 (セッション変数、インテグレーション変数)に値をセット
        * ユーザーの発話に対する返信メッセージ
        * ユーザーからの応答を受け取る方法
        * このステップの次の処理
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/a99b14a0-fe5e-bc12-899b-49b55f6a7954.png)


#### ピザの注文に関する対話シナリオ
アクションとステップを使った対話の具体的なイメージを理解するために、対話シナリオを作成してみます。
対話シナリオとして、「ピザの注文」を取り上げてみます。
「ピザの注文」シナリオを考えた場合、対話の中でやり取りされる**話題**がいくつか思いつくと思いますが、今回は、
* ピザの注文
* 割引条件
* 注文のキャンセル

の 3 つの**話題**を取り上げます。

アクションの説明のところで、『対話シナリオで扱う**話題**を**アクション**という単位で定義します』とお話ししました。
そうです、まさにこの **3 つの話題**を**アクション**として定義することになります。

#### 各アクションとその処理内容
作成するアクションとその処理内容のイメージ図です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/91c23baf-194b-764e-bc57-346cc82ea7c9.png)

今回は、**ピザの注文アクション**に関する対話フローを作成してみます。

#### 対話フローの作成
**HOME 画面**に戻り、**Actions** をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/62442e86-64c1-591a-d745-ec47cda40b5d.png)

###### アクション: ピザの注文
**ピザの注文・アクション**を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/238eef2f-136c-39ac-77ea-a0163262d1b7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/06edcd25-a00a-ca9a-f39b-c7ab87d20174.png)

**ピザの注文・アクション**が作成されたので、**ステップ**を追加して対話フローを構成していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/600f2805-f031-a38d-21c0-5968f0c47115.png)

###### ステップ 1: ピザの種類
ピザの種類を聞き返し、ピザの種類を選択肢として提示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/e3c1b0a3-c0c1-db84-0539-67648b5210fd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/f96f81d5-fa24-e73b-0ba1-6831c9f2f183.png)

選択肢の候補を入力します。ステップ作成の練習なので、選択肢は 3 つに留めました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/fd710e91-dbe5-5ea0-fb64-bf0050325d17.png)

###### ステップ 2: サイズ
ピザのサイズを聞き返します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/2b075b52-cb3b-fbbc-9c56-5a74fa990db1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/b9ddddfa-3bf4-ab0f-9ab4-faaebcd59829.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/8a2b7928-c626-bc39-9e93-3520c4574b03.png)
選択肢の候補を入力します。ステップ作成の練習なので、選択肢は 3 つに留めました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/00dcfb9e-d52b-d93e-fea9-62531e20d854.png)

###### ステップ 3: 配達時間
配達時刻を聞き返します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/46b74749-9268-77f2-1e3a-fa572265006e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/cf431600-ffd6-ca1b-62a6-a75a08985974.png)
選択肢を候補と提示するのではなく、ユーザーに直接入力してもらいたい場合は、このように設定します。(この例は時刻を入力する例となっています)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/a3b0fa83-1d7d-d05b-c0a1-f2159b499b56.png)
時刻の入力が期待されている旨が表示されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/63bf0532-b822-9a7e-f5f7-0566893c0732.png)

###### ステップ 4: 注文内容の確認
注文内容を確認し、注文するか、修正するか、を聞き返します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/ca5e6fdb-7b32-7726-8734-716fe5d0204f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/b56b6d7c-9987-3a36-13ce-eae695e7c430.png)
選択したピザの種類を挿入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/0115636c-ca50-8b8b-8518-f5b98aa88f9f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/9cf8c349-d87c-2384-39b5-d80149795b59.png)
このように表示されていれば OK です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/e306c91b-b8bb-789a-e4b2-3970d884226e.png)

選択したピザのサイズを挿入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/70dd10c5-f342-9437-e0a8-301b78b86c6f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/e888b65e-ba38-4273-9632-94647d9efdc5.png)
このように表示されていれば OK です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/a900071f-39eb-2f4f-eeaf-d0b8486c3b8e.png)

入力した配達時刻を挿入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/0c4013c1-4ba3-5351-ffd7-7ab63a0fdf08.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/1615b1e1-2a6a-84ab-0c9c-8890c7e4112e.png)
このように表示されていれば OK です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/a9d3e838-3df0-c8b2-0943-bb908746c58c.png)
注文内容が正しい (OK) か、修正する、かの選択肢を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/6d8efbc1-7e7b-740f-cd1e-3ca31c536f2f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/17b363e1-2106-a25a-47ad-3abbaa031a61.png)
このように表示されれば OK です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/2d4390f1-281e-21b3-55aa-60b70f8070f2.png)

###### ステップ 5: 注文の完了

注文内容が正しい (OK) 場合の処理を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/9625010b-89f8-5fa5-0a29-db1729b24da5.png)
ステップの実行条件を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/6a5840c2-87e5-1f07-1458-8e8f62b0295a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/016d1bd3-2275-8faf-907a-39ea3dfdd1e7.png)
正しい (OK) 場合は、このステップで終了なので、**And then** に **End the action** を設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/da87b8cc-6252-76a1-ace9-26db243637b9.png)
このように表示されていれば OK です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/caad5ca1-8754-bc97-a7b0-80a835c42b89.png)

:::note info
Action complete と表示されていることを必ず確認してください。
:::

###### ステップ 6: 注文内容の修正

注文内容を修正したい場合の処理を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/d1ada977-8118-8ea6-008d-b15aa92cd4b8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/30707ab2-0caa-1a41-be82-e68f44a8e709.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/60f76efd-8764-5f27-4ca2-929a8ea90243.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/c4046f15-9d3b-a1c8-12b0-627a3b87a70b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/a7042d31-c0dc-b071-76ad-7b5e14bb2a1e.png)
このように表示されていれば OK です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/8f532d77-d020-0d2f-16e9-3384884417c7.png)

**ピザ注文・アクション**は以上となります。

#### 作成した対話フローのテスト

作成したアクションとステップの動作が期待通りに動作するかを確認したい場合は、**Prevew ウィンドウ**を使用します。
チャット風の画面が表示され、発話内容を入力すると、作成した**アクション**と**ステップ**の内容に応じた返信が返ってきます。
対話フローの開発者は、期待した通りの動作であるかを確認することが可能です。

また、この**Prevew ウィンドウ**は、期待した動作となっているかを確認するための**補助機能**を提供します。
3つの補助機能が提供されていて、テストしたい内容により使い分けてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/0d1aadd7-0d24-ff80-0eb1-530707a2ecb5.png)

**補助機能**
* デバッグ・モード
* 変数値確認モード
* エクステンション・インスペクター

詳細な使い方については、2022年12月中旬ごろの記事で紹介します。
待ちきれない方は、オンライン・マニュアルの[Reviewing and debugging your actions](https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-review)をご参照ください。

###### テスト 1: 注文の完了

注文内容が正しい (OK) 場合の動作をテストします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/8891d999-7196-d10b-4788-f9ab362f444f.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/685cd335-5e68-f8e0-3327-b125fa374d24.png)

無事、ピザの注文ができました :relaxed:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/aecf1c71-6d37-e4d8-975e-9a89fa30edd4.png)



###### テスト 2: 注文内容の修正

注文内容を修正したい場合の動作をテストします。
途中までは、テスト 1 と同じですが、**ステップ 4: 注文内容の確認**で、「OK」ではなく、「修正」を選択してみます。

少しだけ、補助機能の**変数値確認モード**を使用してみます。
ユーザーが選択した値が変数として保存されていることが確認できます。(左側)
修正を選ぶと、**ステップ 6** で設定した通りに、**ステップ 1** に戻りますが、その際、ユーザーの選択を保持していた変数の内容がクリアされていることに注意してください。(右側)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/014ac7ce-c03f-2c34-e72f-b7ac152329b5.png)
理由は、『Re-ask previous step(s)』の設定で、クリアする変数にチェックを入れているからです。
\(再掲\)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/a7042d31-c0dc-b071-76ad-7b5e14bb2a1e.png)

# いかがでしたでしょうか
アクションを使用しての対話フロー作成はいかがでしたでしょうか？
「意外と簡単に作れるね！」、「痒いところにも手が届いているね」等の感想を持っていただけたら幸いです。

:::note info
「割引条件アクション」と「注文のキャンセル・アクション」は次の[『注文のキャンセル処理を追加する 〜セッション変数の使い方〜』](https://qiita.com/yanagih/items/ea38bc109527a5127dc0)で解説しております。
:::


# 参考情報

##### 公式オンラインマニュアル: Overview: Editing actions
https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-build-actions-overview

##### 公式オンラインマニュアル: Reviewing and debugging your actions
https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-review

##### IBM Developer チュートリアル: Get started with Watson Assistant
https://developer.ibm.com/learningpaths/get-started-watson-assistant/