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

# どういう記事？
- Mac環境でMicrosoftのAzureのボットアプリを開発（オウム返しBotのテストまで）するやり方メモです。
- 普段Windows環境で開発しており、ひょんなことから「Macだとどうやるんだ？」と思って情報を探したらあまり発掘できなかったので残しておきます。
- もっと賢いやり方はあるのかもしれませんので、とりあえず早く動かしたい！という目的の人向けです。


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

- 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チャットでテスト**から、チャットのテストができるのですが、Safariのセキュリティ機能でサードパーティのCookieが有効になっていないとダメみたいでした。
<img width="850" alt="スクリーンショット 2020-07-23 16.39.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/be04eac3-6a9e-57ae-136c-293651d70ca4.png">

調べればなんとかなるのかもしれないですが、~~面倒なので~~時間短縮のため、Chromeで…。
ちゃんとオウム返しされることを確認します。
<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.ソースコードのダウンロード
動作確認ができたので、このソースコードをローカルのMac環境へダウンロードしていきます。
**ビルド**から**ボットのソースコードをダウンロードする**を選択します。
<img width="625" alt="スクリーンショット 2020-07-23 16.38.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/0fcdef1a-e6ed-fadb-0909-86f11f163a1f.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.ローカルでのソースコードの確認
Visual Studio for Macを起動し、**Open**を選択します。
<img width="441" alt="スクリーンショット 2020-07-23 17.01.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/0c9f6b10-7f41-77b5-9c14-829e445fd25a.png">

さきほどダウンロード＆解凍したフォルダの中にある**EchoBot.sln**を選択します。
こんな感じで展開していくと、EchoBot.csの部分で、オウム返し部分のソースコードが得られます。
<img width="1338" alt="スクリーンショット 2020-07-23 17.08.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/c0c6d154-9717-53ba-8d40-8ac34bd242a1.png">

# 5.ローカルでのテスト
Bot Framework Emulatorを使って、ローカルでテストができるようにしましょう。
Visual Studio for Macの左上の方にある「▶︎」でプログラムを実行します。
<img width="442" alt="スクリーンショット 2020-07-23 17.12.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/739a98e3-56fb-f445-aee3-3413c8a1cfab.png">

ビルドが走るのを待って、勝手にブラウザ上でこんな画面が出てきたらOKです。
<img width="1199" alt="スクリーンショット 2020-07-23 17.13.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/196a5f57-36bd-4db5-9d2e-fd9314f91437.png">

Visual Studio for Macの画面に戻り、`appsettings.json`を確認します。
`Microsot App ID`と`Microsoft App Password`があるので、あとで使うのでコピペしておきます。
<img width="838" alt="スクリーンショット 2020-07-23 17.16.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/91f266b8-2012-8960-2366-7565a5c3863f.png">

Bot Framework Emulatorを起動し、**create a new bot configration.**をクリックします。
<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`を入れます。
- Microsoft App ID：先ほどコピペしたものを入れます。
- Microsoft App Password：先ほどコピペしたものを入れます。
<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が開くので、試しにボットに話しかけてみて、オウム返しされたら成功です！
<img width="1399" alt="スクリーンショット 2020-07-23 17.22.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/4bc2f955-5e40-38f1-6e7c-e1b90dc12dd0.png">

# 6.Azureにデプロイする
さてそれでは、ちょっとだけコードを変更して、Azureに再度デプロイしてみます。
こんなかんじで、`EchoBot.cs`のコードを変更し、ボットの発言ををゆるい日本語にしてみました。
<img width="1313" alt="スクリーンショット 2020-07-23 17.34.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/9427099e-3824-5856-8da0-30d2e73b998e.png">

変更したコードを保存し、**EchoBotのプロジェクト**を右クリックし、**公開**をクリックし、**Azureに公開**を選択します。
途中、Azureへのサインインが要求されたら、サインインをします。
<img width="598" alt="スクリーンショット 2020-07-23 17.36.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/86ff71a0-995e-2476-7853-2d7239399987.png">

どのリソースにデプロイするのか聞かれるので、本記事中で最初に作ったリソースを選択し、**公開**をクリックします。
![これ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/1c234083-a155-f289-082c-77bec69bfd7a.png)


無事Azureにデプロイされたら、自動的にブラウザにこのような画面が表示されます。
URLを確認して`https://設定したアプリ名.azurewebsites.net`となっていたらOKです。
<img width="1201" alt="スクリーンショット 2020-07-23 17.52.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/9eec479c-8953-c778-7063-99aaa5e3f2cc.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へのデプロイ時には、前回デプロイしたリソースがこのように選択可能になっていますので、ちょっと楽です。
![あれ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/d1e59ce6-e1ff-3f14-b764-a09bbb5617cb.png)