君にもできる！ チャットボット！！
やあ、みんな！
夏休みの宿題は終わったかな？
え？
自由研究がまだだって？
そうだろうそうだろう、
僕もいつも2学期の2日目の夜に泣きながらヤクルトの空き瓶でロボットを作ったものさ！
今日はそんな君達のためにチャットボットの作り方を教えるよ！！
難しくないのかだって？
大丈夫！
うまく行けば30分で作れちゃうんだ！！
そうか！ようしわかった！僕に任せておけ！！
これで君も今日からAIエンジニアだ！！
【用意するもの】
・Azureアカウント
え！？
Azureアカウントを持っていない？
心配ないよ！！
まず「Azureアカウント 作り方」ってググるんだ！！
いっぱいヒットするからね！！
好きなサイトで作り方を参考にしてくれればいいさ！！
準備はできたかな？
ちなみにチャットボットの作成手順はこんな順番になっているから覚えておいてくれ！
- 「脳」となる「QnA Service」の作成
- 「記憶」となる「Knowledge Base」の作成
- 「口と耳」となる「Bot Service」の作成
OKじゃあさっそくはじめるよ！！
QnA Makerにアクセス
まず
https://www.qnamaker.ai/Create
にアクセスするんだ。
すでにサインイン済みだった場合はそのまま下のページが表示されるよ！
サインインしていない場合はサインインのための画面に遷移するけど、
大丈夫！用意したAzureアカウントでサインインしよう！！
QnA Service の作成
さてページが表示されたらまずSTEP1をやるよ！
さっそく「Create a QnA service」のボタンをクリックしよう。
するとブラウザの別タブにこんなページが表示されるんだ。
このページで作るのは「QnA Service」、さっきの説明ではチャットボットの「脳」と説明したね！
よし、じゃあまずは「QnA Service」の名前をきめよう！
好きな名前にしていいよ！
え、考えるのが面倒くさいって？
やれやれ、随分とめんどくさがりだね！
じゃあ僕がイケてるハイセンスな名前をつけてあげよう！
どうだい？
これはプログラマーのみに伝わるクールでトラディショナルな命名方法さ！
イカスだろ？
よし、次はサブスクリプションだ！
このサブスクリプション名はあくまでサンプルだ！
実はここはお金に関係する大事な項目なんだ！
自分で決められなければお父さんかお母さんに決めて貰おう！！
次に価格レベルだね！
「F0」で良いだろう、安いに越したことはないからね！
：メモ：
価格など、リストボックスで値を選択する場合、リスボックスに何も出てこない場合があるよ！
こういった場合、F5でリロードすると問題は解決するけど、せっかく入れた値が全部消えてしまうから、タブを複製してから今まで入力した値を元のタブからコピーすると良いよ！
次はリソースグループだ。
新規作成をクリックして新しいリソースグループを作っていこう。
リソースグループの名前ももちろん好きな名前をつけて大丈夫だ！
考えるのがめんどくさいという効率重視の君は、
こんなゴキゲンな名前にするとハッピーさ！
さて、「OK」をクリックしてリソースグループの名前を決めてしまえば後は簡単だ。
下の入力前後の比較を参考にパパッと入れて行ってしまおう！
(ちなみにアプリ名は名前を入れると自動的に入力されるよ！)
もう一度言うけど、サブスクリプションだけは慎重にで決めてくれよ！
僕との約束だ！！
よし、ここまできたらここで一旦ページをのスクリーンショットを取るんだ。
名前とサブスクリプションと右上のディレクトリ名が分かるようになっていれば大丈夫！
スクリーンショットをとったらいよいよ「作成」ボタンをクリックしよう！
下の表記が出たかな？
イエイ！
これで「QnA Service」は出来たも同然だ。
一旦休憩して5分後に戻ってきてくれ！
～～～5分後～～～
さて、画面の右上を見てくれ
ベルのところに数字が出ているね？
これをクリックしよう。
こんな表示が出てきたかな？
OK、「QnA Service」はこれで完成だ。
Knowledge Base の作成
さて、「QnA Service」が出来たら次は「Knowledge Base」だ！
さっきチャットボットの「記憶」に相当する機能だと説明したね？
チャットボットが質問にどう答えるか、それを決めるのがこの機能だ。
じゃあ、作っていこう。
一番初めに開いた QnA Maker のタブに戻るよ！
STEP2に「Refresh」というボタンがあるね、
それをクリックしよう。
そうするとさっき作った「QnA Service」の情報が
「Refresh」の下のリストで選べるようになっている。
ここでさっき取ったスクリーンショットが役に立つぞ！
「ディレクトリ」「サブスクリプション」「名前」を順に入れていってくれ！！
入力できたかな？
よしSTEP2完了だ、STEP3に進もう！
「Knowledge Base」の名前を決めよう。
そろそろ君もこのスマートな命名規則の良さがわかってきたんじゃないかな？
STEP3はこれだけだ！グレート！！
そしてSTEP4は省略！！
省略できるものは省略する、シンプルイズベスト さ！
ではSTEP5だ！
「Create your KB」をクリックしよう！
さあ、そうするとこんな画面が表示されたね？
ふむふむ、なるほど、1分 待てと言っているね。
よし、じゃあここでまた1分休憩だ！
～～～1分後～～～
こんな画面になったかな？
おめでとう！
これで空の「Knowledge Base」が用意できた。
ではこれにルールを作っていこう！
ここの「Add QnA pair」の横の「＋」ボタンをクリックすると入力欄が出現するよ！！
ここに、「Question」と「Answer」のペアを入力していくんだ！
好きなルールを入力してくれ！
でも今回はあくまでお手軽チャットボットだ。
簡単なルールだけにしておこう。
さて、入力が完了したかな？
じゃあ、右上の「Save and train」をクリックしよう。
おっとまたこいつが出たか。
じゃあ歌でも歌ってのんびり1分待とう。
～～～1分後～～～
ハレルヤ！ルールが作成されているぞ！！
これで「Knowledge Base」の完成だ！
Bot Service の作成
ここまでくれば後もう一息！
最後の大詰め「口と耳」となる「Bot Service」を作るぞ！
画面右上の「PUBLISH」をクリックしてくれ。
そうするとこんな画面になる。
もうわかるね？そう「Publish」をクリックだ。
OKわかった、1分休憩だ。
今君に一つの真実を教えよう。
チャットボットは30分で出来ると言ったが、その半分は休憩時間だ。
～～～1分後～～～
このページが表示されたかな？
よし、成功だ。
これで、「Bot Service」を作る準備がととのった。
「Create Bot」をクリックしてくれ。
そうすると新しいタブでこんな画面が開く。
「QnA Service」を作る時と似たような画面だ。
やることも大体同じだから例によって入力前後の画像を用意するからパパッと入力してくれ！
あ、くれぐれもサブスクリプションだけは自分で考えて入力してくれよ！
入力は完了したかな？
じゃあいよいよ最後の休憩時間だ。
「作成」ボタンをクリックしてくれ。
こうなったかな？
じゃあ、5分後にまた会おう！
～～～5分後～～～
ベルのところをクリックしてくれ！
この表示が出ているかな？
コングラッチュレーション！！
ついに「Bot Service」は完成だ！！
チャットボットを試す
よし、最後にチャットボットの確認だ！
「リソースに移動」をクリックしてくれ。
チャットボットのリソースページが開いたね！
この「テスト」の項目クリックするとチャットボットと会話できるインターフェースが現れるぞ！！
これがテスト用の会話インターフェースだ。
まず、下の入力欄に「ガンダム」と入れてみよう。
Enterキーを叩くか紙飛行機のマークをクリックすればメッセージ送信だ！
ちゃんと答えが返って来たね！
こうやって会話形式で質問と回答が表示されるのがチャットボットのインターフェースの標準的な構成さ！
よくあるチャットアプリと同じような見た目だね！！
これで全ての質問に対して、期待通りの回答が得られたことを確認できた！！
お疲れ様！
チャットボットの作成は以上で完了だ
どうだい？
30分で出来たかな？
これを先生に提出すれば自由研究はバッチリさ！！
あ、でも一つだけ気をつけてくれよ！
このチャットボットをそのままにしておくとお金がかかってしまうんだ！！
だから、作って一通り遊んだら消してしまおうね！！
え？
じゃあ提出出来ないじゃないかって？
おっとそうか！
そいつはうっかりしてた！！
え、うっかりしてたじゃない、
責任を取れだって？
うーん困ったなあ・・・
よし、じゃあこうしよう！
まずヤクルトの空き瓶をたくさん集めてきてくれ・・・
～ecbeingでは、自由な発想で次世代のコマースをエンジニアリングする仲間を大募集中です！～
