Edited at

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

More than 1 year has passed since last update.


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に連携させる