Webの世界にちゃんと触れ初めて半年経ちました。
今回初めて世の中にアプリケーションを出してみます、、
まずはリリースするとこまでを目標に頑張ります。
ボット作成編です。
その他の記事はこちらから。
・React/Firebase編
作るもの
キャラクターと会話してる風のチャットボットを作ってみます。
ざっくり登場人物
フロントエンド
・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叩いて取得します。
<!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ファイルなど)
