7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

1 はじめに

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

2 ユーザシナリオ

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

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

##3 構成イメージ

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

36c8d83b-3905-238b-e28d-89b619d8989e.png

##4 DFの設定

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

①ChatBOTの新規作成(Agentの作成)

808146e4-c17c-20fa-5ea3-e9db367e2f16.png

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

②駅情報(Entity)の登録

まずはEntityを作成します。

70cbb3ae-fd60-d738-cf77-988873be4d88.png

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

③質問(Intent)作成

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

c291e15d-aaa5-d501-a485-86038d16fb32.png

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

bbaa6b2d-664c-45f2-abd9-41c2c688cdf6.png

③ロッカーの場所情報の取得(Fulfillment作成)

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

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

cdc9040d-63b0-8318-5026-ad5cd861e933.png

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

index.js
'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を有効にします。

7d8e4629-4777-088d-6439-4d9392de1804.png

##5 Web-Chat画面の作成

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

4fecfa2e-d979-a718-e22f-58f2622424bc.png

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

d44ae0e7-ab6b-595d-9a23-c89d413bb5a6.png

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

6c33e44e-e092-3659-bdf1-47b1e94fdbc9.png

##6 最後に

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

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

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

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

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?