Microsoft Teams : QnA Maker と Web App Bot を使ってノンコーディングでチャットボットを作ってみた

Azure は未開の地だったのですが、少し足を踏み入れてみています。先日の Microsoft Tech Summit 2018 でチャットボットのセッションを受けた事もあり、非エンジニアとして簡単にできるチャットボットだったらやってみよう!と思い立ちました。という事で、 Azure 初心者の挑戦なので正しいかどうかわからないで設定します。

※あまり余裕がなくスクショ撮り忘れがチラホラ…。

【1】 QnA Maker

Azure のアカウントで QnA Maker のサイトにサインインします。(日本語じゃないんだよなぁ…)

▼「Create a knowledge base」をクリック

▼STEP1で QnA サービスを作ります。「Create a QnA service」をクリック

▼別タブでAzureポータルで作成画面が表示されるので適当!?に項目を埋めて作成

▼作成後、STEP2で上で作成したサービスを選択

ちなみにこのページで良くでる「KB」がなんだかよくわからなかったけど、つまり「knowledge base」の略だったっぽいですね。

▼STEP3はお好きな名前、STEP4は後で手入力でQAを作るなら未記入

▼最後STEP5で「Create your KB」をクリック

▼作成されたKnowledge baseにどんどんQAをぶち込みます

入力方法は直感的にわかると思うので割愛。
OKだったら、右上「Save and train」をクリック。
その後、その右の「← Test」をクリック

▼右パネル内でテストができます。OKなら最後に「PUBLISH」をクリック。

▼次のページも良く読まずに!?「Publish」をクリック

▼最後に出るこのページで「Postman」ってタブが選択されている状態で下のテキストをコピーして適当にテキストエディタに貼り付けます

とりあえず QnA Maker の設定はここまで。

【2】Web App Bot

▼ Azure ポータルのリソースの作成で「bot」で検索し、「Web App Bot」を選択

▼適当!?に埋めます

途中で気を付ける点が「ボット テンプレート」という箇所。

▼「ボットテンプレート」をクリックすると、右隣のパネルの表示が変わります。

▼ QnA Maker を使う場合はSDKバージョンを「SDK v3」にしないと表示されませんでした。「Question and Answer」を選択。

▼こうなればOK

他の設定事項は正直よくわからないです。

で、デプロイされたら QnA Maker の情報を設定します。

▼「アプリケーション設定」の下の方にあるこの3つの設定に値を入れます。

何の値かって?【1】の最後にテキストエディタにコピペした値です。

▼こんな感じ

QnAAuthKey → 「Authorization: EndpointKey」の右の部分
QnAEndpointHostName →「Host:」の右のURLの部分
QnAKnowledgebaseId→「POST」の右のURLの一部

これを設定した後に Web App Bot でテストします

▼「Web チャットでテスト」からテスト!ちゃんと QnA Maker で登録したQに対してAで返します

次にボットのプロファイルの設定。

▼「設定」

アイコンはボットに必要ですね。最大30Kと小さいくPNGファイルのみ。表示名もそのまま Teams で名前として表示されるのでちゃんと考えましょう。

でこのページの中にある「 Microsoft App ID 」が必要との事。なのでコピーしてテキストエディタにペーストしますが、

▼グレーアウトされてコピーできない!

この場合は、「Microsoft App ID(管理)」の「(管理)」をクリック

▼ここでコピーできる

コピーしたらページは閉じます。

次にチャンネルに接続します。

▼「チャンネル」をクリックし…

その後スクショ撮るの忘れていました。まだ作成していないとこの「おすすめチャンネルの追加」ってところに Microsoft Teams のアイコンがあるので、それをクリックします。

▼接続されるとこんな風に表示されます

【3】 Microsoft Teams

いよいよボットを追加します。

▼チャットを新規作成しメンバーにさっきコピーした「 Microsoft App ID 」ペースト

ちゃんとサジェストに出てくる!そして…

▼息子ボットとの会話に成功!

いやぁ、正直設定の一つ一つは全くわかっていないので理解していない状態で試行錯誤しましたが、とりあえずちゃんと動いてくれています。あとはホントにこの流れでこの設定をするのが正しい方法なのか?一つ一つの設定で大事な設定を抜かしていないか?などの確認は…業務でチャットボットを作る事はないと思うので今後の優先度は低いです。とりあえずこんな感じで非エンジニアがノンコーディングでもチャットボットができてしまうという事を体感できました。


今回のチャットボットの目的は完全に僕と嫁さん用!息子が徐々に言葉を覚えてくる過程で、息子のオリジナル語が色々出てくるけど、言葉を覚えるほどそのオリジナル語は言わなくなる一抹のさみしさもあり、それをチャットボット化して癒してもらおうかと!