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


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

</br>
</br>
</br>
</br>
</br>


# 目標
今回のゴールはこちらです。
![スクリーンショット 2017-08-21 13.42.32.png](https://qiita-image-store.s3.amazonaws.com/0/192887/aa5e31cd-6d55-9260-2024-f3081626afc0.png)
「ニューヨークの天気は？」　と聞くと
「ニューヨークの天気は晴れです」　と答えてくれる
チャットボットを作ります。

</br>
</br>
</br>
</br>
</br>


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

</br>
</br>
</br>
</br>
</br>


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

[「googleアカウントの作成」](https://accounts.google.com/SignUp?hl=ja)から作成します。
![スクリーンショット 2017-08-15 16.27.32.png](https://qiita-image-store.s3.amazonaws.com/0/192887/f13d4029-7956-bca3-6c21-7d2e592cf323.png)
アカウントが作成でき、ログインした状態から始めます。



</br>
</br>
</br>
</br>
</br>


# 1. Dialogflowのサイトに登録する
無料でサイトに登録できます。
[Dialogflow](https://api.ai)にアクセスし、「Get Started for Free」でgoogleアカウントを使って、ログインします。


![API_2.png](https://qiita-image-store.s3.amazonaws.com/0/192887/a2030808-17e1-c461-b4ef-7f8f3bc4d0b4.png)

↓
![API_3.png](https://qiita-image-store.s3.amazonaws.com/0/192887/af0cb18f-8ddd-9792-ad94-4ed898c52054.png)



</br>
</br>
</br>
</br>
</br>


ログインができたら、中央右にある「CREATE AGENT」をクリックします。
![API_8.png](https://qiita-image-store.s3.amazonaws.com/0/192887/f5339e91-e803-adfb-b4c0-ccc8e120626a.png)

</br>
</br>
</br>
</br>
</br>

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

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

![API_10.png](https://qiita-image-store.s3.amazonaws.com/0/192887/1b151a8b-7470-3fed-04d3-593cbcefb010.png)


ここでは、

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

としました。
</br>
</br>
終わったら必ず「SAVE」をしてください。

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

</br>
</br>
</br>
</br>
</br>


# 2. 会話させる要素を入れる
今回は国名を入力すると、天気の情報を返してくれるチャットを作ります。

左のタブから「Intents」を選び、右上の「CREATE INTENT」をクリックします。
![スクリーンショット 2017-08-13 13.47.33.png](https://qiita-image-store.s3.amazonaws.com/0/192887/3f778851-7bbb-3605-03ac-8767767e2a14.png)

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

ここでは、

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

と入力してみました。
![スクリーンショット 2017-08-13 13.54.24.png](https://qiita-image-store.s3.amazonaws.com/0/192887/99e6c2db-ea3f-495c-3e09-f0db726c5605.png)
![スクリーンショット 2017-08-13 14.41.48.png](https://qiita-image-store.s3.amazonaws.com/0/192887/f5ba2d61-afda-ff14-7930-6502198b824e.png)

</br>
</br>


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

！！注意！！
---
「Agent training complete OK」が出るまでに、すこし時間がかかるので、気長に待ってください。
疲れてきた方、目のストレッチをするタイミングはこの待ち時間ですよ〜！
![スクリーンショット 2017-08-15 16.45.50.png](https://qiita-image-store.s3.amazonaws.com/0/192887/15804ba4-1c07-0e98-ee87-fcd8afd03c05.png)
![スクリーンショット 2017-08-15 16.45.14.png](https://qiita-image-store.s3.amazonaws.com/0/192887/09f94268-ca3f-e951-b909-1cd8cc2b5835.png)
![スクリーンショット 2017-08-15 16.45.22.png](https://qiita-image-store.s3.amazonaws.com/0/192887/8e5aa636-cbd1-1e04-def8-7a4d95c4f801.png)


</br>
</br>
</br>
</br>
</br>

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

>―――――――――――――――――――
Try it now：ニューヨークの天気は？
―――――――――――――――――――

![スクリーンショット 2017-08-13 14.01.49.png](https://qiita-image-store.s3.amazonaws.com/0/192887/287a3033-dab8-61aa-ec4c-a9970b5584d7.png)

　　↓
![スクリーンショット 2017-08-13 14.43.31.png](https://qiita-image-store.s3.amazonaws.com/0/192887/0a82b33a-d663-c5b0-037e-b453f89bfb01.png)


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


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



</br>
</br>
</br>

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

<details><summary>する！</summary>
見栄え良くしたいひとは、こちらを先にやってしまってもオーケーです。
・[API.AIをSlackに連携させる](http://qiita.com/ume1126/private/1fa38c430fc0e6248be8)
Slackというアプリに連携させて、外部サービスでも確認することができます。わーい！
</details>
もちろん飛ばして頂いてもOKです。
―――――――――――――――――――――
</br>
</br>
</br>
</br>
</br>


# 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](https://qiita-image-store.s3.amazonaws.com/0/192887/ac782f59-1d3f-72f6-230d-12ad9dfcfd73.png)
終わったら、必ず「SAVE」をします。

</br>
</br>
</br>
</br>
</br>

# 4. ためしてみる

もう一度「Intent」→「天気」に戻り、先ほどの天気の会話文を開きます。
既に入力してあるUser saysの「天気」の部分をドラッグすると、＠のリストが開かれます。
「Entities」で登録した＠weatherをクリックして設定します。
![スクリーンショット 2017-08-13 14.26.59.png](https://qiita-image-store.s3.amazonaws.com/0/192887/5e0b0f9e-609c-139d-fce1-f1a48f266fdc.png)
　　↓
![スクリーンショット 2017-08-13 14.34.32.png](https://qiita-image-store.s3.amazonaws.com/0/192887/158e10a3-3261-5be4-30f3-25eac672b0e5.png)
色が変わってこのようになれば成功です。


</br>
</br>



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

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

![スクリーンショット 2017-08-13 15.13.27.png](https://qiita-image-store.s3.amazonaws.com/0/192887/5b04d62a-22a6-5f2b-2803-2b734e862798.png)

自動で色分けされましたか？
「Entities」に登録しなかった　気温　は色がつかなかった人もいるでしょう。
「気温」をドラッグして、＠weatherを設定してみてください。
![スクリーンショット 2017-08-15 17.39.19.png](https://qiita-image-store.s3.amazonaws.com/0/192887/f0819b14-4f0e-6be4-ab77-d426f76addcb.png)
ばっちりですね！

</br>
</br>



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

>―――――――――――――――――――
Text Response：`$geo-city`の`$weather`は晴れです。
―――――――――――――――――――


![スクリーンショット 2017-08-13 14.52.40.png](https://qiita-image-store.s3.amazonaws.com/0/192887/f286d112-5253-8fc2-ca64-45479bfce3d4.png)
どうなるか想像しながら「SAVE」してください。

</br>
</br>


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


>―――――――――――――――――――
①
Try it now：ロンドンの空模様は？
―――――――――――――――――――

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


![スクリーンショット 2017-08-13 15.17.41.png](https://qiita-image-store.s3.amazonaws.com/0/192887/41aab1c0-347b-de3b-f1de-e1ab05143f26.png)

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

>―――――――――――――――――――
②
Try it now：パリの気温は？
―――――――――――――――――――

![スクリーンショット 2017-08-15 17.59.40.png](https://qiita-image-store.s3.amazonaws.com/0/192887/cd62ebeb-0f9f-82bd-25a5-53eab11a4915.png)

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


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

</br>
</br>
</br>
</br>
</br>

# 5. 修正する
では、「User says」に無いことを入れてみるとどうでしょう。

>―――――――――――――――――――
Try it now：ニューヨークの空模様は？
―――――――――――――――――――

![スクリーンショット 2017-08-13 15.03.48.png](https://qiita-image-store.s3.amazonaws.com/0/192887/80813431-b9fb-197c-19ef-2529d3c4b087.png)
わからないようです。
修正しましょう。
</br>
</br>

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

![スクリーンショット 2017-08-13 15.23.10.png](https://qiita-image-store.s3.amazonaws.com/0/192887/4b861843-b811-c2cd-dd73-c760d55e7826.png)


先ほど失敗した「ニューヨークの空模様は？」という会話の下にある
「Click to assign」から、レスポンスの正解である「天気」を指定します。
![スクリーンショット 2017-08-15 18.13.47.png](https://qiita-image-store.s3.amazonaws.com/0/192887/b7fb6d40-23da-82a1-c4d2-86d28f708ad1.png)
　　↓
![スクリーンショット 2017-08-13 15.04.37.png](https://qiita-image-store.s3.amazonaws.com/0/192887/983ea7cd-1d06-5a12-fd41-9e204c284ff2.png)

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

>―――――――――――――――――――
Try it now：ニューヨークの空模様は？
―――――――――――――――――――

![スクリーンショット 2017-08-13 15.05.19.png](https://qiita-image-store.s3.amazonaws.com/0/192887/11318d24-8c54-d6fc-d528-2abaa6929604.png)
今度はうまく回答できました！　成功です。

</br>
</br>
</br>
</br>
</br>



# おわりに
こんな感じでチャットボットはできています。

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

次→
・[Dialogflowで天気情報を呼び出す](http://qiita.com/ume1126/private/f60335179b1cee25fa2f)
・[DialogflowをSlackに連携させる](http://qiita.com/ume1126/private/1fa38c430fc0e6248be8)