Bot Framework Composer v2.0のチュートリアルをやってみた

# はじめに
これまで何度かAzure Bot Serviceを使用したのですが、いちようプログラマーなのでコードを使用してボットを作成していました。
ですが、どうせならコードかかないで作ってみたいなと思い、今更ながらBot Framework Composerのチュートリアルをやってみました。
ちなみに、このBot Framework Componser、つい1週間ほど前にv2.0がリリースされたようなので、今回は[Bot Framework Componser v2.0](https://docs.microsoft.com/en-us/composer/what-is-new)を使用しています。

# 環境
- windows10
- .NET Core SDK3.1
- ボットフレームワークエミュレータ
- Azureのサブスクリプション

# Bot Framework Componser v2.0の新機能・改善点
そもそも1.0を使ったことがないので、あまり比較できないのですが、個人的に気になった部分です。

- テンプレート

V1.0
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/b96c1b5e-babe-599c-a30f-f924d5d1eac9.png)

V2.0
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/ccc88985-b2f4-5c6e-591f-543e0427204a.png)

v1.0にもTemplateなるものはあるようですが、2.0と比較するとだいぶ変わっている印象。
そして、Previewですが、Nodeも選べるようですね！
ちなみに、それぞれのテンプレート内容は以下の通りの様です。Empty Botはこの後使うので後ほど説明を載せています。

|  テンプレート名  |  内容  |
| ---- | ---- |
|  Core Bot with Language  |  Azure言語理解（LUIS）と、会話フローを指示するために使用される一般的なトリガーフレーズを備えたシンプルなボット|
|  Core Bot with QnA Maker  |  Azure QnAMakerを使用した簡単な質疑応答ボット  |
|  Core Assistant Bot  |  Azure言語理解（LUIS）と、会話フローを指示し、顧客が基本的なタスクを実行するのを支援するために使用される一般的なトリガーフレーズを備えたボット  |
|  Enterprise Assistant Bot  |  Azure言語理解（LUIS）、カレンダースキル、Peopele Skeill、および会話フローを指示して顧客が一般的なビジネスタスクを実行できるようにするために使用される一般的なトリガーフレーズを備えたボット※補足画像を下に表示  |
|  Enterprise Calendar Bot  |  MicrosoftGraphを使用してM365カレンダーと対話する機能を備えたボット。カレンダー イベントを表示、作成、および修正することで、ユーザーのスケジュールを管理するのに役立つ。  |
|  Enterprise People Bot  |  MicrosoftGraphを使用してAzureActiveDirectory内のユーザーを検索する機能を備えたボット  |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/913b4d57-2ad8-b4f7-a0a1-b501f9d979bd.png)


- CI/CDパイプライン対応
プレビューのようですが、あるとかなり便利ではないかと思ったので。
[ボットを公開するためのCI / CDパイプラインを作成します（プレビュー）](https://docs.microsoft.com/en-us/composer/how-to-cicd)

- QnA多言語をサポート
 [githubの変更履歴](https://github.com/microsoft/BotFramework-Composer/releases/tag/v2.0.0)に記載されていたものなのですが、仕事でも多言語対応のもの 
 があったりと、需要はかなり高いと思うので嬉しいですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/596eef22-8ca2-855b-d2b6-9596a9c2b72b.png)
 調べたところ、QnAMaker Managedで多言語対応できるのですね。
 - [#QnAMaker マネージドがパブリックプレビューになりました](https://yseosoft.wordpress.com/2020/11/28/qnamaker_managed_features/)
 - [#QnAMaker マネージドの多言語対応](https://yseosoft.wordpress.com/2020/12/12/qnamaker-managed-multilang/)


# チュートリアル通りに作成してみる

## 最初にちょっと謝罪…
アプリは日本語対応はしてないのかなと思って、英語で進めてしまいましたが、日本語ありました。。。
以降のスクショがすべて英語になってしまっていて申し訳ないです。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/cf888d8d-9ed6-7f38-455f-d0ef6398d57c.png)


## ボットを作成
とりあえず、[Bot FrameworkComposer](https://docs.microsoft.com/ja-jp/composer/install-composer)をインストールする必要があるようなので、インストール。
デスクトップアプリケーションとしてインストールしました。

インストールが終わったらBot FrameworkComposerを起動し、テンプレートからプロジェクトを作成します。

こんな画面が立ちあがり、+Create newをクリックすると作成できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/34d81c91-b930-909c-5e51-15f926c8e3f9.png)

今回はチュートリアル通りにEmpty Botを選択。
Empty Botでは、あいさつと、不明な意図に関して何言ってるかわかりません的なアクションをしてくれるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/8b71c64c-162a-6ddc-0de4-3a53d23f670e.png)

次にBotの名前、保存場所、ランタイムタイプを選べます。
ランタイムタイプはWeb AppとFunctionsから選べました。
今回はWeb Appで。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/25ad7519-e936-1756-77e1-00d4f8ffdcf6.png)


Createを押してしばらくすると、下の画面になりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/a40865e1-81a0-ec40-1434-40b8cd577481.png)

Greeting(案内)を押すと、フローのような感じの図が登場。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/26e5a950-b358-a280-ab70-0d1e06445061.png)

「Send a response」とかかれているトリガーを選択すると、右にBot Response(ボット応答)というのが表示され、そこからTextを編集できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/1e2c1666-47eb-342a-ba18-e1c44dbf8686.png)

この状態で一旦テストしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/017be15c-9d8a-daac-e105-54bc465591df.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/936b48cd-4d86-0964-aea1-52e1bac3d090.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/397934ce-df84-6221-f944-72e613ad9ef1.png)

コードを書かずに一瞬でできました。
(Bot Framework SDKの方もぜんぜんコードかかないでできるけど…)

## ダイアログを追加する

Add a dialogを選択して、ダイアログを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/424b9251-95ea-b911-2ac4-456e2b23838a.png)

BeginDialogに移動して+をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/f9e6d5c2-c38c-7e43-c1f2-ed0a4722b367.png)

いっぱい選べるのですが、「Send a response(応答の送信)」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/72a01aa2-ba84-73a4-fd8e-1b221c9be4f8.png)

先ほどと同じような感じで応答内容を編集できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/5a413429-b488-fdc2-3767-674517c24738.png)

## ダイアログとダイアログを接続する
今作成したgetWeatherDialogと最初のメインダイアログを接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/3019f637-a768-3fca-46b6-77a7666380c5.png)

メインの方の「Recognizer Type(認識エンジンの種類)」を「Regular expression recognizer(正規表現認識エンジン)」に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/2a864d90-2a27-7db5-81aa-ced0e45d4c61.png)

add new trigerを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/c01bc47d-9768-f9f8-b3d2-508b1cbd00e3.png)

Please input regEx pattern(正規表現パターンを入力してください)に入力した言葉をチャットで入力するとボットが応答してくれるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/c33f4f1a-faef-bcf1-8455-c4d1d96e59e9.png)

Being a new dialog(ダイアログの管理→新しいダイアログの開始)を選択すると、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/b19c0231-6e69-9d5b-d82e-3dccbb1c9fe4.png)

このようにダイアログが作成されます。
Dialog nameで先ほど作成したダイアログを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/e990399d-2cc6-665e-9e14-5f921a5f9514.png)

テストしてみるとこのような感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/dde8feff-c035-0a6f-2ae4-18b23660e1d4.png)


# BotのAzureへの発行

## プロファイルの作成
Publishing profileからAdd newを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/3c39bf00-707a-59ee-8dee-203e7f1ea50f.png)

Botの名前と発行するtargetを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/d3756a6a-91bf-f924-dbda-42dc472e2485.png)

今回はCreate new resourcesを選択します。
ちなみに、それぞれの意味は次の通り。

|    |  内容  |
| ---- | ---- |
|  Create new resources  |  新しいAzureリソースを作成|
|  Import existing resources  |  既存のAzureリソースのインポート  |
|  Hand off to admin  |  Azureを使用するための適切なアクセス許可がない場合、または他のクラウドサービスからリソースを生成する場合に、管理者に必要なリソースを作成するように依頼できる  |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/7b3f43d5-ff4e-d285-dd90-dbcef59e4211.png)

Microsoftのサインインを求められるので、サインインをすると、AzureDirectoryやSubscriptionが選べるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/803b8441-bb9d-a64c-90b6-442840b34989.png)

追加するリソースを選択します。
Optionで必要なものを選べます。今回は必須のみだけ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/f3112045-9030-ebf1-775f-dbe40720e014.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/d8e487dd-ae05-8162-e423-98ad7276e64a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/a186da24-90bb-4398-22e6-e513f1e9c10d.png)


発行するリソースが確認できたらCreateをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/b2822616-829b-9f14-ac71-2000989110d5.png)

Azureのリソースグループを確認したところ、先ほど発行したリソースがきちんとアップされていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/d5700ba0-3b51-ba59-3fcf-525c907df8df.png)

## 発行

発行したいBotを選択して、Publish selected botsを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/18c00c62-7285-e8d3-b291-b859c82c5cfd.png)

最初、なぜか失敗したのですが、もう一度発行しなおしたところ成功。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/22b1f3f6-3039-d38e-cdeb-25d0baffdf15.png)

Azure側でのテストもできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/14581e88-e598-3117-9cbc-08715c16a034.png)


# さいごに
ほんの1時間ほど試してみただけですが、GUIなので感覚的に作成することができました。
これだったら開発課などでない事務の方とかでも作成できるのではないかなという所感です。
発行もデスクトップアプリケーションで完結できてしまうのもいい感じです。

# 参考
- [MS公式チュートリアル](https://docs.microsoft.com/ja-jp/composer/tutorial/tutorial-introduction)
- [エンタープライズ アシスタント ボット テンプレート](https://docs.microsoft.com/en-us/composer/templates/enterprise-assistant-overview)