【第1/5】Teams bot をローカル (Visual Studio 2019) で開発し、Azure で無料で動かす【その１：VS でローカル web サーバ立てる編】 #decode20 #A02

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

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

1. 【第 1/5 回】VS でローカル web サーバ立てる編【← 今ここ】
2. 【第 2/5 回】エミュレータ準備編
3. 【第 3/5 回】Azure 側の設定編（ボットチャンネル登録）
4. 【第 4/5 回】Teams に繋げてデバッグ編
5. 【第 5/5 回】Azure にデプロイ編

ちなみに、この記事は、オンライン開催された
日本マイクロソフト公式技術カンファレンス『de:code 2020』の、
私の行ったセッション『Azure Bot Services を使って Teams bot を開発する』で発表した内容の記事版です。

セッション動画

[追記] 2020/07/20(月) に、セッション動画が YouTube で公開になりました！

セッション動画はこちらです！
『de:code 2020 セッション A02：Azure Bot Services を使って Teams bot を開発する』

↓ 再生スピードを調整できます

（なんと字幕付き）（私は滑舌が悪いので字幕付けて頂けて助かったｗ）

前回書いた記事との違い

(*ﾟ▽ﾟ* っ)З 「あれ？　Teams bot 開発とか、少し前も同じような記事 書いてなかったっけ？」

たしかに似た記事は書いたけど、でもちょっと違う！　前回のは簡易版（お試し版）で、今回のは本格版！

前回の記事『Microsoft Teams で動く オレオレ bot を 1 時間で作る』では、
全て Web ブラウザ上で完結する、とても簡単な方法をご紹介しました。
コードも Azure Bot Services に内蔵されているオンラインエディタ上で編集できるので、ローカルに開発環境が無くてもサクッと動かせます。

これは本当に簡単なので（マジで1時間で動く）お試してやってみるのにはめちゃ便利なのですが、
いっぽうで、ローカル開発環境でデバッグしながら開発できないという欠点もあります。
本格的な業務用アプリを作るなどになるとこれではつらくなると思います。

なので、今回は、これのステップアップ版として、本格的にローカル開発環境でデバッグしながら Teams bot を開発する方法をご紹介します。

↓ これ書いてる途中にツイートしたもの

今、Teams bot 開発の丁寧な記事を書いてるよ！

前回書いた、１時間以内爆速で Teams bot 開発する記事（https://t.co/H9OEVanb3O）は
簡単さ重視にして、コードの編集も含め全て web ブラウザ上で完結する内容にしたから

今回はちゃんとローカル開発環境を整え、ローカルデバッグする方法で書いてる pic.twitter.com/jUNtjmdDT9

— ちょまど🎀ITエンジニア兼マンガ家 (@chomado) May 13, 2020

参考資料

• 公式ドキュメント『Bot Framework SDK for .NET を使用したボットの作成』
• 公式ドキュメント『ボットをデプロイする』

補足

Azure を操作する方法として、

1. ポータル画面の画面ポチポチの方法と
2. CLI からコマンド叩く方法

がありますが、
公式ドキュメントは全てコマンドラインからのもので書かれています。（公式ドキュメントは全て GitHub で管理されてるからコマンド（コード）で書かれている方が差分管理しやすいのと、Azure ポータル画面の UI が変わったときスクショ全部撮り直すことになるから、CLI 版で書いた方が安全だからだと思う）（個人的な予想）

でも、初心者は画面でやった方が直感的に理解しやすいと思うので、今回の記事では全てポータル画面から操作する方法をとっています。
スクショ満載でまとめました！

完成形

Teams で動く bot です。

chat bot とは

全体像 (ステップごとのアーキテクチャ図)

Teams bot 開発の全体アーキテクチャ図を順を追って説明します。
三段階に分けました。

Step 1: まずはローカル実行（エミュレータからの接続）

まだクライアントは Teams ではなくエミュレータです。
クライアントもサーバーも
私のパソコンの中 (ローカル開発環境) で閉じているので、大変シンプルですね。

Visual Studio でローカルサーバーを実行していて、
同時に Bot Framework エミュレータも起動しています。

エミュレータで「こんにちは」と打つと、
ローカルサーバーのエンドポイント (http://localhost:3978/api/messages) に問い合わせて
サーバーが「(*ﾟ▽ﾟ* っ)З って返して」と送り、
エミュレータでそのように表示されます。
シンプルですね。まずはここからですね。

Step 2: まずはローカル実行（Teams からの接続）

クライアントが Teams になりました。
すると、今まで私のパソコンの中で閉じていた世界から、インターネットの向こう側に登場人物が増えましたね。

増えた人：

• 管理する Microsoft 365 (旧 Office 365) 系のサーバーや Bot Framework Service のサーバー
• 自分の Azure 環境

1. クライアントは 私のパソコンの中の Teams アプリですが、そこで「こんにちは」とメッセージを打つと、そこからインターネット上の、マイクロソフトの管理する Microsoft 365 (旧 Office 365) 系のサーバーや Bot Framework Service のサーバーを経由し
2. 自分の Azure 環境に立てた Bot チャンネル登録 に「エンドポイントどこかな？」と問い合わせます。
3. Bot チャンネル登録 が「エンドポイントはここやで」とエンドポイントの URL を返します。今回はローカル実行中なので、トンネリングしているのでエンドポイントは https://***.ngrok.io/api/messages となります。
4. そのエンドポイントに問い合わせが来ます。「Teams から『こんにちは』って来たで」
5. サーバーが「(*ﾟ▽ﾟ* っ)З って返して」と送り返し、
6. 最終的に Teams で「(*ﾟ▽ﾟ* っ)З」と表示されます

Step 3: Azure にデプロイ。クラウドで実行（Teams からの接続）

bot サーバーがローカル実行からクラウド実行になりました。
左下の私のパソコンの中から「ローカルサーバー」が消えて、代わりに、Azure の中に Web App と App Service Plan が増えましたね。
これで私のパソコンを落としても bot は動き続けるね

1. Teams bot をまずローカルで開発（web サーバー準備編）

最終的にクラウド (Azure) にデプロイしますが、
まずはローカルで bot を動かせるようにしましょう。

（ローカルのままだとパソコン閉じたら bot 動かなくなるから、クラウドかどこかのいつでもレスポンスしてくれるサーバーに上げる必要があります）

1-1: Visual Studio 2019 に、Bot Framework 用のテンプレートを入れる

まずは Visual Studio 2019 を起動しましょう。（Visual Studio Code じゃないよ。Visual Studio 2019 だよ）

起動したら右下の「コード無しで続行→」を押します。

空っぽのプロジェクトが立ち上がるので、メニューの「拡張機能」→「拡張機能の管理」を押します。

すると、全世界の開発者の方々がアップした、拡張機能一覧が出てきます。
検索バーで「bot」と打ち絞り込み、「Bot Framework v4 SDK Templates for Visual Studio」を選択し、ダウンロードします。

画面の下の黄色のバーにも書いてありますが、今ダウンロードした拡張機能は、Visual Studio の「次回起動時に」適用されます。

なので、
ダウンロードが終わったら、
Visual Studio をいったん閉じます。（重要）

閉じて、もう一度起動すると、インストールが走ります。

1-2: Bot Framework プロジェクト新規作成

Visual Studio を再起動し、「新しいプロジェクトの作成」をクリックします。

テンプレートがたくさん出て来るので、「bot」で絞り込みましょう。
今入れたプロジェクトテンプレートが選べるようになっています。
今回は、そのなかの「Echo Bot (Bot Framework v4)」を選択し「次へ」を押します。

プロジェクト名を適当に決めます。

「作成」すると、プロジェクトが開きます。

1-3: NuGet 更新

NuGet (ぬげっと)(.NET のパッケージ マネージャ) のパッケージ更新しておきましょう。

Visual Studio のソリューションエクスプローラーから「依存関係」→「パッケージ」右クリックで、「NuGet パッケージ管理」を選択します

更新があるようなので、最新の安定板にしておきます。

ライセンスに同意します。

これで最新版のパッケージが入りました。

1-4: web アプリがちゃんと起動するか確認

この作成した ASP.NET Core 製の web アプリは、
bot のクライアント（Teams）からの REST リクエストを受け取る API を発行する人になります。

とりあえずちゃんと起動するか（ASP.NET Core の実行環境が整っているか）確認するために、実行してみましょう。

実行ボタンを押します。

ちなみに、この実行ボタンに書いてある IIS Express とは、Web サーバーサービスです。

(IIS は Internet Information Services の略。)

もともと IIS という Microsoft Windows の標準 Web サーバー（アプリケーションサーバー）サービス があるのですが、
その簡易版が IIS Express です。

今回、この ASP.NET Core 製の web アプリを、IIS Express で動かすので、実行ボタンがそうなっています。

で、実行すると、web ブラウザが立ち上がり、localhost 上で "Your bot is ready!" と表示された web ページが出てきます。

この画面になったら OK です。ちゃんと動いてる。

実行を停止しないで、サーバを動かしたまま、次に進みましょう。

Next Step

というわけで、ローカルサーバーが立ち上がりました。
次はクライアントのエミュレータを準備しましょう。

1. 【第 1/5 回】VS でローカル web サーバ立てる編【← 今ここ】
2. 【第 2/5 回】エミュレータ準備編【← 次はこれ】
3. 【第 3/5 回】Azure 側の設定編（ボットチャンネル登録）
4. 【第 4/5 回】Teams に繋げてデバッグ編
5. 【第 5/5 回】Azure にデプロイ編

次の記事： [https://qiita.com/chomado/items/b2f1020d598ebd855aa1]