【Dialogflow】コード無しで会話型チャットボットの作成

#1.はじめに
　この記事は[リンク情報システム](https://www.lis.co.jp/)「2019 Tech Connect Summer」のリレー記事です。
　engineer.hanzomon のグループメンバーによってリレーされます。
　[2019 Tech Connect Summer インデックスはこちら](https://qiita.com/dgkz/items/2862d5e6b77203a126b3)

　アドベントカレンダー8日目担当の@s-hchikaです。
　コードが書くことができなくても簡単にチャットボットを作成したいという人(自分含め)に対し、Dialogflowを使用したチャットボットの作成を紹介します。

#2.Dialogflowとは
　Dialogflowとは、自然言語での会話型インターフェースを構築するためのサービスです。
　Dialogflowで作成したチャットボットは、LINEやGoogleアシスタントなどのサービスに対応しており、連携した動作が可能です。
　
#3.【今回の目標】
　・Dialogflowを使用し、簡単な受け答えを行う。
　　<例>
　　[ユーザー]　　　　　　　　   　[ボット]　　　　　　
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/5e578d28-0724-cb39-9871-d870cc32566e.png"width=60% >



　・web上に表示して、確認する。

#4.Dialogflowのアカウント開設
　まずはDialogflowのアカウントを開設します。

####4-1 Dialogflowにアクセス
　[Dialogflow](https://dialogflow.com/)にアクセスし、[Sign up for free]をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/6fcf5dae-640e-47cf-1086-9901a8eb218a.png" width=60%>



####4-2 ログイン
　Googleアカウントを選択し、アクセスのリクエストを[許可]します。
　[Country of territory]を「Japan」とし、[Terms of Service]にチェックを入れ、[ACCEPT]をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/a75f64ca-49cc-5dff-4ec8-ee00c328fec2.png" width=60%>

　Dialogflowにログイン後、[CREATE AGENT]をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/0cfcbc7c-df31-be3b-7936-afa82304197e.png" width=60%>

#5.チャットボットの作成
###5-1 Agentの初期設定
　Agentの設定項目をそれぞれ以下のように設定し、[CREATE]をクリックします。
>・Agent name：「ChatBot」(任意の名前)
・DEFAULT LANGUAGE：「Japanese-ja」(言語選択)
・DEFAULT TIME ZONE：「(GMT+9:00)Asia/TOKYO」(時間選択)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/6a0e88d7-7005-713d-9ce1-5410cb0bb063.png)


###5-2 Entitiyの作成
　ここでは、ユーザーから取得したいキーワードを入力します。
　今回は場所の情報(キーワード)を得たいため、「半蔵門」とその同義語となる単語を入力します。
　 
　**[Entities]**をクリックします。
　下記の項目をぞれぞれ入力後、**[SAVE]**をクリック。
　今回は場所のEntitiy **「Place」** を作成します。
>・Entitiy name：「Place」(任意の名前)
・Define synonyms：チェックを入れる(同義語の定義)
・Enter reference value：「半蔵門」(キーワード)
・Enter synonym：「半蔵門駅」「半蔵門ホテル」など(同義語)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/fd6a5289-81e9-9c5c-fd4a-00c6c552cb71.png)

###5-3 Intentの作成
　次に、[Intent+]をクリックし、Intentを作成します。
　Intentでは、予測される質問やその受け答えを入力します。
　Intentには様々な項目があるため、今回作成のチャットボット入力例とともに説明していきます。


####5-3-1 質問の用意【Training phrases】
　まずは、チャットボット側へ問いかける質問を用意します。
　今回は「トイレの場所」の質問を用意します。
>【Training phrases】
・Add user expression：「半蔵門のトイレはどこですか」
 →ここに考えられる質問を入力して、Enterキーを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/6ace3a10-8bab-2e6a-8a19-f924a5de86d1.png)

####5-3-2 フレーズの選択【Action and parameters】
　Training phrasesに質問を入力すると、下記の画像のように「半蔵門」の単語に色が付きます。これは先ほど作成したEntitiy **「Place」** を自動で検出し、設定されています。
　また、今回場所の情報は必須のため[REQUIRED]にチェックを入れます。
>【Action and paramerters】
・REQUIRED：必須項目の場合チェックを入れる
・PARAMETER NAME：パラメータの名前
・ENTITY：システムの選択
・VALUE：値
・IS LIST：対応するパラメータの取得
・PROMPTS：必須の項目を聞き出す際の質問を入力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/089ffe7e-8ac6-d57e-fb1f-e0bb661a5101.png)

####5-3-3 回答の用意【Responses】
　つづいて、質問に対する回答を作成します。考えられる回答をそれぞれ入力していきます。
>【Responses】
・Enter a text response variant：「半蔵門駅」
 →ここに回答を入力していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/9746faa4-1bf6-4be4-40e0-835ce223fc72.png)

###5-4 テスト【Try it now】
　ここで一度テストをします。画面の右側の[Try it now]に質問を入力することで、どのように回答されるかというテストができます。
>【Try it now】
・USER SAYS：「半蔵門のトイレ」
・DEFAULT RESPONSE：「半蔵門駅」

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/3af71c13-b66a-1dc5-779e-ce9145cfc56f.png" width=40%>


#6 会話の導入
　テストにて簡単な動作を確認することができました！
　つづいて、「半蔵門のトイレはどこですか？」という問いかけに対し、「性別」を判断する要素と最後にチャットボット側からの「メッセージ」を付け加えます。
###6-1 Entityの追加
　新たに「Request」というEntityを追加します。ここには、性別を判断するキーワードを入力しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/e5428093-0d63-026f-f3b8-30d54b14da3d.png)

###6-2 Intentの追加設定
　5-3で作成したIntentに少し手を加えます。

####【Contexts】
　Contextsの「Add output context」に **Chree**と入力します。
　これで、他のIntentにこのIntentの内容を引き渡すことが出来ます。
>Add input context：Intentの引継ぎ
Add output context：Intentの受け渡し

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/555e54a0-0a08-d21b-cb7a-fa32ff6974d9.png)

####【Training phrases】
　追加の質問として、性別を判断する単語を入れた以下の2つを記入します。
>・半蔵門　男子トイレ
・半蔵門　女子トイレ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/689ba338-a25e-7977-5ae1-e62a9d7c3cba.png)

####【Action and parameters】
　placeに加えてRequestが自動で検出されました。
　RequestのREQUIREDにチェックを入れ、必須のパラメータとします。また、PROMPTSに必須の項目を聞き出す際の質問を入力をします。
>PROMPTS：男子トイレですか？女子トイレですか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/78c45609-154c-a1ab-9e84-2da65bb3ab80.png)


####【Responses】
　回答も少しだけ変更します。会話となるように、チャットボット側からさらに質問していきます。
>　＄：Parameter Nameの名称の前に＄マークをつけるとResponsesで利用することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/3fcacff6-1d6c-03f6-bae6-a72a703ff965.png)


###6-3 Intentの追加
　2つの追加Intentを作成します。
チャットボット側の質問「お急ぎですか？」に対するユーザーの回答に2パターンのメッセージを返します。

　Contextsで1つ目の会話においてchreeを引き継ぎ、5-3のIntentの作成方法と同様に作成します。
>【Contexts】
Add input Contexts：chree

**1つ目の追加Intent**
　「急いでいる」などというユーザーからの回答に対して、「頑張って！！！」というメッセージを返します。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/b7686cd6-feed-6e0d-7665-d331f5a15e82.png)

**2つ目の追加Intent**
　「急いでいない」などというユーザーからの回答に対して、「ゆっくりいこう！！！」というメッセージを返します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/11ceee2a-215f-3346-8921-db97e08f620a.png)

#7 結果
#### 7-1 Try it nowで確認してみた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/894e5ff8-a63c-0bd3-8574-cda8d49725b4.png)

#### 7-2 Web上で確認してみた
　[Integtations]をクリックし、WebDemoを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/771785b6-fd91-fe02-4ec4-9da7f0ba0e54.png)

　iframeコードを取得できます。
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/a713aee8-5b99-35cc-2a08-43b11c0e7289.png)


　Web上で確認できました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453533/6050ce93-fe53-65a9-de96-18be1dfe7ee7.png)


#8 最後に
　今回使用したDialogflowは、Wedブラウザや他のサービスとのリンクも可能であり、様々な場面で活用することが出来ると思いました。
　チャットボットに今まで触れたことがなかった自分でも簡単に作成することができたので、凄くおすすめのツールです！
　
　アドベントカレンダーもあと残り2日です！
　残りの記事もよろしくお願いします！