Bot Framework Composerで簡単なボットを作ってみた

## ゴール
[Create your first bot with Composer](https://learn.microsoft.com/ja-jp/composer/quickstart-create-bot#add-bot-functionality)で説明されているチャットボットが完成します。日本語化とシンプル化を意識して書きました。

## スタートライン
- node.jsがインストールされていること

## 環境
- Node.js
- .NET Core SDK
- Bot Framework Composer

## 実行
### .NET Core SDKのインストール
以下の記事を参考に、.NET Core SDKをインストールしてください。

https://dotnet.microsoft.com/en-us/download/dotnet/3.1

### Bot Framework Composerのインストール
以下の記事を参考に、Bot Framework Composerをインストールしてください。

https://learn.microsoft.com/ja-jp/composer/install-composer?tabs=windows

### チャットボットの実装
Bot Framework Composerを開き、「+ Create new」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/f43a978a-5468-4f5a-36e5-ae5d21203993.png)
　　
テンプレートは「Empty Bot」を選択し、「Next」で次の画面に進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/88fce2e8-31e8-072e-2659-c69e68a9f8ff.png)
　　　
Nameは「Menu_bot」、Runtime typeは「Azure Web App」、
Locationはご自身の環境に合わせてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/40bb6a4e-dcf1-04f0-5c87-dd45efeff0f0.png)
　　
左側に箱のマークがあるMenu_botの3点リーダーから、「Add a dialog」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/de3e2cea-bce2-34a1-770b-072d44cffa15.png)
　　
Nameは「Menu」、Descriptionは「A dialog that shows the menu.」と入力し、「OK」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/aa451988-b853-9a0d-1b8d-ede66ecd833c.png)
　　
「BeginDialog」の下の「＋」ボタンから、「Send a response」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/66a2de99-1a23-cd74-3600-ed0a335a1b52.png)
　　
「Bot responses」に以下のテキストを入力します。
```
Today's menu
 - Pizza
 - Burger and fries
 - Chicken sandwich
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/8dab0639-19ab-5bbb-cb21-38071b9a6bb4.png)
　　
Recognizer/Dispatch typeから「Change」を選択します。

![記事投稿用 (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/33f7ffcc-6766-e495-8516-79a707fae84b.png)


　　
「Regular expression」を選択し、「Done」します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/137d0d3e-e435-ac9d-84d5-2d49ba96d07b.png)
　　
続いて、上から2番目の「Menu_bot」の三点リーダーから「Add new trigger」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/80c09bc8-dad9-cdf3-660e-c1b28e293f3e.png)

　　
What is the type of this trigger?は「Intent recognized」を選択し、What is the name of this trigger(RegEx)は「Menu」、Please input regEx patternは「menu」と入力し、「Submit」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/a3229915-5a8e-a32b-4f34-32764f46810d.png)

　　
Menuの下の「＋」ボタンから、「Dialog management」の「Begin a new dialog」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/809e725b-3a6a-334e-0805-6abc7cfc0f6d.png)

　　
右側のDialog nameで「Menu」を選択します。

![記事投稿用 (16).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/a040515f-f3eb-27f5-3264-be3f39b1d2a8.png)

　　
以下のように表示されるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/4ddd8fac-6ab5-f149-861a-5118c5393bd2.png)

　　
ここまでできたら、「Start bot」を選択します。

![記事投稿用 (17).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/ab867aeb-b0f2-52b0-7fb0-a8dda0c23220.png)


　　
「Open Web Chat」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/f486d294-d6f9-1b71-85d2-ce9382d2ac14.png)

　　
以下のようにチャット画面が立ち上がります。トリガーとなる「menu」を送信すると、登録した結果が返ってくることが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/b5af68f8-8dd5-1d54-2e77-7fdead0a5533.png)


## おわりに
Bot Framework Composerで簡単なボットを作ってみました。現在は生成AIでボットが作れてしまいますが、生成AIが登場する前のボットの仕組みを理解することも大切だと思います。

最後までお読みいただき、ありがとうございました！ 
以下のXで情報発信してます！

https://twitter.com/t___tatsuki

## 参考文献

https://learn.microsoft.com/ja-jp/composer/quickstart-create-bot#add-bot-functionality