Zenn
株式会社エーピーコミュニケーションズPublicationへの投稿
🌥️

DialogFlow CXで天気予報チャットボットをつくる: Flow,Pages編

9mak
2024/03/27に公開
AI
Google Cloud
chatbot
Dialogflow CX
記事投稿キャンペーン2024 Google Cloud
tech

🌟 はじめに

おぐまです。

勉強も兼ねてDialogFlow CXを使用した天気予報チャットボットを作ります！

それぞれ設定項目を分割して説明していて、前回は Entityの作成 について説明しました。

  1. Intentの作成
  2. Entityの作成
  3. Flow,Pagesの作成 👉 ココ！
  4. ??? ※ここで作成したシンプルチャットボットを改造(応用)する

今回は3番の Flow,Pages について説明します。

👷‍♂️ 事前準備

  • Google Cloud Platform アカウント
  • DialogFlow CX Agent

https://zenn.dev/ap_com/articles/dialogflowcx-basic-guide

https://zenn.dev/ap_com/articles/dialogflow-chatbot-shuzo-weather-forecast-intent

https://zenn.dev/ap_com/articles/dialogflow-chatbot-shuzo-weather-forecast-entity

📖 ステップ

👉 Flowの理解

FlowはDialogFlow CXにおける会話の進行を管理するためのコンポーネントです。
フローを使用することで、特定の会話目的に沿った一連のインタラクション（Pagesを含む）を設計し、ユーザーの入力に応じた適切な応答やアクションを定義することができます。

フロー内では、さまざまなPages（会話の各ステップを表す）を組み合わせて、より複雑な会話フローを構築します。

📺 Flows画面の機能

alt

機能 オプション 説明
Default Start Flow デフォルトで作成されているFlow。新しいセッションが開始されると、このFlowから会話が始まります
Add Create flow 新しいカスタムFlowを作成します
Use Prebuilt flow 事前に構築されたFlowをエージェントに追加します、特定の一般的な会話パターンや機能を迅速に統合できます
Import flow 既存のFlowを外部ファイルからインポートします、Flowのバックアップを復元したり、他のプロジェクトからFlowを転送したりする場合便利です

📺 Flows作成画面の主な要素

alt

設定項目 説明
Display name Flowの表示名
Description Flowの目的や機能についての簡潔な説明
ML Settings マシンラーニング（ML）に関連する設定を調整します

※ML Settings以下の設定は今回不要のため省きます。利用するタイミングで以下参照ください。
https://cloud.google.com/dialogflow/cx/docs/concept/speech-models?hl=ja

👉 Flowの作成

  1. フローの新規作成:
    以下どちらかで Flows を作成開始する

    • DialogFlow CXコンソールのサイドバーから Flows 横の + を選択し、Create flow を押す
    • Flows list - Flows 横の + Add を選択し Create flow を押す

  2. フローの基本設定: Flow name (Display name) と Description を入力して Save を押す

👉 Pagesの理解

PagesはDialogFlow CX内のフローにおける個別の会話ステップです。
それぞれのページは特定の目的を持ち、ユーザーの入力を受けて特定の応答を行うためのインテントやフルフィルメント、条件付きで分岐(Routes)させることができます。

📺 Pages画面の機能

List_Page

機能 説明
Start Page デフォルトのフローが開始されるときに最初に遷移するページです
End Flow 現在アクティブなフローを終了し、現在のフローに遷移したページに戻ります。
End Session 現在のセッションを消去して、END_SESSION という名前の特別なページに遷移します。次のユーザー入力は、デフォルトの開始フローのスタートページでセッションを再起動します。
End Flow With Failure 現在アクティブなフローを終了し、現在のフローに遷移したページに戻ります。呼び出しページは、flow-failed 組み込みイベントを使用して、この遷移を処理できます。
End Flow With Human Escalation 現在アクティブなフローを終了し、現在のフローに遷移したページに戻ります。呼び出しページは、flow-failed-human-escalation 組み込みイベントを使用して、この遷移を処理できます。
End Flow With Cancellation 現在アクティブなフローを終了し、現在のフローに遷移したページに戻ります。呼び出しページは、flow-cancelled 組み込みイベントを使用して、この遷移を処理できます。
Add 新しいページを追加するためのオプション

📺 Pages作成画面の主な要素

Add_Page

設定カテゴリ 設定項目 説明
基本設定 Display name ページの表示名
Description ページの説明
Entry fulfillment Parameter presets 現在のパラメータ値を設定または上書きします
Generators AIモデルを使用して、動的な応答やテキストを生成します
Agent responses 対象のページに遷移してきたときのユーザーへの応答メッセージを定義します
Channel specific responses 定のチャネル（例えば、テキストメッセージやソーシャルメディアプラットフォーム）にのみ返される応答を設定できる
Webhook settings Webhookの使用を有効にできます
Advanced settings 同じページの音声設定、フローの音声設定、エージェントの音声設定をオーバーライドできます
Call companion settings コンパニオンの呼び出しの組み込み SMS 機能を呼び出せる
Send Call Companion SMS Call Companion SMSを送信する設定です
Parameter Display name パラメータの表示名
Entity type パラメータのエンティティタイプを指定
Description パラメータの説明
Required パラメータが必須かどうかを指定します
Is list パラメータがリスト（複数の値を持つ）かどうかを指定します
Redact in log ログに記録される際にパラメータの値をマスクするかどうかを設定します
Convert phonetic alphabets 音声入力の際に音声アルファベットを変換するかどうかの実験的な設定
Reprompt event handlers パラメータ取得失敗した後にエンドユーザーに再度プロンプトするために使用されるイベントハンドラを追加できる
DTMF settings DTMF（dual tone multi frequency）を受け付けるかどうかを設定でき、有効化した場合ユーザーは電話のキーパッドを使用して入力を行うことができる
Route Description ルートの説明、特定のインテントや条件が満たされたときにどのようなアクションが取られるかを説明します
Intent このルートが反応するインテント、ユーザーからの特定の発言や意図に基づいてアクションがトリガーされます
Condition ルートがトリガーされる条件
- Match AT LEAST ONE rule (OR): 一つ以上のルールにマッチする場合にアクションをトリガーします
- Match EVERY rule (AND): すべてのルールにマッチする場合にのみアクションをトリガーします
- Customize expression: カスタム式を使用して条件を指定します
Fulfillment ルートがトリガーされたときに実行されるアクション、詳細の設定項目は他Fulfillment画面と同じ
Transition ルートによってトリガーされるページまたはフローへの遷移
- Flow: 特定のフローに遷移します
- Page: 特定のページに遷移します
Add state handler(State Handler) Route groups ルートを再利用可能にするために定義したRoute
Event handlers エンドユーザー入力がどのインテントとも一致しない場合や会話以外で何かが起こったときに呼び出すカスタムイベントを定義できる
Data stores データからエンドユーザーの質問に対する答えを見つけるために使われる設定

👉 Pagesの作成

今回の天気予報チャットボットでは以下の設定をしていきます。
　- Display name
　- Entry fulfillment
　- Routes
具体的には、WeatherForecastのインテントに基づいたユーザーの質問に対して、Webhookで天気予報APIでGETリクエストし、その結果の一部で応答をするようにします。

  1. Display nameの設定: Pageの識別名として、Weather Forecast Pageを設定します。

  2. Entry fulfillmentの設定: ユーザーがこのページに最初に到達した際に表示されるメッセージです。今回のシナリオではオプショナルですが以下をEntry fulfillment👉Agent responses👉Agent saysにAddします。

    こんにちは！
天気予報チャットボットです。
今日の天気、特定の日付の天気、特定の場所の天気を尋ねてください。

  3. Routesの設定: WeatherForecastインテントを検出した場合に実行されるアクションを定義します。

    1. Start Pageの設定

      • Routesを選択しAdd routeでRouteを追加する。
      • Intentにデフォルトで作成されているDefault Welcome Intentを選択する。
      • TransitionでPageのWeather Forecast Pageを選択する。

    2. Weather Forecast Pageの設定
      a. Intentの指定: WeatherForecastインテントを選択します。
      b. Fulfillmentの設定:

      • Webhook settings
      • Enable webhookを選択します。
      • Create webhookを押してWebhook作成画面へ遷移します。
      • 以下パラメータに設定します。※記載ないものはデフォルトでOKです
      • 作成出来たら先ほどのFulfillment画面に戻ってTagを設定します。
      • Agent responses
      • Agentの応答として表示するメッセージを設定します。今回はAPIリクエストの応答を使ってユーザーに回答したいのでAgent saysセクションに以下をAddします。
      以下が天気予報です！
$session.params.Forecast

      c. Transitionの設定: 会話のフローをどのように進めるかを決定します。選択肢としては特定のPageへの遷移やフローまたはセッションの終了があります。今回はEnd Sessionを選択して、会話を終了させるようにします。

👉 Test Agentでのテスト

Test_Agent_Top

Dialogflow CXで設定したチャットボットをテストするには、Dialogflow CXコンソール内のTest Agentツールを使用します。
設定したフローが期待通りに機能するか確認できます。

  1. Test Agentの開始: Dialogflow CXコンソールの右上にある「Test Agent」ボタンをクリックして、テストウィンドウを開きます。

  2. ユーザーの発言の入力:

    • テストウィンドウで今回作成したFlow: Wheather Forecast Flow を選択します
    • テキスト入力フィールドに、「こんにちは！」と入力します
    • ~ (Start PageからWeather Forecast Pageへ遷移する) ~
    • テキスト入力フィールドに、「今日の天気は？」と入力します
    • ~ (Webhookでリクエストしたレスポンスが応答として返ってきます)

  3. 応答とフローの確認: 応答には以下が天気予報です！に続いて、Webhookから取得した天気予報のテキスト（$session.params.Forecastによって参照される）が含まれているはずです。

  4. 遷移とセッションの終了の確認: チャットボットが応答後、会話がEnd Sessionによって適切に終了しているかを確認します。再度チャット送ってみてStart Pageに遷移してたら問題ないです！

  5. 問題がある場合のトラブルシューティング:

    • 期待した応答が得られない場合は、インテントの設定、エンティティの抽出、Webhookの設定などを再確認してください。
    • WebhookのURL、リクエストメソッド（GET）、パラメータの設定が正しいか、またはCloud Functions内のコードで正しく外部APIからデータを取得し、適切なレスポンスを生成しているかを確認します。

🎉 まとめ

今回は、DialogFlow CXを使用して天気予報チャットボットを作成する際の FlowとPage の設定方法について詳しく解説しました。

天気予報APIにWebhookでリクエストして応答を利用してユーザー回答っていうところはできました！
が、実は今のAPIエンドポイントだと東京の天気予報しかとってこれてません😭😭

「ユーザーのメッセージからEntityで都道府県と日付抽出してエリアコード変換&日付の形整形してAPIリクエスト時にペイロードして」ができればいいんですけどやってません！！

デフォルトのDialogFlowcxのWebhook仕様の限界と自分のやる気の限界が、、大体基本の使い方はわかったので！！ここまでとします🙇🙇‍♀️🙇

疲れた。。

💡 参考

https://cloud.google.com/dialogflow/cx/docs/concept/flow
https://cloud.google.com/dialogflow/cx/docs/concept/page

GitHubで編集を提案
株式会社エーピーコミュニケーションズ
株式会社エーピーコミュニケーションズPublication

株式会社エーピーコミュニケーションズは、ITインフラ基盤・ネットワークセキュリティのプロフェッショナルとして、システムインテグレーションに加えシステム構築・運用の内製化支援や自動化サービスや、クラウドネイティブ/Platform Engineeringの導入支援、データ＆AI基盤に関連するサービスを提供しています。

Discussion