Bot作成のために、GoogleのDialogflowを使ってみました。
今回、DialogflowのQuickstartドキュメントを元に、Bot作成のさわりだけを記事にまとめました。

環境

• Dialogflow ES

Dialogflowには、Dialogflow CX（Advanced）と Dialogflow ES（Standard）の 2 つのエディションがありますが、この記事で取り上げるのはESの方だけです。

対象

• Dialogflowというサービスの触りだけさらっと知りたい方
• DialogflowからAPIを利用する方法

GCPから利用する方法や、プロダクションで利用したい方向けの解説はありません。

Dialogflowとは？

DialogflowはざっくりGoogle製のBot等が作れるサービス。

Quickstarts

クイックスタート

Setup

設定

クイックスタートを動作させるだけなら設定は必要ありません。
Dialogflowのコンソールにログインしてエージェントを作成すれば良いです。

Dialogflowのコンソールからエージェントを作成すると、自動的にGCP(Google Cloud Platform)のプロジェクトが作成されます。

Dialogflowコンソールで作成したプロジェクトをGCPコンソールで確認するには、作成したエージェントの設定(歯車マーク)から、General→Project IDを確認して、そのProject IDのリンクからGCPのプロジェクトを開きます。

フルフィルメントで APIを利用する場合の注意点は、GCP(Google Cloud Platform)の無料枠を使い切っている場合、Dialogflowのコンソールで自動で作成されるGCPのプロジェクトの課金設定をする必要があります。

Dialogflowプロジェクトに課金を有効にする

GCP(Google Cloud Platform)のコンソールにログインします。

フルフィルメントからInline Editorを選択

OPEN CLOUD CONSOLEを選択

請求先アカウントを選択

SET ACCOUNT を押下

プロジェクトのダッシュボードに Billingが表示されます

Build an agent

エージェントの作成

上記の手順より、エージェントを作成します。
その後、サンプルファイルをインポートします。

Intents

インテンツ

サンプルファイルをインポートすると、デフォルトWelcomeインテントが下記のように設定されます。

サンプルインテントのテスト

Dialogflowコンソールの右側のシミュレータに入力すると、エージェントのテストができます。

シミュレータに入力すると、"Default Welcome Intent"の "Responses" のリストから自動で選択されてレスポンスが返されます。

APIレスポンス

"DIAGNOSTIC INFO"を押下すると、APIレスポンスを確認できます。

Fulfillment

フルフィルメント。

プログラムを使ってレスポンスを返すような処理を設定できます。
GCPのプロジェクトからAPIを作成しても良いのですが、今回はAPIを使った時の動きをさわりだけ確認するために、インラインエディタを利用します。

Inline Editor

インラインエディタを使って簡単にフルフィルメントを作成できます。
インラインエディタのプログラムはNodeのみのサポートです。
ライブラリにDialogflow フルフィルメント ライブラリを利用します。

フルフィルメントからInline EditorのDISABLEDをオンにします。

※"Billing Required" が表示されたら、GCPのコンソールから課金を有効にします。

デプロイ

DEPLOYを押下してサンプルコードをデプロイします。

デプロイの確認

デプロイが成功すると、GCPにCloud Functionsの関数として追加されます。

GCPコンソールのCloud Functionsを選択する

Cloud Functionsの画面

Dialogflow フルフィルメント ライブラリ

サンプルコードで利用している、Inline Editor用のライブラリです。

サンプルコード解説

'use strict';

// 1. firebase-functionsライブラリを読み込みます。
// https://firebase.google.com/docs/reference/functions
const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion} = require('dialogflow-fulfillment');

process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements


// 2. FirebaseでHTTPSリクエストを待ち受けます
// https://firebase.google.com/docs/reference/functions/providers_https_?hl=ja#onrequest
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {

  // https://github.com/dialogflow/dialogflow-fulfillment-nodejs/blob/master/src/dialogflow-fulfillment.js
  const agent = new WebhookClient({ request, response });
  console.log('Dialogflow Request headers: ' + JSON.stringify(request.headers));
  console.log('Dialogflow Request body: ' + JSON.stringify(request.body));

  function welcome(agent) {
    agent.add(`Welcome to my agent!`);
  }

  function fallback(agent) {
    agent.add(`I didn't understand`);
    agent.add(`I'm sorry, can you try again?`);
  }

  let intentMap = new Map();
  intentMap.set('Default Welcome Intent', welcome);
  intentMap.set('Default Fallback Intent', fallback);

  // 3. リクエストハンドラにwelcome,fallback関数をセットします。
  // https://github.com/dialogflow/dialogflow-fulfillment-nodejs/blob/master/src/dialogflow-fulfillment.js
  agent.handleRequest(intentMap);
});

1. firebase-functionsライブラリを読み込みます。

const functions = require('firebase-functions');

Cloud FunctionsのAPIをそのまま利用することなく、firebase SDKライブラリを利用して、Cloud Functionsの機能を実装できます。

2. FirebaseでHTTPSリクエストを待ち受けます

functions.https.onRequest((request, response) => {

HTTPSリクエストを待ち受けて、Expressサーバー形式のレスポンスを返します。

3. リクエストハンドラにwelcome,fallback関数をセットします。

agent.handleRequest(intentMap);

リクエストハンドラに関数をセットします。
HTTPSリクエストを受け付けた際に、ここでセットしたハンドラ関数が実行されます。

handleRequestメソッドは、webhookクライアントにコールバック関数を登録するイメージです。

参考