[Dialogflow] 駅のコインロッカーの場所を、WebChatで問合せを行い、自動で回答するシナリオを作ってみた

1 はじめに

Dialogflow（以下、DF）を使用して、駅のコインロッカーの場所を、WebChatで問合せを行い、自動で回答する仕組みを作ってみました。

2 ユーザシナリオ

ユーザシナリオは以下の通りです。

Q：コインロッカーの場所を教えて？
A：どちらのロッカーでしょうか？
Q：新橋駅です。
A：新橋駅のコインロッカーは右手にあります。

3 構成イメージ

全体の構成は以下のようなイメージです。

4 DFの設定

DFの設定手順は以下の通りです。

①ChatBOTの新規作成（Agentの作成）

Create new agentを選択し、Agent名、DEFAULT LANGUAGEを選択しAgentを作成します。

②駅情報（Entity）の登録

まずはEntityを作成します。

駅情報として、今回は、新橋駅、浜松町駅、田町駅の情報を登録しました。
Entity名は「lockerplace」とします。

③質問（Intent）作成

続いて、ロッカーの場所の質問をするIntentを作成します。

駅名の入力がない場合は、聞き返すようにしてみます。

③ロッカーの場所情報の取得（Fulfillment作成）

EntityとIntentのやり取りのみでは、ロッカーの場所の情報をボットが返事を行うことができません。
今回は、Fulfillmentを使って返事をするようにします。

まずは、FulfillmentのInline Editorを有効化します。

次にInline Editorにスクリプトを記載します。
ロッカー情報を、外部のDB等と連携させる方法も考えれらますが、
今回は、スクリプト上で返答を行います。

'use strict';
const functions = require('firebase-functions');
const { dialogflow } = require('actions-on-google');
const app = dialogflow();

app.intent('Hearing Intent', (conv,{lockerplace}) => {
    if (lockerplace == '新橋駅'){
        conv.ask('新橋駅のコインロッカーは右手にあります。');
    }else if (lockerplace == '浜松町駅'){
        conv.ask('浜松町駅のコインロッカーは左手にあります。');
    }else{
        conv.ask('新橋駅と浜松町駅以外わかりません');
    }
});

最後に、Intent設定に戻り、Fulfillmentを有効にします。

5 Web-Chat画面の作成

IntegrationsからWeb Demoを有効化します。

Web Demoをクリックすると、HTMLのソースが表示されますので、iframの部分をHTMLに張り付ければWebChatの完成です。

以下は、実際のWebChatの画面です。

6 最後に

今回は、DFを使用して、駅のコインロッカーの場所を、WebChatで問合せを行い、自動で回答する仕組みを作ってみました。WebChat以外にも、SlackやLINEといったチャネルからも簡単に連携することが可能です。

Fulfillmentの利用方法として、今回は、Inline Editorを利用しましたが（これは便利です。）、外部サーバやDBと連携した実装についても、今後検討していく予定です。

7 参考にさせていただいたリンク

https://4009.jp/post/2018-06-29-dialogflow/
https://yutakami.work/?p=447