Dialogflow チュートリアル | 簡単なチャットボットを作ってみる

この記事では、**最小限の手順**でとりあえず**動いているように見える**チャットボットを**コーディング無し**で作ってみます。この記事を書かれていることを行うと、Dialogflow を少し触ってみることができると思います。

お題は、日時と場所を伝えると天気を教えてくれるBot です。

# 成果物
このチュートリアルを通してできるチャットボットは以下のようなものです。

https://bot.dialogflow.com/d534cccb-773b-429a-8917-8781b40222d8 

# 作成手順
## 1. Google アカウントの準備とログイン
Google アカウントを作成し、[Dialogflow Console](https://console.dialogflow.com) にログインします。

## 2. Agent の作成

Agent とは Dialogflow 内のプロジェクトの単位になります。[公式用語集](https://dialogflow.com/docs/intro/glossary)では以下のように定義されています。

>A project that you can create in Dialogflow to handle specific conversational experiences; each agent can have its own intent mappings and corresponding fulfillment and entity definitions. Agents can also handle multiple languages, and have versions (for example, "dev" and "prod").

1. 画面左上のDialogflow アイコン下にある **▼** をクリックし、**Create new agent** を押します。
<a href="https://gyazo.com/7f2e1abfb94f01c9ae6149d6e42a5bf3"><img src="https://i.gyazo.com/7f2e1abfb94f01c9ae6149d6e42a5bf3.png" alt="Image from Gyazo" width="386"/></a>

2. Agent の名前と言語を設定します。ここでは、Agent名を**Weather**, 言語を**Japanese** としています。Agent名には日本語は設定できないのようなので、注意します。
<a href="https://gyazo.com/f1695346b94d19e4e9af8f2a28a0bcaf"><img src="https://i.gyazo.com/f1695346b94d19e4e9af8f2a28a0bcaf.png" alt="Image from Gyazo" width="923"/></a>

3. **CREATE** をクリックして、しばらく待つとAgent が作成されます！


## 3. Intent の作成
Intent とは、会話を通してユーザーが行いたいタスクの単位になります。例えば、「天気を聞く」や「ホテルを予約する」などでしょうか。[公式用語集](https://dialogflow.com/docs/intro/glossary)では以下のように定義されています。

> A goal or task that users want to do, such as ordering coffee or finding a piece of music. In Actions on Google, this is represented as a unique identifier and the corresponding user queries that can trigger the intent. When using Dialogflow, this refers to the intent mappings you define in your agent. 


1. 画面左のメニューから **Intents** をクリック
2. 画面上部の **CREATE INTENT** をクリック<a href="https://gyazo.com/1fc4dc0fcec53f1433baf1942a37f5f3"><img src="https://i.gyazo.com/1fc4dc0fcec53f1433baf1942a37f5f3.png" alt="Image from Gyazo" width="923"/></a>
3. 画面上部の Intent name に任意の名前を設定し、**SAVE** をクリック。ここでは、**天気** と入れます（日本語でOK）。<a href="https://gyazo.com/f552135ec13975ef3a565048f12584d5"><img src="https://i.gyazo.com/f552135ec13975ef3a565048f12584d5.png" alt="Image from Gyazo" width="890"/></a>
4. そのままの画面で、少し下にある **Training phrases** 欄の **ADD TRAINING PHRASES** をクリック（上の画像にも表示されています）
5. テキストボックスが表示されるので、ここでは **今日の島根の天気は？** と入力してEnter キーを押します。
<a href="https://gyazo.com/e11b085ad6997c61242a66fba23121e0"><img src="https://i.gyazo.com/e11b085ad6997c61242a66fba23121e0.png" alt="Image from Gyazo" width="810"/></a>
6. テキストボックス欄の下に先程入力した文字が出てきます。そこで、**島根** をドラッグして選択すると、このキーワードが何を表しているかを選択するリストが出てくるので、`@sys.location` を探して、クリックします。
<a href="https://gyazo.com/b7e2f805fee82c4d3b1c4c46f9de96b4"><img src="https://i.gyazo.com/b7e2f805fee82c4d3b1c4c46f9de96b4.png" alt="Image from Gyazo" width="800"/></a>
7. 同様に、**今日** に対して、`@sys.date` を割り当てます。
8. 5.-7. をフレーズを変えて何度か行います。語尾の**？** を消してみたり、日付を指定してみたり、いろいろやってみましょう。
<a href="https://gyazo.com/6a48b8c96c15f0087152e87facaab0cc"><img src="https://i.gyazo.com/6a48b8c96c15f0087152e87facaab0cc.png" alt="Image from Gyazo" width="776"/></a>
9. 画面上の**SAVE** をクリックします。

## 4. Response の作成
トレーニングしたフレーズに対して、応答文を作成します。

1. 先程と同じ画面の下に行くと **Responses** という欄があるので、**ADD RESPONSE** をクリックします。
<a href="https://gyazo.com/0cab3e0dbc33e284e0436df889db0a7a"><img src="https://i.gyazo.com/0cab3e0dbc33e284e0436df889db0a7a.png" alt="Image from Gyazo" width="803"/></a>
2. テキストボックスが表示されるので、以下のように入力します。**$** がついているものは、変数として扱われ、Bot でユーザーが入力した値が入ります。ユーザーが入力した文章から変数に入れるワードを切り取るのは、先程のトレーニングをもとにDialogflow がやってくれます。例えば、`$location` には **島根** や **大阪** などが入ります。
<a href="https://gyazo.com/627d97aed19560dddff0fc2b2a9eaa27"><img src="https://i.gyazo.com/627d97aed19560dddff0fc2b2a9eaa27.png" alt="Image from Gyazo" width="764"/></a>

3. 同様に曇りや雨のパターンも作ってしまいましょう。複数パターンを入れると、この中からランダムに応答文が決められます。
4. **SAVE** をクリックします。
5. 応答文がちゃんと返ってくるかチェックします。画面右上のテキストボックスに、**明日の北海道の天気は？** などの文を入れてみましょう。先程入力した応答文が返ってきたら成功です。
<a href="https://gyazo.com/94037f66ad06b4a3a19a9ce0ea1b67d4"><img src="https://i.gyazo.com/94037f66ad06b4a3a19a9ce0ea1b67d4.png" alt="Image from Gyazo" width="341"/></a>

## 5. 不足情報を補完する対話を追加
ここまでの設定では、**今日の天気は？** や **兵庫の天気は？** など、「場所」と「日付」のどちらかが欠けていると、ちゃんとした応答が返ってきません。ここでは、足りない情報をBot から聞いてくれるような動作を追加します。

1. 先程と同じ画面内の **Action and parameters** 欄を開きます。
<a href="https://gyazo.com/e9673f22821f3fda63e8a4c91d9d9305"><img src="https://i.gyazo.com/e9673f22821f3fda63e8a4c91d9d9305.png" alt="Image from Gyazo" width="775"/></a>
2. **location**, **date** に対して、**REQURED** チェックを入れます。
3. すると、右側に **PROMPTS** という列が追加されるので、 **Define Prompts** をクリックします。
4. テキストボックスに、その情報が欠落していたときに問い合わせる文章を入力します。
<a href="https://gyazo.com/28dcb1548e2d731193d1bb28fa2066d6"><img src="https://i.gyazo.com/28dcb1548e2d731193d1bb28fa2066d6.png" alt="Image from Gyazo" width="643"/></a>
5. **date** に対しても同様に行います。そして、一旦 **SAVE**。
<a href="https://gyazo.com/7da75c4e79840b51bf3e8309fa0fdea8"><img src="https://i.gyazo.com/7da75c4e79840b51bf3e8309fa0fdea8.png" alt="Image from Gyazo" width="737"/></a>
6. **Training phrases** で、情報が欠落した場合のトレーニングを何フレーズか行い、 **SAVE** します。
<a href="https://gyazo.com/2d692dbcfabf5379de8ca7279be9757a"><img src="https://i.gyazo.com/2d692dbcfabf5379de8ca7279be9757a.png" alt="Image from Gyazo" width="754"/></a>
7. 画面右側で **今日の天気は？** と入力して、問い合わせが返ってきたら成功です。
<a href="https://gyazo.com/6fca19043f98d0c9c3e11e10b0c61c6e"><img src="https://i.gyazo.com/6fca19043f98d0c9c3e11e10b0c61c6e.png" alt="Image from Gyazo" width="351"/></a>

## 5. 公開する
ここで作成したAgent を公開してみます。Dialogflow では、Slack や Google Home などを通して簡単に公開する方法がありますが、今回はシンプルにWebページを使った Demo として公開してみます。

1. 画面左のメニューから **Integrations** をクリック
2. **Web Demo** をクリック
<a href="https://gyazo.com/99898a172e2bc7bccfc9a45d8b105642"><img src="https://i.gyazo.com/99898a172e2bc7bccfc9a45d8b105642.png" alt="Image from Gyazo" width="779"/></a>
3. ポップアップ上部のスイッチを **ON** にする
[![Screenshot from Gyazo](https://gyazo.com/d82dbcb5d2fd4e0ba4c4a6731e087b5f/raw)](https://gyazo.com/d82dbcb5d2fd4e0ba4c4a6731e087b5f)
4. ボットのURLが表示されるので、アクセスしてちゃんと動作すれば完了！


# このあと
今回は、**date** や **location** など予め準備されているパラメータしか使いませんでしたが、**Entity** を使用すると開発者側でパラメータの定義を追加することができます。

また、今回はノーコーディングで行い、天気の情報もランダムに返すことしかできませんでしたが、**Fulfillment** を使って、取得した情報を処理して応答文を作成したりすることもできるみたいです。今回でいうと、**Date** や **Location** の情報から実際の天気の情報をどこからか取得する感じでしょうか。

何れにせよ、ここで紹介した機能はごく一部なのでぜひいろいろと触ってみてください。