【第3/5】Teams bot をローカル (Visual Studio 2019) で開発し、Azure で無料で動かす【その３：Azure 側の設定編（ボットチャンネル登録）】

この記事では、Teams で動く chat bot を、ローカル (Visual Studio) でデバッグしながら開発する方法を、初心者でも分かりやすいようにスクショ満載でまとめました！

（スクショ満載にした結果、１ページが長くなり過ぎたので、５つに記事を分割します。この記事はそのうちの３つ目です。）


1. [【第 1/5 回】VS でローカル web サーバ立てる編](https://qiita.com/chomado/items/4de8e1f4e5a76fb20bcd)
1. [【第 2/5 回】エミュレータ準備編](https://qiita.com/chomado/items/b2f1020d598ebd855aa1)
1. [**【第 3/5 回】Azure 側の設定編（ボットチャンネル登録）**](https://qiita.com/chomado/items/5b1c3da4badd6510905b)【← 今ここ】 
1. [【第 4/5 回】Teams に繋げてデバッグ編](https://qiita.com/chomado/items/23c66a975e21265d99ae)
1. [【第 5/5 回】Azure にデプロイ編](https://qiita.com/chomado/items/abd0c39d21ec6778295a)

前回では、ローカルで実行されているサーバに、
同じくローカルで動いているエミュレータから接続しましたね。

今度はクライアントをエミュレータから Teams に変えてみましょう。
そのためには Azure 上で色々下準備が必要です。
見ていきましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/2e318cc8-9766-4532-8ff3-b189206874bf.png)

# 3. Teams bot をまずローカルで開発（Azure 設定編）

## 3-1: まずは Azure にログイン

[Microsoft Azure のポータルサイト](https://portal.azure.com/) ( [https://portal.azure.com/](https://portal.azure.com/) ) に行きましょう。

サブスクリプション持っていないという方はこちらから無料試用版をアクティベートできます：

* 一般の方用の Azure トライアル：[Azure 無料アカウント作成](https://azure.microsoft.com/ja-jp/free/?WT.mc_id=docs-blog-machiy)
* 学生用の無料アカウント作成：[Azure for Students](https://azure.microsoft.com/ja-jp/free/students/?WT.mc_id=docs-blog-machiy)

## 3-2: リソースグループを作る

今回の bot 運用用にリソースグループを新たに作りましょう。
「リソースグループ」とは、複数のリソース（インスタンス）をまとめられる、整理整頓用のフォルダのようなものです。

![イラスト2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/e6449a28-41ce-dee2-4af0-6854203fdc70.jpeg)

遷移先のページの左上から「＋追加」を選びます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/4db4568d-d975-345e-f2a5-2f89664166ab.png)

適当なリソースグループ名を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/1de49ce5-479c-bf36-f6d1-1dfa6ca7879c.png)

私は `200513_TeamsBot-rg` にしました。
（リソースグループのオレオレ命名規則として、最後に `-rg` を付けるくせがある）

それで、「`確認および作成`」を押すと、指定した名前でリソースグループが作られます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b101cbef-dddb-5121-dc1c-224287e48040.png)

通知の「リソースグループに移動」で、リソースグループに飛びます。
（もしくはトップページの「リソースグループ」を押すとリソースグループ一覧ページに行くので、そこから該当のリソースグループを選んでください）


## 3-3: ボットチャンネル登録を作る

作ったリソースグループの下に『**ボットチャンネル登録**』(**Bot Channels Registration**) を作ります。

『**ボットチャンネル登録**』(**Bot Channels Registration**) とは、
bot のエンドポイントや 
bot のチャンネル (Teams に繋ぐとか Skype に繋ぐとか Facebook messenger に繋ぐとかの設定をしてくれる人) の設定や
その他 bot の各種設定を登録しておく場所です。

↓ 最初に作ったリソースグループ「`200513_TeamsBot-rg`」の「追加」を押します。
これで、このリソースグループの中に新たにリソースを作成することになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/49d1e5c0-154b-497b-0f8c-cfb5586965d2.png)

「`Bot Channel Registration`」で「作成」を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/2746520c-7d17-d322-2990-c4435f8976dc.png)

必要な項目を以下のように入力し、
作成ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/9306ecc8-5ed8-5351-ad57-48c5c3001a10.png)

### エラー対処


> このサブスクリプションに対して、リソースプロパイダー `Microsoft.BotService` が登録されていません

というエラーが出ることがあります。
(Twitter で質問を頂きました)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">セッションを見て自分でもやってみましたが、3-1:Teamsに繋げる(AzureのBotChannelsRegistration作成)で以下のメッセージで作成できません。何が原因なんでしょう<a href="https://twitter.com/hashtag/decode20?src=hash&amp;ref_src=twsrc%5Etfw">#decode20</a> <a href="https://twitter.com/hashtag/A02?src=hash&amp;ref_src=twsrc%5Etfw">#A02</a> <a href="https://twitter.com/hashtag/QA?src=hash&amp;ref_src=twsrc%5Etfw">#QA</a> <a href="https://t.co/Kqf6rDGdl3">pic.twitter.com/Kqf6rDGdl3</a></p>&mdash; すぎゃま (@sugyama_1972) <a href="https://twitter.com/sugyama_1972/status/1276345246440292353?ref_src=twsrc%5Etfw">June 26, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そのさいは [こちら](https://docs.microsoft.com/ja-jp/azure/azure-resource-manager/templates/error-register-resource-provider?WT.mc_id=docs-qiita-machiy) をお試しください。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/decode20?src=hash&amp;ref_src=twsrc%5Etfw">#decode20</a> <a href="https://twitter.com/hashtag/A02?src=hash&amp;ref_src=twsrc%5Etfw">#A02</a> <a href="https://twitter.com/hashtag/QA?src=hash&amp;ref_src=twsrc%5Etfw">#QA</a><br>すぎやまさん、私のセッションをご視聴頂き誠にありがとうございます！<br><br>Azure はサブスクリプションごとに<br>何を作れるか（リソースプロバイダー）の設定がありまして、<br>それでボットが作れるように有効化すれば良いです💡<br>詳しくはこちらをご覧ください😊<a href="https://t.co/ymfydscpt3">https://t.co/ymfydscpt3</a></p>&mdash; ちょまど🎀ITエンジニア兼漫画家 (@chomado) <a href="https://twitter.com/chomado/status/1276353529272168449?ref_src=twsrc%5Etfw">June 26, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[ご案内したページ](https://docs.microsoft.com/ja-jp/azure/azure-resource-manager/templates/error-register-resource-provider?WT.mc_id=docs-qiita-machiy) の下の方のポータル画面からやるやり方が一番とっつきやすいと思います。

### ボットチャンネル登録のデプロイが終わると

しばらくするとデプロイが終わるので、通知から「リソースに移動」します。（または普通にトップ画面からリソースグループに入ってそこから行っても大丈夫です）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/4d4e740e-d55c-6c3f-c71b-109457ea461a.png)

開いたら、ボットチャンネル登録の画面は以下のようになっています。

![イラスト4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/3278302f-a9c7-d793-b0f3-3cb78194d65d.jpeg)

## 3-4: Azure にエンドポイントを教える

ここで、左のメニューの「設定」をクリックします。

動いている ngrok の `https` のほうの URL をコピペし、
エンドポイントとして `/api/messages` で終わる形の URL を入力します。
そして「保存」を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/79322809-691d-9442-4c16-256f643b296c.png)

## 3-5: Azure との接続情報をメモする

次に、リソースグループへと戻り、
左のメニューから「デプロイ」を選択しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/2dea117d-3f69-1b9b-757b-9a01000b79d6.png)

こんな画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/4bb45357-7ec4-0a1c-70be-7d609d310eca.png)


左の「入力」を選びます。
さまざまな環境変数の一覧が載っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/d983fa93-322f-fb25-3ed3-fb5be7de389e.png)


この環境変数一覧の中の「`appId`」と「`appSecret`」をメモします。

ちなみに、ここの「`appId`」とは、
`Microsoft App ID` のことで、
Azure Active Directory (認証・認可のサービス) で管理されているアプリの一意のIDです。

要するに、登録されたアプリに振られた ID です。

## 3-6: ローカルの web サーバに、Azure との接続情報を教える

Visual Studio の プロジェクト右クリックから「ユーザーシークレットを管理」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/e33a277e-54a3-cef9-45d2-c576f2ba24b3.png)



`secret.json` という、空の json ファイルが生えましたね。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/3dddc820-7e09-9923-71f4-e8bc8dc2350e.png)


ここでは、ローカルでの開発用の秘密の情報（API key や 接続文字列など）を記録しておく場所になります。
ここに書いておくと、例えば、最初から.gitignore に入っているので、間違って API key を GitHub に大公開ということが無くなったりします。

ということで、こちらに、Azure ポータルから取ってきた「appId」と「appSecret」を記載します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b6959171-cfb8-2ebb-065e-6bee3492fcb6.png)

↓こんな感じ

````json:secrets.json
{
  "MicrosoftAppId": "00000000-0000-0000-0000-000000000000",
  "MicrosoftAppPassword": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
}

````

## 3-7: ローカルの web サーバと Azure が繋がってるかテスト

では、Azure 側から ローカルの web サーバが叩けるかテストしてみましょう。
Visual Studio 2019 で「実行」(IIS Express) します。

立ち上がったら、Azure ポータルの「web チャットでテスト」してみましょう。
（ボットチャンネル登録のページの左メニューの「web チャットでテスト」から行けます。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/6b0ffd24-12ec-9f41-aa0f-087863e89a03.png)

ローカルで動いている bot の web サーバー (ASP.NET Core 製) に、
Azure からメッセージを送って、
ローカルの bot がメッセージを返して、
それが Azure の web chat に表示されました。

## 3-8: bot を更新してみる（セリフを変えてみる）

ローカルの bot のコードを編集してみて、Azure 経由でもそれがちゃんと反映されるかをテストしてみましょう。

ためしに、ユーザとの対話のコード (`./Bots/EchoBot.cs`) に ちょまぎょ `( *ﾟ▽ﾟ*  っ)З` を入れてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/61ee57d3-2ed9-fc56-fd64-b6a049f8e706.png)

## 3-9: エミュレータで実行

さっきは web チャットでテストしましたので、今回はエミュレータを使ってテストしてみましょう。

エミュレータに必要な情報を渡してあげます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/c9430105-17d8-0ebe-bb04-0d7394f2d956.png)

そして実行してみましょう。
すると、意図通りちゃんと ちょまぎょ `( *ﾟ▽ﾟ*  っ)З` がいることが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/3dc98972-ae85-21eb-9643-aa38e89c7aad.png)

やった～

## 3-10: まとめ

この記事では、Azure を経由して、ローカルのエミュレータなどで動作確認するところまで行きました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/2e318cc8-9766-4532-8ff3-b189206874bf.png)

# Next Step

次はいよいよ Teams での動作確認をできるようになりましょう！


1. [【第 1/5 回】VS でローカル web サーバ立てる編](https://qiita.com/chomado/items/4de8e1f4e5a76fb20bcd)
1. [【第 2/5 回】エミュレータ準備編](https://qiita.com/chomado/items/b2f1020d598ebd855aa1)
1. [【第 3/5 回】Azure 側の設定編（ボットチャンネル登録）](https://qiita.com/chomado/items/5b1c3da4badd6510905b)
1. [**【第 4/5 回】Teams に繋げてデバッグ編**](https://qiita.com/chomado/items/23c66a975e21265d99ae)【← 次】 
1. [【第 5/5 回】Azure にデプロイ編](https://qiita.com/chomado/items/abd0c39d21ec6778295a)


次の記事 → [https://qiita.com/chomado/items/23c66a975e21265d99ae](https://qiita.com/chomado/items/23c66a975e21265d99ae)