作るもの

キャラクターと会話してる風のチャットボットを作ってみます。

ざっくり登場人物

フロントエンド

・React-redux
・Scss
・Three.js

バックエンド

・Firebase
・Azure
・Microsoft BotFramework

綺麗なアーキテクチャとかさっぱりわからないので、なるべく知見のあるものを選んでいます。
バックエンドで詰まって時間浪費しないように、頑張ろう！

ボットの準備

最初にMicrosoft BotFrameworkを使って簡単なボットを作っていきます。

【準備するもの】
・Microsoft アカウント
https://account.microsoft.com/account?lang=ja-jp
・Azureのサブスクリプション(今回は無料版を使用しています)
https://azure.microsoft.com/ja-jp/

QnAMaker

Azureが提供しているサービスの1つです。
質問と回答のペアを保存して、ボットが返答するためのソースになります。
また任意のファイルやWebページから質問と回答のペアを認識して読み込んでくれます。

ナレッジベースの作成

QnAMakerのポータル画面を操作します。
・ポータル
https://www.qnamaker.ai
サインインできたら以下のような画面になっていると思います。

`Create knowledge base`を選択

`Create a QnA Service`を選択

Azureのポータルに遷移するので各項目入れていきます。

名前：グローバルでユニークならなんでもいいです。
サブスクリプション：無料試用版
価格レベル：F0(稀にプルダウンで何も表示されないのでその場合はリロード)
リソースグループ：なければ作成
場所：西日本
アプリ名：名前と同じになるように自動入力されます。
Webサイトの場所：西日本
App insights：有効
App insightsの場所：西日本

＝＞作成

これより後は公式のドキュメントが参考になります。
https://docs.microsoft.com/ja-jp/azure/cognitive-services/qnamaker/quickstarts/create-publish-knowledge-base#create-a-bot

作成できた⭐️

自分はJリーグのQ&Aページの回答を使用しました。
単なる回答のペアなので、自然言語解釈(LUISなど)をつけたいところですが、ひとまずこれで雛形はできました。

IframeでWebページに埋めこむ

Azureのボットサービスでは、チャンネルという括りでLINEやWebページへの埋め込みに対応しています。Azureポータルでチャンネルの設定をしていきます。
今回はすでに追加されていますが、『おすすめのチャンネルの追加』からDirect Lineを追加してください。
Dilect LineはWebページでボットを呼び出すことを可能にします。
その後『編集』からボットのシークレットとIframe埋めこみ用のコードをコピーしてください。

今回はサンプルなのでシークレットをベタ打ちしていますが、シークレットはHTMLの中で丸見えだと困るのでリリース時にはAPI叩いて取得します。

サンプルで埋め込んだよ.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <iframe src='https://webchat.botframework.com/embed/ボット名?s=シークレット'  style='min-width: 400px; width: 100%; min-height: 500px;'></iframe>
</body>
</html>

ボットのテスト

ボットの振る舞いや、クライアントには見えないデータをローカルで確認したいです。

ソースコードの準備

Webアプリボット＞ボット管理＞ビルド＞ボットのソースコードをダウンロードする

エミュレータの準備

Azureで作成したボットをローカルで動かしてテストする場合には、エミュレータをダウンロードして使います。ボットとユーザのデータのやり取りを、JSONで見ながらデバックできます。

ボットを起動

ダウンロードしたボットのソースディレクトリに移動し、npm install & npm start
このように案内されるので、エミュレータを開きます。

restify listening to http://[::]:3978

Get Bot Framework Emulator: https://aka.ms/botframework-emulator

To talk to your bot, open the emulator select "Open Bot"

エミュレータでテスト

初期画面　*画面のテーマは三色選べます。

Ctr + o もしくはOpen Botからローカルで使用されるURLを入れる。
http://localhost:3978/api/messages

Optionalと表示されていますが、.envファイル内のApp IDとApp passwordの入力してください。
ローカルなので入力しなくても良いとの情報も見られますが、自分はそれで404エラーを吐いたのでここでパーミッション情報を入れたら動きました。
.envファイル周りがうまくいってなさそうですが、、、、
最近(2019/05)、.botファイルの利用が非推奨になりました。
代わりに.envファイルかappsetting.jsonを使うことを公式は勧めています。
情報が少ないので詳細わかれば追記したいと思います。

・公式で参考になるかも
https://docs.microsoft.com/ja-jp/azure/bot-service/bot-file-basics?view=azure-bot-service-4.0&tabs=js

接続できました

JSONが表示されていい感じですね。ちなみにソースの中には、隠しファイルがいくつかあるので、ダウンロード後のファイル移動でなどで不足があると動きません。(.envファイルなど)