bot framework emulatorを使ってみた

# はじめに
この記事は**[「Microsoft Cognitive Services & Bot Framework - Qiita」](http://qiita.com/advent-calendar/2016/cogbot)**の4日目になります。

# 概要
本当はAzure Bot Serviceの構築・利用・削除までの一連の手順を書こうと思ってたんですが、12月1日にAzure Portalからアクセスしてみたらbot framework emulatorがloading以降表示されなくなってしまったのでクライアント版のbot framework emulatorの環境設定及び利用方法についてのお話に変更します。

![image](https://qiita-image-store.s3.amazonaws.com/0/93820/2859fffc-929a-6737-a246-e2fb2bee1179.png)

※bot framework emulatorが無くなってしまったエビデンス、右端に存在していたemulatorが表示されなくなっています。
※12月3日に確認したところbot framework emulatorが表示されるようになっていました・・・。
　まだプレビューなのでこういうことはたまによくあります。

# 前提
Windows環境での作業を想定した情報となります。
本記事は2016年12月3日時点での情報となります。

# インストール
環境に合わせてbot framework emulatorを下記からダウンロードしてください。
本記事ではWindows版をダウンロードしています。
**[Download : bot framework emulator](https://docs.botframework.com/en-us/tools/bot-framework-emulator/)**

環境に合わせてngrokも下記よりダウンロードしてください。
本記事ではWindows版をダウンロードしています。
ダウンロード後、解凍し任意の場所にexeを配置してください。説明は後述します。
**[ngrok : SecureTunnels to localhost](https://ngrok.com/)**

# 参考
bot framework emulatorのDocumentはGITHUBに上がっているので下記を参照してください。
**[GITHUB : bot-framework-emulator](https://github.com/microsoft/botframework-emulator/wiki/Getting-Started)**

Azure Bot Serviceの構築方法は下記を参照してください。
**[Microsoft TeamsにAzure Bot Serviceで作成したBotを追加してみる](http://blog.kokoni.jp/2016/11/20/microsoft-teams%E3%81%ABazure-bot-service%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9Fbot%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B/)**

Azure Bot Serviceの削除方法は下記を参照してください。
**[Azure FunctionとAzure Bot Serviceの削除方法](http://blog.kokoni.jp/2016/11/25/azure-functions%E3%81%A8azure-bot-service%E3%81%AE%E5%89%8A%E9%99%A4%E3%81%AE%E4%BB%95%E6%96%B9/)**

# 各種情報の取得
bot framework emulatorを利用するにはBot ServiceのEndPointとMicrosoftAppId・Password情報が必要になります。**[bot framework](https://dev.botframework.com/)**のポータルにも記載されているのですがMicrosoftAppPassword情報はマスクされているため取得することができません。Azure Bot Serviceの画面からであればMicrosoftAppPasswordを再生成せずに取得することが可能です。

![image](https://qiita-image-store.s3.amazonaws.com/0/93820/1a369734-42c0-186a-82ec-40b768cc6ae5.png)

※bot frameworkのBot profileから遷移できるApplication Registration Portalです。ここではパスワードはマスクされているため削除してから新規にパスワードを作成する必要があります。

## EndPointの取得
Azure Bot Serviceの画面からSettingsタブを選択しEndpointを取得します。
Messaging endpointの情報をコピーしてください。

![image](https://qiita-image-store.s3.amazonaws.com/0/93820/9f5a9146-3cbe-c1c3-711e-b49f01675ec9.png)

## MicrosoftAppIdとMicrosoftAppPasswordの取得
Azure Bot ServiceのSettings画面からApplicaiton settingsのOPENボタンを押下します。
アプリケーションの設定ブレードが開くのでアプリ設定からMicrosoftAppId・Passwordの情報を取得します。

![image](https://qiita-image-store.s3.amazonaws.com/0/93820/9615491f-f42b-c753-d90b-ac6b1793c7ff.png)

# bot framework emulatorの設定と利用
bot framework emulatorを起動します。
URLにEndPoint情報を入力し、MicrosoftAppIDとMicrosoftAppPasswordを入力しCONNECTを押下しAzure Bot Serviceに接続します。

![image](https://qiita-image-store.s3.amazonaws.com/0/93820/03b9d5b5-c620-9cd0-5690-3c09cf0d0de8.png)

接続後にLOGを見てみると下記のようなエラーが出力されているはずです。
このエラーはリモートサーバ上にあるBot Serviceがリクエストを受けてCallBackする時にlocalhostに対してレスポンスしてしまうため発生します。この現象を解決するためにngrock : Secure Tunnels Softwareを利用します。

![image](https://qiita-image-store.s3.amazonaws.com/0/93820/998a2945-b03a-deb8-39e8-f75104c294a7.png)

URLの右隣にある設定ボタンからApp Settingを選択します。
Using ngrok?を選択しダウンロードしておいたngroｋ.exeを選択します。
ngrokとは外部からlocalhostにアクセスを可能とするためのサービスです。

![image](https://qiita-image-store.s3.amazonaws.com/0/93820/c4799f45-28eb-1abc-a523-b78d03b46119.png)

設定が完了したらEmulatorを利用してみましょう。
ここではEcho Botを利用しているため任意の文字を入力すると入力した文字を返してくれます。
またresetと入力するとカウントをリセットするか確認ダイアログが表示されます。
リクエストメッセージやレスポンスメッセージをクリックするとDetailsで通信でやりとりされたJSON情報を確認することができます。

![image](https://qiita-image-store.s3.amazonaws.com/0/93820/1da313fa-5191-5c73-aee8-219ee77cebf1.png)

これでBot Serviceのデバッグ及びテストが出来るようになりました。

Azure Bot Serviceの画面からbot framework emulatorがなくなった理由は~~ポータルで作業をさせないためだと思います~~。ただの不具合だったみたいです。とはいえポータル上での作業はインテリセンスが効かなかったりファイル追加できなかったりと非常に非効率です。。
Visual Studioで開発したBot ServiceをAzure Bot ServiceにCIデプロイしてbot framework emulatorでテストするという開発が主になって行くのだと勝手に思っております。