前回Dialogflowからの直接応答について記載しましたが、あれだとあまり高度な返信ができないので、Web hookすることが出来るようになっています。

HTTPサーバを用意すると、より高度なことが出来るようになりますが、そこまでする必要がない場合に、Dialogflowと連携されているGoogle Cloud Functionsを使用することが提案されています。
やはり、難易度はDialogflowによる直接応答より上がりますが、テンプレートが用意されているので、少し頑張ればできそうです。

手順

  1. 前回のアプリ作成方法の記事に従って、ココまで実施
  2. Fulfillmentの登録
  3. Intentが発生したときに実行するFulfillmentの登録が必要になります。
    画面左側のメニュー「Fulfillment」を選択し、「Inline Editor(Powered by Cloud Functions for Firebase)」を有効にします。

    既にWelcome IntentとFallback用のActionハンドラが登録されているので、簡単な処理の追加を行いたいときは、そこに追加したIntentのハンドラを追加してあげれば可能です。

    // Create handlers for Dialogflow actions as well as a 'default' handler
    const actionHandlers = {
    // The default welcome intent has been matched, welcome the user (https://dialogflow.com/docs/events#default_welcome_intent)
    'input.welcome': () => {
                       : 省略
    },
    // The default fallback intent has been matched, try to recover (https://dialogflow.com/docs/intents#fallback_intents)
    'input.unknown': () => {
                       : 省略
    },
    // ★追加したIntent向けに処理を追加(START)
    'intent.tell.address': () => {
      if (requestSource === googleAssistantRequest) {
        sendGoogleResponse('了解しました。' + parameters['any'] + 'を購入して、' + parameters['address'] + 'に送付します'); // Send simple response to user
      } else {
        sendResponse('了解しました。' + parameters['any'] + 'を購入して、' + parameters['address'] + 'に送付します'); // Send simple response to user
      }
    },
    'intent.buy.anything': () => {
      if (requestSource === googleAssistantRequest) {
        sendGoogleResponse(parameters['any'] + 'で宜しいでしょうか?' + parameters['any'] + 'の送付先を教えてください'); // Send simple response to user
      } else {
        sendResponse(parameters['any'] + 'で宜しいでしょうか?' + parameters['any'] + 'の送付先を教えてください'); // Send simple response to user
      }
    },
    // ★追加したIntent向けに処理を追加(END)
    // Default handler for unknown or undefined actions
    'default': () => {
                       : 省略
    }
    

    上記のハンドラに設定している「intent.tell.address」や「intent.buy.anything」ですが、これは、Intentを登録した際に、Action欄に記載したものに合わせる必要があります。

    前回記載したように、ユーザからの入力に対してフィルタされている部分については、連想配列「request.body.result.parameters」(コード内では、それを変数"parameters"に設定している)にアクセスすることで読み込みが可能となっています。
    アクセスする際のキーはIntent内で登録した際の以下の名称になります。

    また、言語によって返却したい文言を変更したい場合は、「request.body.lang」に設定されているので、単純に切り替えたいのであれば、以下のように切り替えてあげることが可能です。
    if(request.body.lang === "ja"){
      sendGoogleResponse('Dialogflow agentへようこそ!'); // Send simple response to user
    }else{
      sendGoogleResponse('Hello, Welcome to my Dialogflow agent!'); // Send simple response to user
    }
    

  4. 更新したindex.jsをデプロイ
  5. 変更しただけでは、未だ反映されていないので、以下のDEPLOYボタンを押下してデプロイします。

    文法エラーなどのエラーが発生した場合、エラーが表示されるので、指摘された箇所を修正して、再度デプロイしましょう。

  6. アプリのデプロイ
  7. Google Cloud Functionsのデプロイが完了したので、忘れずにココに従って、アプリのデプロイを実施。
    ただし、一度アプリのデプロイが完了して結合後、解除しない限りアプリのデプロイはやり直さなくても問題です。

リッチテキストを返却

先の応答では、Dialogflowで直接返却するのと、あまり違わないのでリッチテキストを返却してみましょう。
APIとして、以下のパターンのものがデフォルトで用意されています。
名称概要イメージ
Basic Card イメージ、タイトル、サブタイトル、本文、ボタンを一つのカード上に表示したもの
List Selector リスト(縦方向)上に選択項目を並べて表示したもの
選択したら、イベント「actions_intent_OPTION」のIntentが通知される
Carousel Selector リスト(横方向)上に選択項目を並べて表示したもの
選択したら、イベント「actions_intent_OPTION」のIntentが通知される
Suggestion Chip 並び方はCarousel Selectorと同じように横方向に並ぶが、選択したとき、表示されている文言をユーザがインプット(しゃべった or タイプした or etc)したように通知される

List SelectorとCarousel Selectorによるユーザからの応答は以下のようなIntentを登録しておくことでハンドリングできます。
上記のIntentを登録すると、WebhookにAction「intent.result」(※ Action名称は任意)が通知されます。
通知され方としてAssistantApp.buildOptionItemの第一引数で指定した値がDialogflowApp.getSelectedOptionにて取得できるので、それを元にユーザの応答を切り分けられます。

サンプルアプリ

試しに作成したGoogle Cloud Functionsのコードを以下にアップしました。参考にしてみてください。
補足として、
  • Action「intent.buy.anything」向けのコードが記載されている箇所(index.jsの53 - 64行目)で、コールする関数を以下のように変更することで、応答の形式が変化します
  • 関数名称応答の形式
    sendGoogleShoppingResponseByBasicCardBasic Card形式
    sendGoogleShoppingResponseByListSelectorList Selector形式
    sendGoogleShoppingResponseByCarouselSelectorCarousel Selector形式
    sendGoogleShoppingResponseBySuggestionChipsSuggestion Chips形式

参考サイト

Getting started with Dialogflow fulfillment
Responses
https://developers.google.com/actions/reference/nodejs/DialogflowApp
https://developers.google.com/actions/reference/nodejs/RichResponse

コメントの投稿