WebGLとチャットボットの組み合わせ ボット編

Webの世界にちゃんと触れ初めて半年経ちました。
今回初めて世の中にアプリケーションを出してみます、、
まずはリリースするとこまでを目標に頑張ります。

ボット作成編です。
その他の記事はこちらから。
<a href='https://qiita.com/chocoshop/items/77d6319bf54d97eda4e1'>・React/Firebase編</a>

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

#ざっくり登場人物
####フロントエンド
・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`を選択
<img width="1423" alt="スクリーンショット 2019-05-31 12.12.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323969/5af6de11-8390-78bb-1636-c035066597cf.png">

#####`Create a QnA Service`を選択

<img width="1420" alt="スクリーンショット 2019-05-31 12.17.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323969/51cfaed9-41a6-b3c8-5267-de1514c6aa28.png">
Azureのポータルに遷移するので各項目入れていきます。

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

＝＞作成
<img width="540" alt="スクリーンショット 2019-05-31 12.18.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323969/31abf462-4d17-adf3-88df-fc9591aa1b28.png">


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


###作成できた⭐️
自分はJリーグのQ&Aページの回答を使用しました。
単なる回答のペアなので、自然言語解釈(LUISなど)をつけたいところですが、ひとまずこれで雛形はできました。
<img width="840" alt="スクリーンショット 2019-05-31 12.41.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323969/3720bf10-a907-99cb-bdb2-106dc05b4204.png">

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

<img width="1143" alt="スクリーンショット 2019-05-31 12.46.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323969/2fc8a17c-5928-a36a-1b78-87e1bb24c998.png">

今回はサンプルなのでシークレットをベタ打ちしていますが、シークレットは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アプリボット＞ボット管理＞ビルド＞ボットのソースコードをダウンロードする
<img width="1177" alt="スクリーンショット 2019-06-02 3.13.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323969/c2e6da5b-9576-bbc9-14c3-d752fec25c2e.png">

###エミュレータの準備

Azureで作成したボットをローカルで動かしてテストする場合には、<a href="https://aka.ms/Emulator-wiki-getting-started">エミュレータ</a>をダウンロードして使います。ボットとユーザのデータのやり取りを、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"
```

###エミュレータでテスト

初期画面　*画面のテーマは三色選べます。
<img width="1377" alt="スクリーンショット 2019-06-02 3.19.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323969/d1eb86f2-55d4-4e3c-3ece-5bab3ee4cd6a.png">

`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

<img width="460" alt="スクリーンショット 2019-06-02 3.20.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323969/5e87871b-f997-6aa7-354d-786eb19c108a.png">


####接続できました:star:
JSONが表示されていい感じですね。ちなみにソースの中には、隠しファイルがいくつかあるので、ダウンロード後のファイル移動でなどで不足があると動きません。(.envファイルなど)
<img width="1060" alt="スクリーンショット 2019-06-02 3.25.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323969/6ab27a93-1c8d-b18e-261d-03d8f3bdb36b.png">