Help us understand the problem. What is going on with this article?

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

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

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

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

image.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

image.png

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

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

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

image.png

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

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

image.png

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

イラスト7.jpg

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

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

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

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

image.png

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

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

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

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

ngrok 公式サイト からダウンロードします。

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

Untitled.jpg

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

image.png

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

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

ngrok http -host-header="localhost:3978" 3978

(↓ 私は PATH 通してないので ./ngrok.exe 直接叩いてます)

image.png

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

イラスト7.png

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

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

image.png

Next Step

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

image.png

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

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

chomado
ITエンジニア兼マンガ家の千代田まどか (ちょまど) です。Microsoft 社の Cloud Developer Advocate として、デベロッパーコミュニティの支援を行っています。松屋とゲームとアニメが好きです
https://chomado.com/
microsoft
マイクロソフトのメンバーが最新の技術情報をお届けします。Twitterアカウント(@msdevjp)やYouTubeチャンネル「クラウドデベロッパーちゃんねる」も運用中です。
https://aka.ms/MSFT-Docs-JPN
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした