【第4/5】Teams bot をローカル (Visual Studio 2019) で開発し、Azure で無料で動かす【その４：Teams に繋げてデバッグ編】

この記事では、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)


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

# 4. Teams に繋げる

Teams から実際に送られてきたメッセージでデバッグできるようになりましょう！

## 4-1. Azure 側の設定

ボットチャンネル登録のリソースを開きます。
左のメニューの「チャンネル」から Teams のアイコンを選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/26d28d59-1447-9247-70e4-7689dbcaf48f.png)

下の保存ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/35331fc0-5965-3c39-1627-5443701cd072.png)

## 4-2. ローカルで設定ファイル編集

次はローカルでの作業です。

`manifest.json` という設定ファイルを書くことになります。

「アプリ名は何」「作者名」などのアプリの設定や
アプリの接続情報「Microsoft App ID/ Secret」(Azure からコピペしてくるやつ)などを
json で記述する、設定ファイルです。

[こちらの公式ドキュメント](https://aka.ms/bot-manifest-schema) を見ながら書いていきましょう。→ [https://aka.ms/bot-manifest-schema]

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/f4b742b7-04aa-73ff-4ea2-67d8186e9a55.png)

書き終わったら、アイコン画像（32x32 と 192x192 の２サイズ必要）と一緒に zip で固めます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/5adae526-9d29-59ac-9482-b9254c5c0d06.png)


## 4-3. Teams にカスタムアプリとして登録

さて、いよいよ Teams での作業となります。
Teams を開いて左下の「`カスタムアプリをアップロード`」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/75714667-4307-0679-e311-91840a3c84f1.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/fc0c8f82-41f3-5612-c628-19e12dc39ca2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/9a89311c-f0ab-3e69-5b13-1107074625db.png)

## 4-4. Teams で動作確認

![teams-bot-dev.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/48405dc0-9bc5-507a-558f-74ae28a21f14.jpeg)

## 4-5. コードを編集して Teams にも反映されるのを確認

ハートをつけてみた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/8d94559d-9ce4-cbc1-8d2e-904ba132dc26.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/0803d14c-d826-5d01-f2bf-4d11c5dd4397.png)

コードを編集して再実行したら
Teams にも更新されるのを確認しました！

## 4-6. Teams bot ローカルデバッグ

![イラスト3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/f252681d-1836-4810-ab2f-a3b21f6e55f0.png)

やったー！これができたわけだ

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

# Next Step

ついに、ローカルサーバーに Teams から接続するところまで行きました！
次はサーバーをクラウドで動かすところまでいきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/85c8002d-4f59-e32e-3012-df2339f34ed7.png)

（今はローカルで動いているので、私のパソコンの電源を落とすと bot もレスポンスしなくなってしまうので。運用する際は、クラウドなど「常に安定して動いている」環境に bot のサーバーを上げる必要があります）

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/abd0c39d21ec6778295a]