【第2/5】Teams bot をローカル (Visual Studio 2019) で開発し、Azure で無料で動かす【その２：エミュレータ準備編】

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

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


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/8f02f7a5-e0f3-6785-e30a-3c0f5dad9fbf.png)

# 2. Teams bot をまずローカルで開発（エミュレータ設定編）



bot クライアントとしては、最終的には Teams を使うわけですが、
まずは エミュレータを使ってみましょう。そのほうがデバッグしやすいです。
（もし動かなかったときに、Teams との接続の問題か、それともコード側の問題かの、切り分けなどに便利だし、エミュレータ使うとリクエストやレスポンスの中身が見れて都合が良いので）

## 2-1: エミュレータをインストール

Bot Framework SDK のテストやデバッグ用のデスクトップアプリ（エミュレータ）である、
**Bot Framework Emulator** をインストールしましょう。

Bot Framework Emulator も Microsoft により GitHub 上でオープンソースで開発されています。
このレポジトリのリリースページからダウンロードすることができます、

[https://github.com/microsoft/BotFramework-Emulator/releases](https://github.com/microsoft/BotFramework-Emulator/releases)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/fda161b0-8753-6fc8-2a71-b402705688bc.png)


このインストーラーを入れて、エミュレータをインストールしましょう。

## 2-2: エミュレータ 起動

Bot Framework Emulator インストールが終わり、
起動すると、
このような画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/a85669d7-8a9f-2bc9-b185-d4dd74cacda9.png)

## 2-3: エミュレータと web アプリを繋げる

左下の歯車アイコンから、設定を開きます。
また、実行中の web アプリの URL をコピペします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/6d02387b-81a9-c14e-1daa-8cceca539260.png)

エミュレータの設定画面の bot エンドポイントの URL を記入します。
さっきコピペした URL (`http://localhost:3698` など) に `/api/messages` を足したものを入れ、
「Connect」(接続) を押します。

![イラスト7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/ea396567-746a-7711-29d3-cddfc2d76145.jpeg)

## 2-4: エミュレータから bot のテスト

そのあと、トップページの「Open Bot」ボタンを押して、
Live Chat ページに行きます。

Visual Studio で web サーバがまだ動いている（実行中である）ことを確認してから、
このチャット画面で何か打ち込んでみましょう。

自分の言ったことが Echo: と何か返って返ってきたら成功です！ちゃんと動いています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/4543d2a9-8ee1-74e9-cffa-fb79b31278ab.png)

# 2-5. Teams bot をまずローカルで開発（ngrok 設定編）

今まではローカルで完結してた（ローカルで動いている web サーバに、ローカルで動いているエミュレータからアクセスしていた）のですが、
今回、
Teams からローカルの bot にメッセージを投げるためには、
Teams から O365 (インターネット) 経由で、
私のマシン (ローカル) で動いている web サーバを叩く必要があります。

そのために、トンネリングツールである **ngrok** (えぬぐろっく) を使いましょう。

## 2-5-1: ngrok インストール

[ngrok 公式サイト](https://ngrok.com/) からダウンロードします。

(↓ スクショはサインインした後の画面)

<img width="430" alt="Untitled.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/a85d1834-2c11-0480-de09-5400a8ec9176.jpeg">


実行ファイル exe が落ちて来るので、適当なところに入れます。
私は `$HOME/bin/ngrok` に入れました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/29afc5e8-3462-7afc-6e43-0a860c909ace.png)


## 2-5-2: Bot Emulator から ngrok 経由で bot 呼ぶ

コマンドラインで ngrok 起動します。
bot (web アプリ扱い) のアドレスを見ると、`localhost:3978` であるので、それを使います。

````bash
ngrok http -host-header="localhost:3978" 3978
````
(↓ 私は PATH 通してないので `./ngrok.exe` 直接叩いてます)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/05d7c038-215f-2f6c-6b2b-84e962a29e56.png)

コマンドで ngrok 起動しました。
次に、エミュレータの左下の歯車アイコンから設定画面を開き、
`ngrok.exe` の path を入れて save (保存) します

![イラスト7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/9baf394f-678a-94a7-caa2-04c92aecebbb.png)

実際に動かしてみましょう。

エミュレータの Live Chat のタブに戻り、何か送ってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/54c40013-770a-0e2c-f2c3-656cd51966e7.png)

# Next Step

ということで、ローカルのエミュレータで動きましたね！
次はクライアントを Teams にしてみましょう。


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

そのためにはまず Azure 側で色々下準備が必要です。それを次回見てみましょう

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/5b1c3da4badd6510905b]