Bot Framework Composer v2.0 を使って秘書Botを30分で作成してみたあれこれ

# はじめに
[前回](https://qiita.com/usomaru/items/a4f89e12100e5b9c1222)Bot Framework Componserのチュートリアルを試してみました。
ので、今回はBot Framework Componserを使って、Microsoft365に登録されている私の予定を教えてくれる＆登録してくれる秘書Botくんを作成しました。
※デフォルトのままなら30分あれば作成できますが、日本語対応などをさせるとなると、もう少し時間がかかると思います。

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

# できたものとさらにやりたかったこと
## できたもの
予定確認＆登録秘書Botくんができました。

予定確認↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/3b03bfc2-7090-1b0f-3243-532eb4bc7464.png)


予定登録↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/35649e67-d175-cca2-9768-be1741be8515.png)

Teamsに追加されている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/94d44eec-2fa6-58ca-458a-e469cb81aa51.png)


## 最終的にやりたかったこと
Alexaに接続して、Alexaから予定確認＆登録すること。。。
AlexaとBotを接続・アカウントリンクさせることは簡単にできました。
ですが、アカウントリンクさせてから、MSGraphの認証に使用するアクセストークンをComposer側でどうすれば簡単に取得できるかわからず、だったらAzure Functions使った方が速くね？となったため、断念しました…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/112f9c79-945e-db5d-1b0d-d9bea7d7c72c.png)

また、今回使用したテンプレートはユーザーにボタンで選択を促すアクションがたくさんあります。そのすべてを口頭ベースに変えていく労力を考えると、このテンプレートはスマートスピーカーに繋げるということはできないですね。。。

アクセストークン取得までできた証↓
(最初はタイムアウトしてます。)
上の図だと、JSON入力がリクエスト、JSON出力がレスポンスに当たります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/296e02ec-e782-0ace-d2cc-483a0d471715.png)

ので、後日Azure Functions(可能であればBot Serviceでガリガリコードをかいて)を使って作ることにしたいと思います。。。

# つくりかた

## Composer側いろいろ設定
今回は[Enterprise Calendar Bot](https://docs.microsoft.com/en-us/composer/templates/enterprise-calendar-overview)テンプレートを使用しました。
このテンプレートは[Microsoft Graph](https://docs.microsoft.com/ja-jp/graph/overview)を使ってOffice365に登録されている自分のスケジュールを見る＆登録する等の機能がすでに備わっています。
ので、このテンプレートに認証の設定をするだけで秘書Botは完成したようなものになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/056e49ab-1308-aa40-00f8-cd4b1e501feb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/73f203c4-a4de-b4fe-340e-83b8e6f71a81.png)

まずはプロビジョニング。
今回プロビジョニングしたリソースは以下の通りです。

- Microsoft Application Registration(必須)
- Azure Hosting(必須)
- Microsoft Bot Channels Registration(必須)
- Microsoft Language Understanding Authoring Account
- Microsoft Language Understanding Prediction Account
- Microsoft QnAMaker

プロビジョニングが終了したら、LUIS、QnAMaker、アプリIDをComposerで設定していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/20de5d45-9738-ec4a-341d-921829ded3ce.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/202a484e-0461-6e57-3240-a3351407a63f.png)

赤枠で囲ったボタンを押すと自動的にキーを取得してくれます。

次に[MSのチュートリアル](https://docs.microsoft.com/en-us/composer/templates/enterprise-calendar-tutorial)に従って認証の設定。

## 認証設定

まず、プロビジョニングしたBotリソースをAzureポータルから開きます。
そして、OAuth認証設定の追加を選択して、以下の値を設定していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/fb020e96-b7e1-31e4-b89c-8706312e9804.png)

- 名前：好きなOAuth認証の名前(後ほど設定で使用するのでコピーしておく)
- サービスプロバイダー：Azure Active Directory v2
- Client id：Composerで設定したMicrosoft App IDのMicrosoftアプリID
- Cliend secret：Composerで設定したMicrosoft App IDのMicrosoftアプリのパスワード
- スコープ：Calendars.ReadWrite Contacts.Read People.Read User.ReadBasic.All User.Read

入力したら、保存。

続いて、Microsoft App ID の横にある管理というリンクをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/4339ab64-2e89-c590-5f70-fab625a652cd.png)

APIのアクセス許可を選び、アクセス許可の追加で以下5つの許可を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/a2b0bd4e-e3ab-50ac-21e1-347ffe59dd23.png)
(この画像にはoffline_accessが追加されていますが、以下5つで大丈夫です。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/b70f6ee1-7592-a41a-1ff2-0355a0fd5c33.png)

- Calendars.ReadWrite
- Contacts.Read
- People.Read
- User.ReadBasic.All
- User.Read

続いて、認証からプラットフォームを追加をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/4c90a5ee-0e09-7cde-93f3-85cbaa908d49.png)

Webを選択し、リダイレクトURIは以下を入力。
```https://token.botframework.com/.auth/web/redirect```

最後に、Composerの方に戻り、設定から詳細設定ビューを表示して、
以下個所を変更します。

```
{
  "oauthConnectionName": "Azureポータルで設定したOAuth認証の名前",
}
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/9319a825-e472-0c2f-0e57-b2942a4c2f9b.png)


## 英語の個所を一部日本語に

英語でテンプレートは作成されてしまうため、このままだと基本全部英語です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/750d9087-bafd-172c-1de0-9c2b5a042a75.png)

そのため、ボット応答の一部などを私は日本語に編集しなおしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/6a0a4f7b-0717-bb44-8d31-3e5379c84d87.png)

ちなみに、設定画面に多言語対応できるものがあるのですが、こちらを試してみたところ、一度エラーが大量に発生してどうにもならなくなってしまったため、一旦直接編集という形をとりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/7ac660dc-c669-5b33-a9b5-991fe5228a74.png)

V2.0ではありませんが、日本語対応させている方の記事はこちら
[Bot Framework Composer v1.1.1 で日本語ロケール (ja-jp) を選択できるようになりました #BotFramework](https://yseosoft.wordpress.com/2020/10/03/bfcomp_v111/)


## まずエミュレータで動かしてみる
エミュレータでテストをするには、エミュレーターで ```ngrok ```を構成する必要があります。

ので、[ngrok](https://ngrok.com/)をインストール。

エミュレーターの設定でngrokのパスを設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/70f4bc08-0b65-73a4-4d65-087787afd71f.png)

試してみる！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/3b03bfc2-7090-1b0f-3243-532eb4bc7464.png)

## 発行してテスト
発行して、Webチャットでテストもしてみました。問題なし！　
(たまにTimeoutすることがありましたが、フリープランを使用しているということもあり、最初の接続には時間がかかる模様でした。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/d5b7b2af-f54c-c7bf-acc3-cf2609144864.png)

ちなみにサインインダイアログがないのは、一度Webチャットテストでサインイン処理をしているため、トークンが残っているためか聞かれませんでした。

# さいごに
コードを一切かかずに認証の設定だけすれば、スケジュール調整Botが作れてしまいました。
ただ、日本語に対応していなかったり、カスタマイズがしにくかったりとやっぱコードの方がいいなと思うことが少し発生しました。。。
GUIでガリガリ作成するので、もう少し資料があると嬉しいですね…
ボットの最初のとっかかりとしてはとても良いなと感じたので、もう少し広まるといいなと思います。

# 参考
- [Tutorial: Set up your Enterprise Calendar Bot](https://docs.microsoft.com/en-us/composer/templates/enterprise-calendar-tutorial)
- [Bot Framework Composer v1.1.1 で日本語ロケール (ja-jp) を選択できるようになりました #BotFramework](https://yseosoft.wordpress.com/2020/10/03/bfcomp_v111/)