無料で手早く作る：Teams で動く FAQ bot 開発 [後編] (2021 年 12 月版)

注意書き）2021/11/26
この記事はもともと 2021 年 2 月に書かれたものですが、この 9 カ月間に色々アップデートがあったので、諸々 書き直しました！　差分の気になる方は GitHub の commit log に。(この記事は git 管理されています)
2021 年 11 月末現在で最新の情報を書いています。

前編の記事 では、Azure Cognitive Service for Language でのナレッジベース作成まで完了しましたね。
この後半の記事ではクライアント (bot) のコードをガリガリ書いていきます。

0. 事前準備
1. Azure で bot ホスト先を用意
2. Azure Cognitive Service for Language の question answering 機能でナレッジベースを作る ← ここまで完了
3. bot クライアント開発 (Visual Studio で) ← ここから
4. Teams と繋げる

参考ドキュメント

公式ドキュメント：『クイックスタート: 質問応答』

3: bot クライアント開発

Microsoft 公式が用意してくれている、Botframework のエコー bot テンプレートに手を加える形で進めていきましょう。

エコー bot は、
ユーザの入力した文字列をそのまま返してくれる bot で、

ユーザの入力をきちんと取れて、また、ちゃんとチャットを返してくれる、ということで、チャットボットのハローワールド的なものによく使われる題材です

ちなみにソースコードはすべて GitHub に上げてあります
https://github.com/chomado/211125-FAQBot

3-1: Visual Studio に Botframework テンプレート

Visual Studio 2022 の拡張機能から Bot Framework v4 SDK Templates for Visual Studio を入れます。詳しく手順を示します。

まず VS2022 を開いて、「Continue without code」をクリック。（私は VS の言語を英語にしているので、日本語にしている方は適宜読み替えてください）

メニューバーから Extentions (拡張機能) → Manage Extentions

左のタブの「Online」を選択した状態で検索バーに Bot Framework v4 SDK Templates を入力しましょう。

クエリが走り、一番 上の「Bot Framework v4 SDK Templates for Visual Studio」を Download したら、VS2022 を再起動します。

3-2: プロジェクト作成

Visual Studio 2022 の Create a new project (新規作成) から
Echo Bot (Bot Framework v4 - .NET Core 3.1) を選択して作ります。

プロジェクト名は任意で。

「Create」(作成) を押します。

NuGet Package Manager から
Microsoft.Bot.Builder.Integration.AspNet.Core を
更新しておきます。

3-3: 実行してみる

プロジェクトが開くので、取りあえずなにもいじらずデバッグ実行してみます。(F5 押して実行)

web ブラウザが立ち上がります。http://localhost:3978/

3-4: Bot Framewrork Emulator で実行

エミュレータ (Bot Framewrork Emulator) を開きます。

「Open Bot」ボタンをクリック

Bot URL (エンドポイント) に http://localhost:3978/api/messages を入力し「Connect」

チャット画面が開きます。

開いたとき、最初は Hello and welcome! の定型文だけ返してきていますが、
こちらが何か言うと、その送った文字列そのままを返す、という動きをしています。（エコー bot）

3-5: Azure Cognitive Service for Language に繋げる準備：接続情報を記述

User Secrets に Azure Cognitive Service for Language の設定を書きます。

プロジェクト右クリックから Manage User Secrets
で、空の json ファイルが生えてきます。

Language Studio (https://language.azure.com/) の デプロイ画面の Get prediction URL から以下の部分の値を入れる

secrets.json サンプル

{
  "Endpoint": "https://japaneast.api.cognitive.microsoft.com/",
  "ProjectName": "自分が付けた名前",
  "Key": "キー文字列"
}

（これはローカルでの動作用なので、Azure にデプロイ後は App Service の アプリケーション設定 に同じものを書きます (後述) ）

3-6: プロジェクトに Azure Cognitive Service for Language の SDK 入れる

プロジェクトに Azure.AI.Language.QuestionAnswering を NuGet (パッケージマネージャー) から入れます。詳しい方法を以下に書きます。

プロジェクト右クリックで「Manage NuGet Packages」

Browse タブの検索バー Azure.AI.Language.QuestionAnswering 入れて出てきたパッケージをインストールします。

3-7: bot のコードを書いていく

3-7-1: EchoBot.cs: Azure Cognitive Service for Language を呼び出し

Bots フォルダの下の EchoBot.cs に bot のクラスがあります。

ここの OnMessageActivityAsync メソッドが
ユーザーから話しかけられた時に呼ばれるメソッドになります。

なのでここで Azure Cognitive Service for Language を呼び出せば QA bot が作れます。

まず、必要なものを EchoBot で使えるようにしましょう。

この 3-7-1 セクションでやる分のコード書き書きについては
こちらのコミットにまとめています
https://github.com/chomado/211125-FAQBot/commit/c49082b32f397fd5d5bd8e57f193f8f22a9ab115
(3-6 でやった NuGet package 追加のぶんも含んでる)

EchoBot.cs 、まず using を追加します。(追加分だけじゃなくもともと書いてたやつも一緒にここに書きますね (コピペフレンドリー) )

using Azure;
using Azure.AI.Language.QuestionAnswering;
using Microsoft.Bot.Builder;
using Microsoft.Bot.Schema;
using Microsoft.Extensions.Configuration;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

次にコンストラクタを書いていきます

private readonly IConfiguration configuration;

public EchoBot(IConfiguration configuration)
{
    this.configuration = configuration;
}

次に、OnMessageActivityAsync メソッドを置き換えていきます。

// ユーザーから話しかけられた時に呼ばれるメソッド。
// なのでここで Azure Cognitive Service for Language を呼び出す
protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
{
    // Azure Cognitive Service for Language に接続するための情報
    var endpoint = new Uri(configuration["Endpoint"]);
    var credential = new AzureKeyCredential(configuration["Key"]);
    var projectName = configuration["ProjectName"];
    var deploymentName = "production";
    
    // 上の接続情報を使い、
    // Azure Cognitive Service for Language に接続するためのクライアントを作る
    var client = new QuestionAnsweringClient(endpoint, credential);
    var project = new QuestionAnsweringProject(projectName, deploymentName);

    // もし必要ならデバッグ用にユーザの入力のオウム返しもできます
    /* await turnContext.SendActivityAsync(
        MessageFactory.Text(text: $"質問は『{turnContext.Activity.Text}』だね！")
    ); */

    // Azure Cognitive Service for Language からのレスポンスを取得
    Response<AnswersResult> response = await client.GetAnswersAsync(turnContext.Activity.Text, project);

    // bot の返答文を作る。
    // 今回は Azure Cognitive Service for Language からのレスポンスの回答部分をそのまま入れる
    var replyText = response.Value.Answers.First().Answer;

    // bot に喋ってもらう
    await turnContext.SendActivityAsync(MessageFactory.Text(replyText, replyText), cancellationToken);
}

実行してエミュレータでちゃんと動いているのを確認します

たとえば以下のメッセージを試してみてください

大学で買った Windows はどこでダウンロードできるの？

Windows の 32 bit 版と 64 bit 版って何？

Office のインストールについてもっと教えて

学習のために、ブレイクポイントを張って
レスポンスの中身を見てみるのも良いですね

https://twitter.com/chomado/status/1463831754125418497

3-7-3: EchoBot.cs: 最初のメッセージを編集

EchoBot クラスの OnMembersAddedAsync でメンバーが追加されたときのメッセージ (デフォルトでは var welcomeText = "Hello and welcome!";) があるので、
ここを日本語にしておきましょう。

var welcomeText = "(*ﾟ▽ﾟ* っ)З こんにちは！何でも聞いてね";

3-8: Azure にデプロイ

Visual Studio のプロジェクトの右クリックメニューから「発行」

どこにデプロイしたいのか聞かれるダイアログが出るので
ポチポチしていきます。

Azure
-> Azure App Service (Windows)
-> (必要によっては Azure のサブスクリプションと紐づいてる MS アカウントでログインしてね)
-> 該当する、事前に作っておいた App Service を選ぶ

publish (発行) しましょう

4: Teams と繋げる

今までエミュレータでの実行でしたが、いよいよ Teams 上で動かしてみましょう。

4-0: Azure ポータル画面

最初に作ったリソースグループの画面に行きましょう。
そのリソースグループの下に作られているリソースの一覧を見ます

4-1: Azure Bot を作る

このリソースグループの中に Azure Bot を作成します。
まず ＋作成 をクリックします

検索窓に Azure Bot と打ち込みます

Azure Bot 出てきましたね。
作成 を推します

4-1-a: Azure Bot の価格帯を無料版に

デフォルトでは価格帯がスタンダードになっているので、無料版を指定します

参考）Azure Bot Service の価格

4-1-b: Microsoft App ID の項で

Microsoft App ID の項で、アプリの種類を「ユーザー割り当て済みマネージド ID」にします。
これにすると、Azure AD へのアプリ登録などをやらなくて済んで便利です

これで作成します

4-1-c: Azure bot 作成完了。リソースグループに戻る

作成が完了すると「デプロイが完了しました」と出ます。

リソースグループに戻りましょう。

現在のリソース一覧はこうなっています

Azure Bot と一緒に
Key Vault (キーコンテナ) と マネージド ID が新規に作成されていますね。

これらは「誰でも私の bot が使える状態」にならないように（たとえば「うちの会社の人だけのアクセスにする」など）の
セキュアな認証などに必要なリソースです。

4-2: マネージド ID を Web App にも割り当てる

さっきのリソースグループのリソース一覧から
Web App (App Service) のリソースをクリックしましょう。
（私の場合 app-211126-faqbot って名前のリソース）

1. 左側のメニューの 設定 のなかの ID をクリック
2. 「ユーザー割り当て済み」を選択
3. 追加

Azure Bot 作成時に作られた マネージド ID を選択します

また左のメニューの「Configuration (設定)」から
Microsoft App ID をコピーします。

4-3: Web App の構成のアプリケーション設定に必要情報を追加

Azure Bot と Web App (App Service) (bot クライアントが載ってるところ) を繋げる作業をします。

まず必要な情報をメモします。

またリソースグループに戻り、
リソース一覧から Azure Bot をクリック。
（私の場合 bot-211126-faqbot って名前のリソース）

Azure Bot の 構成 ページの

• Microsoft App ID
• アプリ テナント ID

の値をコピーしておきます。（メモ帳かどこかにコピペしておいてください）

そしてさっきのリソースグループのリソース一覧から
Web App (App Service) のリソースに戻ります。
（私の場合 app-211126-faqbot って名前のリソース）

構成 -> + 新しいアプリケーション設定

以下の 4 つの情報を Web App の構成のアプリケーション設定に追加します

＃	名前	値
1	MicrosoftAppType	UserAssignedMSI
2	MicrosoftAppId	Microsoft App ID
3	MicrosoftAppPassword	(空文字)
4	MicrosoftAppTenantId	アプリ テナント ID

設定した後は必ず 保存 を押しましょう。(私はいつもこれを忘れて「あれ～？更新されてないぞ」となる)

4-4: Cognitive Service for Language の接続情報を教える

Visual Studio 2022 のほうの secrets.json に書いてた、API キー文字列的な 3 つの情報を
デプロイ先の Azure にも教えてあげます。

＃	名前	値
1	Endpoint	https://japaneast.api.cognitive.microsoft.com/
2	ProjectName	プロジェクトの名前（私の場合 qna-211125-software-download-faq）
3	Key	キー文字列

忘れず「保存」をします

4-5: Azure Bot にエンドポイントを教える

Web App (App Service) のリソースの 概要 から
URL をコピーしておく。

またリソースグループに戻り、
リソース一覧から Azure Bot をクリック。
（私の場合 bot-211126-faqbot って名前のリソース）

構成 -> メッセージング エンドポイント
で、さっきの URL に api/messages を追加したものを入れて
「適用」

4-6: Web chat でテスト

Azure Bot の左のメニュー Web チャットでテスト から
テストができます。
Teams で動かす前にこちらでちゃんと動いているかの確認をしましょう

4-7: Azure Bot のチャンネルの構成

Azure Bot の左のメニューの チャンネル から Microsoft Teams を追加しましょう。

4-8: Teams で動かす

動いた！！！！！！！！！！！！

5. 他の人の環境でも動かしたい

他の人の環境でも動かしたい場合、もう少し手順が必要です。（配布用の zip を作らないといけない）

5-1: 設定ファイル manifest.json

まず　Teams bot 設定ファイル manifest.json を書きます。

「アプリ名は何」「作者名」などのアプリの設定や
アプリの接続情報「Microsoft App ID/ Secret」(Azure からコピペしてくるやつ)などを
json で記述する、設定ファイルです。

詳細：公式ドキュメント『Reference: Manifest schema for Microsoft Teams』

5-2: bot アイコンをつくる

アイコン用に 32 x 32 と 192 x 192 の画像を
それぞれ icon32x32.png, icon192x192.png などという名前で保存しましょう。

アイコン画像作るのが面倒な方は
こちらからご自由にお使いください

https://github.com/chomado/210219_FAQbot-on-Teams/tree/main/teams-settings

5-3: zip で固める

エクスプローラーで manifest.json, icon32x32.png, icon192x192.png を選択して右クリックから圧縮します。

（図：私が過去書いた記事『【第4/5】Teams bot をローカル (Visual Studio 2022) で開発し、Azure で無料で動かす【その４：Teams に繋げてデバッグ編】』）

5-4 Teams にカスタムアプリとして登録

さて、いよいよ Teams での作業となります。
Teams を開いて左下の「カスタムアプリをアップロード」をクリックします。

（図：私が過去書いた記事『【第4/5】Teams bot をローカル (Visual Studio 2022) で開発し、Azure で無料で動かす【その４：Teams に繋げてデバッグ編】』）

あとはメッセージの体裁を適当に整えれば完成です！

読んで頂きましてありがとうございました😊

ご質問やご感想などありましたら、ぜひツイッター (@chomado) でお気軽にお問い合わせください。