Ｗindows環境で手っ取り早くAzureのボットアプリを作ってみた

# どういう記事？
- Windows環境でMicrosoftのAzureのボットアプリを開発（オウム返しBotのテストまで）するやり方メモです。
- [公式ガイドに沿ってやってみた](https://qiita.com/miokawa/items/6f1a3e480580e1e29abc)ことはあったのですが、正直結構~~めんどくさい~~細かく手順を踏んでいてなかなか動作までたどり着かなかったので、とにかくまずは動かす環境を最短で整えよう！と思ってやってみました。
- もっと賢いやり方はあるのかもしれませんので、とりあえず早く動かしたい！という目的の人向けです。


# 事前準備
- Visual Studio 2019のインストール
    - サイトは[こちら](https://visualstudio.microsoft.com/ja/downloads/)

- Bot Framework Emulatorのインストール
    - サイトは[こちら](https://aka.ms/Emulator-wiki-getting-started)

- Azureアカウントの取得
    - サイトは[こちら](https://azure.microsoft.com/ja-jp/free/)。
        - クレジットカード登録が必要（勝手に課金されることはない）です。
        - ¥22,500分の無料クレジットがもらえます。その他12ヶ月間無料のサービスや、ずーっと無料のサービスなどもあります。
    - 学生向けは[こちら](https://azure.microsoft.com/ja-jp/free/students/)。
        - 学校のメールアドレスを使って登録すれば、クレジットカード登録は不要です。
        - 年間$100分の無料クレジットがもらえます。


# 1.Azure上へのリソースの作成
最初はローカル側でいろいろやってみていたのですが、Azure側に先にボットアプリをサンプルコードでデプロイして、そのコードをダウンロードしてきていじった方がなんだかんだシンプルだったので、その戦法で…。

まず、自分のAzureアカウントで[Azureポータル](https://azure.microsoft.com/ja-jp/features/azure-portal/)へサインインします。

<img width="1198" alt="スクリーンショット 2020-07-23 16.23.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/1219cf7d-ee86-e3cb-6522-d5e81a81ddeb.png">

**リソースの追加**をクリックし、
<img width="379" alt="スクリーンショット 2020-07-23 16.25.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/6d37451c-5a64-a3a9-2649-ca66ea22f7db.png">

検索ボックスで**bot**と入力すると出てくる**Web App Bot**を選択します。
<img width="591" alt="スクリーンショット 2020-07-23 16.26.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/8aad4648-2dfd-e9e5-392b-0bccffb25e89.png">

Web App Botの画面で**作成**をクリックし
<img width="489" alt="スクリーンショット 2020-07-23 16.27.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/bfa80fa4-5118-9c2f-c10b-840e4551f38f.png">

必要な情報を入力します。今回はAzureやBotに関する詳細は、他にたくさん記事があるので省略させていただきます。[私が以前書いた記事](https://qiita.com/miokawa/items/6f1a3e480580e1e29abc)でもちょっと取り上げていたりしますので、気になる方は見てやってください。

黒塗り部分は個人個人のものを自由に入力してOKです。
**場所**は自分の場所の近く、**価格レベル**は無料の**F0**を選択しています。
**ボットテンプレート**の部分のみ、今回はオウム返しボット（Echo Bot）をC#で作るので、この通りに選択してください。
あとはApplication Insightsというアプリの監視に関する機能は今回は不要なためオフにしております。
入力し終わったら**作成**をクリックして、リソースがデプロイされるのを待ちます。
<img width="340" alt="スクリーンショット 2020-07-23 16.28.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/973dc16a-2808-6f6b-ed1d-c28038f473a7.png">

# 2.Azure上でテスト
リソースがデプロイされたら、テストしてみたくなりますよね。してみましょう。
今デプロイしたリソースの中から**Webアプリボット**を選択します。
<img width="625" alt="スクリーンショット 2020-07-23 16.53.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/d980747c-45ad-1779-0df5-fcd2ec003522.png">

**Webチャットでテスト**からチャットのテストができますので、くだらないことを話しかけて、オウム返ししてくれるか試してみましょう。
<img width="851" alt="スクリーンショット 2020-07-23 16.57.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/f2188dbb-5353-1600-e157-9f21a3de5d40.png">

# 3.ソースコードのダウンロード
動作確認ができたので、このソースコードをローカルのWindows環境へダウンロードしていきます。
左メニューの「概要」→「ボットソースのダウンロードをクリックします。
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415384/a6490bb9-8e57-7324-1e14-49a8646e147c.png)


アプリ設定を含めるかどうかと聞かれるので**はい**にしておきます。
<img width="765" alt="スクリーンショット 2020-07-23 17.03.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/afa9a049-a318-8c14-a54c-99fe9709ef66.png">

ちょっと待つとzipがダウンロードできますので、任意のフォルダで解凍しておきます。

# 4.ローカルでのソースコードの確認
さきほどダウンロード＆解凍したフォルダの中にある**EchoBot.sln**を選択すると、Visual Studio 2019が起動します。
ソリューションエクスプローラーで**Bots**フォルダを展開していくと、**EchoBot.cs**の部分で、オウム返し部分のソースコードが得られます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/167f7417-521e-24b0-af22-8115dc276ccf.png)

続いて、**appsettings.json**を開き、`Microsoft App ID`と`Microsoft App Password`という値があるので、あとで使うのでコピペしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/8715c69b-0fdb-64af-29aa-9e8145b3264a.png)

# 5.ローカルでのテスト
Bot Framework Emulatorを使って、ローカルでテストができるようにしましょう。
Visual Studio 2019の上の方にある「▶︎ IIS Express」でプログラムを実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/3f50c96c-d7c9-d83c-3b8f-9b192c386d93.png)

ビルドが走るのを待って、勝手にブラウザ上でこんな画面が出てきたらOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/759e9802-4baa-774f-b2d7-f7cf81f1d029.png)

Bot Framework Emulatorを起動し、**create a new bot configuration.**をクリックします。
<img width="950" alt="スクリーンショット 2020-07-23 17.15.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/5fe757b8-cb75-b89e-b234-7901c9899dc2.png">

ボットの接続に関する設定を入力していきます。
- Bot name：なんでもOKです。
- Endpoint URL：`http://localhost:3978/api/messages`を入れます。
  (正確には、`http://localhost:3978`の部分は先ほど「▶ IIS Express」した際ブラウザに表示されたURLとなります。大抵は`http://localhost:3978`になっているかと思います)
- Microsoft App ID：先ほど**appsettings.json**からコピペしたものを入れます。
- Microsoft App Password：先ほど**appsettings.json**からコピペしたものを入れます。
<img width="464" alt="スクリーンショット 2020-07-23 17.25.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/f28c707c-7008-7443-909d-a0b7f2beca85.png">

全て入力したら**Save and Connect**をクリックしてわかりやすいところに保存します。

Bot Emulatorが開くので、試しにボットに話しかけてみて、オウム返しされたら成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/4457569a-e068-c1e8-5b64-96f97b2b0046.png)

# 6.Azureにデプロイする
さてそれでは、ちょっとだけコードを変更して、Azureに再度デプロイしてみます。
一旦Visual Studio 2019の画面上の方にある「■」ボタンを押して、プログラムの実行を停止します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/052ccd17-2347-dc20-55a7-4665aa543668.png)


そしてこんなかんじで、**EchoBot.cs**のコードを変更し、ボットの発言ををゆるい日本語にしてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/a09e296a-b708-0916-2b95-edb7ba7687dc.png)


変更したコードをCrtl+Sなどで保存したら、このコードをAzureにデプロイしてみます。
**EchoBotのプロジェクト**を右クリックし、**発行**をクリックし、**Azure**、**Azure App Service(Windows)**の順で選択します。
途中、Azureへのサインインが要求されたら、サインインをします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/ac7c0ca8-a8b6-f8ec-9dc8-d14fc2c5ed9f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/2b9b12f1-d8d7-edce-0041-00eabf919241.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/d0df5f0f-9383-0f76-f72e-419f8ac1c7b3.png)

どのリソースにデプロイするのか聞かれるので、本記事中で最初に作ったリソースを選択し、**完了**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/93b2e085-590d-3855-9089-8ecca7e0ab5d.png)

以下のような画面になるので、**発行**をクリックし、Azure上に発行（デプロイ）されるのを待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/262e350c-0b4e-6b78-e89a-e54a16d23d25.png)

無事Azureにデプロイされたら、自動的にブラウザにこのような画面が表示されます。
一見「ん？さっきも見たぞ？」という画面ですが、URLを確認して`https://設定したアプリ名.azurewebsites.net`となっていたらOKです。ローカルPC上ではなく、Azure上のアプリにアクセスしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/0d53d0d6-504d-b005-0bdd-2e4815b81c65.png)


# 7.Azureポータル上でテスト
それでは最後に、Azureポータルに戻って、[2.Azure上でテスト](#2azure上でテスト)と同じ方法でテストをしてみましょう。コードの変更が反映されていたら成功です！
<img width="846" alt="スクリーンショット 2020-07-23 17.56.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/5886b820-9fdf-6d26-79a7-2f9d46587176.png">

ちなみに、2回目以降のAzureへのデプロイ時も同様に、**EhcoBot**右クリックからの**発行**で、**発行**ボタンをクリックすれば、前回デプロイしたリソースへデプロイ可能になっていますので、デプロイ先のリソースをいちいち選択する必要はないです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/ac7c0ca8-a8b6-f8ec-9dc8-d14fc2c5ed9f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/fccbf391-5d29-1903-9541-260e9b21e7e3.png)