今なら間に合う!自由研究で作るチャットボット!!

f:id:ecb_smiyahara:20190830114855p:plainf:id:ecb_smiyahara:20190830114913p:plain


君にもできる! チャットボット!!

やあ、みんな!
夏休みの宿題は終わったかな?

え?
自由研究がまだだって?

そうだろうそうだろう、
僕もいつも2学期の2日目の夜に泣きながらヤクルトの空き瓶でロボットを作ったものさ!

今日はそんな君達のためにチャットボットの作り方を教えるよ!!

難しくないのかだって?
大丈夫!
うまく行けば30分で作れちゃうんだ!!

そうか!ようしわかった!僕に任せておけ!!
これで君も今日からAIエンジニアだ!!

 

【用意するもの】
・Azureアカウント


え!?
Azureアカウントを持っていない?

心配ないよ!!
まず「Azureアカウント 作り方」ってググるんだ!!
いっぱいヒットするからね!!
好きなサイトで作り方を参考にしてくれればいいさ!!


準備はできたかな?

 

ちなみにチャットボットの作成手順はこんな順番になっているから覚えておいてくれ!

  1. 「脳」となる「QnA Service」の作成
  2. 「記憶」となる「Knowledge Base」の作成
  3. 「口と耳」となる「Bot Service」の作成

 

OKじゃあさっそくはじめるよ!!

 

QnA Makerにアクセス

まず
https://www.qnamaker.ai/Create
にアクセスするんだ。

すでにサインイン済みだった場合はそのまま下のページが表示されるよ!

f:id:ecb_smiyahara:20190828223711p:plain

 


サインインしていない場合はサインインのための画面に遷移するけど、
大丈夫!用意したAzureアカウントでサインインしよう!!

 

QnA Service の作成

さてページが表示されたらまずSTEP1をやるよ!

 f:id:ecb_smiyahara:20190828223820p:plain

 

さっそく「Create a QnA service」のボタンをクリックしよう。

するとブラウザの別タブにこんなページが表示されるんだ。

f:id:ecb_smiyahara:20190828224325p:plain

 

このページで作るのは「QnA Service」、さっきの説明ではチャットボットの「脳」と説明したね!

よし、じゃあまずは「QnA Service」の名前をきめよう!

 

好きな名前にしていいよ!

え、考えるのが面倒くさいって?

やれやれ、随分とめんどくさがりだね!
じゃあ僕がイケてるハイセンスな名前をつけてあげよう!

f:id:ecb_smiyahara:20190828230139p:plain

 

どうだい?

これはプログラマーのみに伝わるクールでトラディショナルな命名方法さ!
イカスだろ?

よし、次はサブスクリプションだ!

f:id:ecb_smiyahara:20190828230615p:plain

このサブスクリプション名はあくまでサンプルだ!

実はここはお金に関係する大事な項目なんだ!
自分で決められなければお父さんかお母さんに決めて貰おう!!

次に価格レベルだね!

f:id:ecb_smiyahara:20190828231202p:plain

「F0」で良いだろう、安いに越したことはないからね!

:メモ:

価格など、リストボックスで値を選択する場合、リスボックスに何も出てこない場合があるよ!

f:id:ecb_smiyahara:20190828231520p:plain

こういった場合、F5でリロードすると問題は解決するけど、せっかく入れた値が全部消えてしまうから、タブを複製してから今まで入力した値を元のタブからコピーすると良いよ!

 

次はリソースグループだ。

新規作成をクリックして新しいリソースグループを作っていこう。

f:id:ecb_smiyahara:20190828231810p:plain

リソースグループの名前ももちろん好きな名前をつけて大丈夫だ!

考えるのがめんどくさいという効率重視の君は、

f:id:ecb_smiyahara:20190828232609p:plain

こんなゴキゲンな名前にするとハッピーさ!

さて、「OK」をクリックしてリソースグループの名前を決めてしまえば後は簡単だ。

下の入力前後の比較を参考にパパッと入れて行ってしまおう!

(ちなみにアプリ名は名前を入れると自動的に入力されるよ!)

【入力前】
f:id:ecb_smiyahara:20190829000333p:plain
【入力後】
f:id:ecb_smiyahara:20190829000630p:plain

 

もう一度言うけど、サブスクリプションだけは慎重にで決めてくれよ!

僕との約束だ!!

 

よし、ここまできたらここで一旦ページをのスクリーンショットを取るんだ。
名前とサブスクリプションと右上のディレクトリ名が分かるようになっていれば大丈夫!

f:id:ecb_smiyahara:20190829003349p:plain

 

 

スクリーンショットをとったらいよいよ「作成」ボタンをクリックしよう!

f:id:ecb_smiyahara:20190829003439p:plain


下の表記が出たかな?

イエイ!

f:id:ecb_smiyahara:20190829002436p:plain

これで「QnA Service」は出来たも同然だ。

一旦休憩して5分後に戻ってきてくれ!


~~~5分後~~~

 

さて、画面の右上を見てくれ

f:id:ecb_smiyahara:20190829002802p:plain

ベルのところに数字が出ているね?

これをクリックしよう。

f:id:ecb_smiyahara:20190829002903p:plain

こんな表示が出てきたかな?

 OK、「QnA Service」はこれで完成だ。

 

Knowledge Base の作成

さて、「QnA Service」が出来たら次は「Knowledge Base」だ!

さっきチャットボットの「記憶」に相当する機能だと説明したね?
チャットボットが質問にどう答えるか、それを決めるのがこの機能だ。

じゃあ、作っていこう。
一番初めに開いた QnA Maker のタブに戻るよ!

f:id:ecb_smiyahara:20190828223711p:plain

 

STEP2に「Refresh」というボタンがあるね、
それをクリックしよう。

 

そうするとさっき作った「QnA Service」の情報が
「Refresh」の下のリストで選べるようになっている。

ここでさっき取ったスクリーンショットが役に立つぞ!

「ディレクトリ」「サブスクリプション」「名前」を順に入れていってくれ!!

 f:id:ecb_smiyahara:20190829003913p:plain

 

入力できたかな?

よしSTEP2完了だ、STEP3に進もう!

 

f:id:ecb_smiyahara:20190829004028p:plain

「Knowledge Base」の名前を決めよう。

 

f:id:ecb_smiyahara:20190829004210p:plain

そろそろ君もこのスマートな命名規則の良さがわかってきたんじゃないかな?

STEP3はこれだけだ!グレート!!

 

そしてSTEP4は省略!!
省略できるものは省略する、シンプルイズベスト さ!

 

ではSTEP5だ!

f:id:ecb_smiyahara:20190829004522p:plain

「Create your KB」をクリックしよう!

さあ、そうするとこんな画面が表示されたね?

f:id:ecb_smiyahara:20190829004621p:plain

 

ふむふむ、なるほど、1分 待てと言っているね。

よし、じゃあここでまた1分休憩だ!

 

~~~1分後~~~

 

こんな画面になったかな?

f:id:ecb_smiyahara:20190829005038p:plain

おめでとう!
これで空の「Knowledge Base」が用意できた。

ではこれにルールを作っていこう!

f:id:ecb_smiyahara:20190829005220p:plain

ここの「Add QnA pair」の横の「+」ボタンをクリックすると入力欄が出現するよ!!

 

f:id:ecb_smiyahara:20190829005347p:plain

ここに、「Question」と「Answer」のペアを入力していくんだ!

好きなルールを入力してくれ!

でも今回はあくまでお手軽チャットボットだ。
簡単なルールだけにしておこう。

f:id:ecb_smiyahara:20190829005747p:plain

さて、入力が完了したかな?

じゃあ、右上の「Save and train」をクリックしよう。

f:id:ecb_smiyahara:20190829005905p:plain

 

f:id:ecb_smiyahara:20190829005954p:plain

おっとまたこいつが出たか。

じゃあ歌でも歌ってのんびり1分待とう。

 

~~~1分後~~~

 

f:id:ecb_smiyahara:20190829010145p:plain

ハレルヤ!ルールが作成されているぞ!!

これで「Knowledge Base」の完成だ!

 

Bot Service の作成

 

ここまでくれば後もう一息!

最後の大詰め「口と耳」となる「Bot Service」を作るぞ!

画面右上の「PUBLISH」をクリックしてくれ。

f:id:ecb_smiyahara:20190829010249p:plain

 

そうするとこんな画面になる。

f:id:ecb_smiyahara:20190829010503p:plain

 

もうわかるね?そう「Publish」をクリックだ。

f:id:ecb_smiyahara:20190829010608p:plain

 

f:id:ecb_smiyahara:20190829010931p:plain

 

OKわかった、1分休憩だ。
今君に一つの真実を教えよう。
チャットボットは30分で出来ると言ったが、その半分は休憩時間だ。

 

~~~1分後~~~

 

このページが表示されたかな?

f:id:ecb_smiyahara:20190829011505p:plain

よし、成功だ。

これで、「Bot Service」を作る準備がととのった。

 

「Create Bot」をクリックしてくれ。

f:id:ecb_smiyahara:20190829011715p:plain

そうすると新しいタブでこんな画面が開く。

f:id:ecb_smiyahara:20190829012238p:plain

「QnA Service」を作る時と似たような画面だ。

やることも大体同じだから例によって入力前後の画像を用意するからパパッと入力してくれ!

あ、くれぐれもサブスクリプションだけは自分で考えて入力してくれよ!

【入力前】
f:id:ecb_smiyahara:20190829012600p:plain
【入力後】
f:id:ecb_smiyahara:20190829012846p:plain

 

入力は完了したかな?

じゃあいよいよ最後の休憩時間だ。

「作成」ボタンをクリックしてくれ。

f:id:ecb_smiyahara:20190829013126p:plain

 

こうなったかな?

f:id:ecb_smiyahara:20190829013218p:plain

じゃあ、5分後にまた会おう!

 

~~~5分後~~~

 

ベルのところをクリックしてくれ!

f:id:ecb_smiyahara:20190829013406p:plain

この表示が出ているかな?

 

コングラッチュレーション!!
ついに「Bot Service」は完成だ!!

 

チャットボットを試す

よし、最後にチャットボットの確認だ!

「リソースに移動」をクリックしてくれ。

f:id:ecb_smiyahara:20190830171133p:plain

 

チャットボットのリソースページが開いたね!

f:id:ecb_smiyahara:20190829013619p:plain

この「テスト」の項目クリックするとチャットボットと会話できるインターフェースが現れるぞ!!

f:id:ecb_smiyahara:20190829013641p:plain

 

これがテスト用の会話インターフェースだ。

f:id:ecb_smiyahara:20190829013734p:plain

 

まず、下の入力欄に「ガンダム」と入れてみよう。

f:id:ecb_smiyahara:20190830163139p:plain

Enterキーを叩くか紙飛行機のマークをクリックすればメッセージ送信だ!

 

f:id:ecb_smiyahara:20190829014018p:plain

ちゃんと答えが返って来たね!

 

f:id:ecb_smiyahara:20190829014324p:plain

 こうやって会話形式で質問と回答が表示されるのがチャットボットのインターフェースの標準的な構成さ!

よくあるチャットアプリと同じような見た目だね!!

 

f:id:ecb_smiyahara:20190829014414p:plain

 これで全ての質問に対して、期待通りの回答が得られたことを確認できた!!

 

お疲れ様!

チャットボットの作成は以上で完了だ

どうだい?
30分で出来たかな?

これを先生に提出すれば自由研究はバッチリさ!!

あ、でも一つだけ気をつけてくれよ!
このチャットボットをそのままにしておくとお金がかかってしまうんだ!!

 

だから、作って一通り遊んだら消してしまおうね!!

 

え?
じゃあ提出出来ないじゃないかって?

おっとそうか!
そいつはうっかりしてた!!

 

え、うっかりしてたじゃない、
責任を取れだって?

 

うーん困ったなあ・・・
よし、じゃあこうしよう!
まずヤクルトの空き瓶をたくさん集めてきてくれ・・・

 

~ecbeingでは、自由な発想で次世代のコマースをエンジニアリングする仲間を大募集中です!~

careers.ecbeing.tech