api.ai
dialogflow
umum

Dialogflowでチャットボットをつくってみる

Dialogflow とは?

コード不要で、簡単にチャットボットを作るためのサービスです。
2016年9月にDialogflowのチームをGoogleが買収しました。
日本語に対応しています。
※名称が api.ai→Dialogflowになっております。





目標

今回のゴールはこちらです。
スクリーンショット 2017-08-21 13.42.32.png
「ニューヨークの天気は?」 と聞くと
「ニューヨークの天気は晴れです」 と答えてくれる
チャットボットを作ります。





目次

  1. Dialogflowに登録する
  2. 会話する要素を入れる
  3. 同義語を追加する
  4. ためしてみる
  5. 修正する





0.準備

Dialogflowはgoogleアカウントを使用してログインします。
まずは googleアカウントを準備しましょう。

「googleアカウントの作成」から作成します。
スクリーンショット 2017-08-15 16.27.32.png
アカウントが作成でき、ログインした状態から始めます。





1. Dialogflowのサイトに登録する

無料でサイトに登録できます。
Dialogflowにアクセスし、「Get Started for Free」でgoogleアカウントを使って、ログインします。

API_2.png


API_3.png





ログインができたら、中央右にある「CREATE AGENT」をクリックします。
API_8.png





以下の内容をセットします。

―――――――――――――――――――
・Agent name:会話ロボットの名前
・DESCRIPTION:「会話ロボット」の補足内容を書く(書かなくてもOK)
・LANGUAGE:日本語
・DEFAULT TIME ZONE:(GMT+9:00)Japan
―――――――――――――――――――

API_10.png

ここでは、

―――――――――――――――――――
・Agent name:otenki_bot
・DESCRIPTION:天気を呼び出すボットです。
・LANGUAGE:日本語
・DEFAULT TIME ZONE:(GMT+9:00)Japan
―――――――――――――――――――

としました。


終わったら必ず「SAVE」をしてください。

!!注意!!

今後「SAVE」の指示が多発します。
これを忘れると、せっかく頑張った作業が水の泡に……なんてことがあり得るので、
ポケモン・ドラクエばりの、あるいはイラレフォトショばりの こまめな「SAVE」を心がけてください。





2. 会話させる要素を入れる

今回は国名を入力すると、天気の情報を返してくれるチャットを作ります。

左のタブから「Intents」を選び、右上の「CREATE INTENT」をクリックします。
スクリーンショット 2017-08-13 13.47.33.png

―――――――――――――――――――
・Intent name:会話のタイトル(わかりやすいもの)
・User says:ユーザーが入力する会話文
・Response:会話文に対するBOTの返答
―――――――――――――――――――

ここでは、

―――――――――――――――――――
・Intent name:天気
・User says:ニューヨークの天気は?
・Response:$sys.geo-cityの天気は晴れです。
―――――――――――――――――――

と入力してみました。
スクリーンショット 2017-08-13 13.54.24.png
スクリーンショット 2017-08-13 14.41.48.png


「SAVE」を忘れずにどうぞ。
右下に「Agent training complete OK」と出たら、トレーニングが開始できます。

!!注意!!

「Agent training complete OK」が出るまでに、すこし時間がかかるので、気長に待ってください。
疲れてきた方、目のストレッチをするタイミングはこの待ち時間ですよ〜!
スクリーンショット 2017-08-15 16.45.50.png
スクリーンショット 2017-08-15 16.45.14.png
スクリーンショット 2017-08-15 16.45.22.png





右の枠でトレーニングができるので「Try it now」に会話を打ち込んでみましょう。

―――――――――――――――――――
Try it now:ニューヨークの天気は?
―――――――――――――――――――

スクリーンショット 2017-08-13 14.01.49.png

  ↓
スクリーンショット 2017-08-13 14.43.31.png

「DEFAULT RESPONSE」に、先ほど入力したレスポンスが出てくれば成功です。
さっそく、目標クリア!!!!

API.AIのスゴイとこ紹介(クリック)
API.AIには、デフォルトで都市名($sys.geo-city)や日付($sys.date)の情報が入っています。
サンフランシスコ/シカゴ/ロンドン/ニューヨーク
今日/昨日/明日/来週の月曜日 などなど…
「$---」をレスポンスに入れることで、入力に応じた回答(VALUE)を引っ張って来ることができます。
なーんてらくちん!



――――――――余談――――――――――
さて、疲れてきましたか?
疲れてきましたね〜〜〜
一気に見栄えを良くしましょうか?

する!
見栄え良くしたいひとは、こちらを先にやってしまってもオーケーです。
API.AIをSlackに連携させる
Slackというアプリに連携させて、外部サービスでも確認することができます。わーい!

もちろん飛ばして頂いてもOKです。
―――――――――――――――――――――




3. 同義語を追加する

さて、各単語の表現にも様々なものがあります。

左のタブから「Entities」を選び、右上の「CREATE ENTITY」をクリックします。

―――――――――――――――――――
・Entity name:ラベルの名前(半角英数字)
・Enter reference value:単語の総称、意味するもの
・Enter synonym:同義語
―――――――――――――――――――

枠の左側に、単語名を、右側に同義語を定義していきます。
enterキー、tabキー、; で次へ進めます。
今回は、天気の定義を幅広く設定しました。

―――――――――――――――――――
・Entity name:weather(半角英数字)
・Enter reference value:天気
・Enter synonym:天気/天候/気象/空模様……
―――――――――――――――――――

日本語の場合、漢字とひらがななど、様々なバリエーションで書いておくと、より認識度が上がります。
スクリーンショット 2017-08-13 14.23.20.png
終わったら、必ず「SAVE」をします。





4. ためしてみる

もう一度「Intent」→「天気」に戻り、先ほどの天気の会話文を開きます。
既に入力してあるUser saysの「天気」の部分をドラッグすると、@のリストが開かれます。
「Entities」で登録した@weatherをクリックして設定します。
スクリーンショット 2017-08-13 14.26.59.png
  ↓
スクリーンショット 2017-08-13 14.34.32.png
色が変わってこのようになれば成功です。


「User says」を複数登録することで、より返答率が上がるので以下のように入力してみます。

―――――――――――――――――――
User says:
パリの気温は?
ロンドンの空模様は?
ニューヨークの天気は?
―――――――――――――――――――

スクリーンショット 2017-08-13 15.13.27.png

自動で色分けされましたか?
「Entities」に登録しなかった 気温 は色がつかなかった人もいるでしょう。
「気温」をドラッグして、@weatherを設定してみてください。
スクリーンショット 2017-08-15 17.39.19.png
ばっちりですね!


ついでにページ下部の「Response」もこのように変えておきましょう。

―――――――――――――――――――
Text Response:$geo-city$weatherは晴れです。
―――――――――――――――――――

スクリーンショット 2017-08-13 14.52.40.png
どうなるか想像しながら「SAVE」してください。


「Try it now」で確認してみましょう。
2パターンやってみます。

―――――――――――――――――――

Try it now:ロンドンの空模様は?
―――――――――――――――――――

①を入力すると、このような結果になります。

スクリーンショット 2017-08-13 15.17.41.png

入力した「空模様」が、回答では「天気」に変わっていますね。成功です!
「Entities」で同義語を定義したので、定義したワードは全て「天気」に置き換わります。

―――――――――――――――――――

Try it now:パリの気温は?
―――――――――――――――――――

スクリーンショット 2017-08-15 17.59.40.png

こちらは先ほどドラッグして色を変えた部分…
同義語定義ではないので天気にはならず、入力された「気温」がそのままボットの回答で利用されます。
うまく使い分けてみてください。

(「パリの気温が晴れ」というのはオカシイですね…Entitiesに登録するか、レスポンスを変えたほうがよかったかもしれません…)





5. 修正する

では、「User says」に無いことを入れてみるとどうでしょう。

―――――――――――――――――――
Try it now:ニューヨークの空模様は?
―――――――――――――――――――

スクリーンショット 2017-08-13 15.03.48.png
わからないようです。
修正しましょう。

左のメニューから「Training」を選択、
ダイアログ "ニューヨークの天気は?” を選択すると、今までの失敗した会話が一覧で見れます。

スクリーンショット 2017-08-13 15.23.10.png

先ほど失敗した「ニューヨークの空模様は?」という会話の下にある
「Click to assign」から、レスポンスの正解である「天気」を指定します。
スクリーンショット 2017-08-15 18.13.47.png
  ↓
スクリーンショット 2017-08-13 15.04.37.png

「APPROVE」で実行させ、「Try it now」でもう一度ためしてみましょう。

―――――――――――――――――――
Try it now:ニューヨークの空模様は?
―――――――――――――――――――

スクリーンショット 2017-08-13 15.05.19.png
今度はうまく回答できました! 成功です。





おわりに

こんな感じでチャットボットはできています。

「User says」をたくさん入れて、学ばせる要素を増やし、
「Training」で反省を繰り返すことで学習をくりかえします。
より精度の高いチャットボットを目指しましょう〜!

次→
Dialogflowで天気情報を呼び出す
DialogflowをSlackに連携させる