Twilio FlexとGoogle Dialogflow CXを連携〜デジタルチャネルを対象として

読む所要時間: 18 分

December 21, 2021
執筆者
Justin Young
Twilion
Hiroto Masaki
Twilion
レビュー担当者
Paul Kamp
Twilion
Maria Bermudez
Twilion
Stephenie Minami Nakajima
Twilion

Flex DialogflowCX jp

本稿では、Twilio FlexのデジタルチャネルをDialogflow CXボットと連携する方法を紹介します。以降ではSMSを使用する方法について説明します。SMSを使用する方法はあらゆるデジタルチャネルに応用できます。

必要条件

始める前に、いくつか設定する項目があります。効率よく進めるためにTwilio CLIのインストールも行います。

  1. （お持ちでない場合）Twilioアカウントを開設する
  2. Google Cloudプロジェクトを開設する
    1. プロジェクトの作成
    2. 課金の有効化
    3. APIの有効化（[Are you planning to use this API with App Engine or Compute Engine?] で [No, I'm not using them] を選択）
    4. サービスアカウントの作成および秘密鍵ファイルのダウンロード - 新しく作成したサービスアカウントページの [Key] タブを選択（ダウンロードする鍵はjson形式）
  4. Twilio Flexプロジェクトの設定（新規作成する場合はこちら）
  5. Twilio CLIとサーバーレスツールキットをインストール 〜 Flexプロジェクトの認証情報を使用してログインしてください。

Dialogflow CXエージェントの設定とテスト

エージェントの作成

本稿では、ボットを新規に作成するのでなく、オーダーとアカウント管理用のビルド済みエージェントを使用します。このビルド済みエージェントには、「I want to speak with a human」の緊急時出口パス（emergency exit path）などの多くのベストプラクティスが含まれています。ビルド済みエージェント | Dialogflow CX

オーダーとアカウント管理用エージェントをインポートします。完了すると次のようになります。

gdfcx-sample-agent-jp

エージェントのテスト

Dialogflow CXには、シミュレーターが組み込まれており、ボットの応答をテストしたり、後で再実行できるようテストケースを作成したりできます。

  • ページ右上の [Test Agent] ボタンをクリックしてシミュレーターを開きます。
  • メッセージテキストフィールドに「where is my order?」と入力します。注文番号を尋ねる返答が送信されます。
  • 「agent」と入力します。
  • 有人オペレーターへ転送中であることを知らせる返答が送信されます。

gdfcx-sample-agent-test-jp

デフォルトのFlex着信SMS動作のテスト

Dialogflowと接続する前に、まだテストしていなければ、FlexのデフォルトのSMS動作を確認しておく必要があります。

魔法のような機能の仕組み

上記で確認したFlexのデフォルトのSMS動作を大まかにまとめると、次のようになります。

flex-default-msging-flow-jp
  1. TwilioのプラットフォームでSMSを受信し、SMSがTwilio Studioに送られます。
  2. 新規Flexプロジェクト用のStudioフローが、SendMessageToAgentウィジェットを使用して、SMSメッセージをFlexエージェントに渡します。このウィジェットにより、TaskRouterにTask（タスク）が作成され、タスクを渡すWorkflow（ワークフロー）が指定されます。ワークフローは、タスクを処理するオペレーターを決める役割を担います。このウィジェットは、Studio Dashboard画面にアクセスして [Messaging Flow] をクリックすると見ることができます。
  3. FlexプロジェクトのTaskRouterワークフローがキュー [Everyone] を通じてタスクを配信します。キューの名前が示す通り、このキューを通じて配信されるタスクは誰でも担当できます。前述のテストではキュー上のオンライン状態のオペレーターはあなた1人だけでしたので、TaskRouterは受信メッセージというタスクの処理をあなたに割り当てます。
  4. Flexエージェントデスクトップは、デスクトップにログインしているユーザーに関するTaskRouter上のイベントを監視しています。TaskRouterによりタスクが割り当てられると、Flexエージェントデスクトップには、タスクを受け入れるか拒否するかの確認とともに、SMSメッセージへ対応するためのチャットUIが表示されます。

ここまでの動作確認においては自動応答機能は一切使用していません。SMSは直接オペレーターに送られました。一方で、問い合わせ対応の一部をオペレーターにいきなり送らないようにする自動応答機能が必要なので、以下では、Studioのフローロジックをもう少し高度化します。

Twilio Studioについて

ここで、Studioの基本的な概念を見ておきましょう。例えば、お客様の名前を尋ね、これから対応予定のオペレーターにこれから転送することを伝え、そして実際に転送するというシナリオを考えてみます。

  1. StudioのDashboard画面にアクセスして [Messaging Flow] をクリックします。
  2. [Send & Wait for Reply] ウィジェットをキャンバスにドラッグします。名前を尋ねるのに使用するウィジェットです。
  3. 次に、[Send Message] ウィジェットをキャンバスにドラッグします。オペレーターに転送することをお客様に伝えるために使用します。このウィジェットでは、お客様の名前を折り返し発話しています。仕組みはシンプルで、直前のウィジェットがsend_and_reply_1と名付けられていますが、その直前のウィジェットで受けた返答をウィジェット [Send Message] の送信対象のテキストフィールドで参照しています。この辺りの処理はLiquidテンプレート言語を使っています。以下は、今回のテストで想定している送信対象テキストの値です。

    Hi {{widgets.send_and_reply_1.inbound.Body}}! I'm not very smart yet, so let me get you to a human.

  4. ウィジェト間の点と点をつなぎ合わせると、次のようなフローができ上がります。[Publish] をクリックして、フローを発行します。

flex-default-msging-flow-2-jp

準備が整いましたので、Flexの電話番号にSMSメッセージを送り、関連付けられている上記Studioフローが起動されるのを待ちます。

flex-default-msging-flow-3-jp

上記Studioフローで設計済みの自動応答メッセージを受け取り、最終的にオペレーターにつながると、そのオペレーターからは、自動応答メッセージの軌跡を見ることができます。

flex-default-msging-flow-4-jp

Studioの基本的な使い方を確認したところで、更に高度化していきましょう。

前置きが長くなりましたが、本稿ではDialogflow CXのAPIを呼び出す必要があります。しかし、Studioの中ではコードは書けません。この課題を解決するのがTwilio Serverlessです！Twilio ServerlessはTwilio Functions（Node.jsコード）とTwilio Assets（ファイルストレージ）から構成されており、Twilioクラウド上にホストされたコードやファイルアセットを呼び出して利用することができます。さらに、StudioにはFunctionsを呼び出すことのできるウィジェットが標準装備されており、Functionsなどを通じてDialogflow CX APIと統合しつつ、フローの他のウィジェットに処理を継続させることもできます。

FunctionsとAssetsのデプロイ

まず、Google Dialogflow環境からパラメーターをいくつか取得する必要があります。Google Dialogflow AgentのURLを開き、以下URLの太字部分の情報を取得します。

https://dialogflow.cloud.google.com/cx/projects/<project-id>/locations/<location>/agents/<agent-id>/prebuilt

次にTwilio CLIでServerlessプロジェクトを作成します。以下のコマンドを実行し、Serverlessプロジェクトの土台が作成します。

twilio serverless:init dialogflow-cx --empty
cd dialogflow-cx

次の手順を行います。

  • Googleサービスアカウント認証情報キーファイル（JSON）を/assetsディレクトリにコピーし、名前をservice-account-key.private.jsonへと変更します。
  • 次のように、.envファイルにキー・バリューのペアを追加します。
    • DIALOGFLOW_CX_LANGUAGE_CODE=en
    • DIALOGFLOW_CX_PROJECT_ID=<project-id>
    • DIALOGFLOW_CX_LOCATION=<location>
    • DIALOGFLOW_CX_AGENT_ID=<agent-id>
  • お好きなコードエディターでdialogflow-cxフォルダを開きます。
  • npmを使用して@google-cloud/dialogflow-cxをインストールします。
  • 新規ファイルdialogflow-detect-intent.protected.jsを/functionsディレクトリに作成します。
  • 次のコードスニペットを/functions/dialogflow-detect-intent.protected.jsに追加します。（以下のコードブロックの右上部にマウスをホバーすると、コピーボタンが表示されますので、ご利用ください。）
// Imports the Google Cloud API library
const { SessionsClient } = require("@google-cloud/dialogflow-cx");

exports.handler = async function (context, event, callback) {
        let languageCode = context.DIALOGFLOW_CX_LANGUAGE_CODE;
        let query = event.utterance;

        // google requires an environment variable called GOOGLE_APPLICATION_CREDENTIALS that points to a file path with the service account key file (json) to authenticate into their API
        // to solve for this, we save the key file as a private asset, then use a helper function to find and return the path of the private asset.
        // lastly we set the environment variable dynamically at runtime so that it's in place when the sessions client is initialized
        process.env.GOOGLE_APPLICATION_CREDENTIALS =
                Runtime.getAssets()["/service-account-key.json"].path;

        // initialize the SessionsClient- https://googleapis.dev/nodejs/dialogflow-cx/latest/v3.SessionsClient.html
        const client = new SessionsClient({
                apiEndpoint: `${context.DIALOGFLOW_CX_LOCATION}-dialogflow.googleapis.com`,
        });

        // setup the detectIntentRequest - https://googleapis.dev/nodejs/dialogflow-cx/latest/google.cloud.dialogflow.cx.v3.DetectIntentRequest.html
        const request = {
                session: client.projectLocationAgentSessionPath(
                        context.DIALOGFLOW_CX_PROJECT_ID,
                        context.DIALOGFLOW_CX_LOCATION,
                        context.DIALOGFLOW_CX_AGENT_ID,
                        event.dialogflow_session_id
                ),
                queryInput: {
                        text: {
                                text: query,
                        },
                        languageCode,
                },
                queryParams: {
                        //  https://cloud.google.com/dialogflow/priv/docs/reference/rpc/google.cloud.dialogflow.v3alpha1?hl=en#queryparameters
                        analyzeQueryTextSentiment: true,
                },
        };

        // es6 async/await - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
        try {
                let [response] = await client.detectIntent(request);
                console.log(response);
                callback(null, response.queryResult);
        } catch (error) {
                console.error(error);
                callback(error);
        }
};

次に、このコードロジックをTwilioクラウドにデプロイする前に、ローカルで機能テストします。以下のコマンドを実行します。

twilio serverless:start

コードロジックが開始されると、ターミナルに次のメッセージが表示されます。

gdfcx-twserverless-start-jp

ブラウザを開き、「/dialogflow-detect-intent」パスにアクセスし、URLのクエリ文字列に「utterance」キーと「where is my order?」の値を追加します。典型的には、以下のようなURLになると思います。

http://localhost:3000/dialogflow-detect-intent?dialogflow_session_id=test&utterance=where%20is%20my%20order%3F

JSONメッセージがブラウザに表示されると思います。

JSON形式の表示ですのでデータモデルを理解しづらいかもしれません。その場合は、JSONViewで整形して確認してください。ローカル環境でのテストが成功したら、Twilioクラウドにデプロイします。

ターミナルで次のコマンドを実行します。

twilio serverless:deploy

完了したら、Twilioコンソール画面でFunctions Servicesにアクセスすると、デプロイされたサービスを確認できます。

Studioフローの設定

Dialogflowとの連携のコア部分が動作確認できたところで、Studioで作成するフローを見てみましょう。

自然なユーザー体験を実現するために、Studioフローにループロジックを作成し、お客様から複数の質問を受けられるようにします。あるいは、さらに複雑なデータ収集もできるようにしたいかもしれません。さらに、ループを終了してオペレーターに転送するための処理も必要です。

作成するフローの基本形は次のとおりです。

studio-gdfcx-jp

新しいStudioフローを作成して呼び出し用番号を付け換えなくても、あるいは、現在のStudioフローをウィジェット単位で変更するといったことをしなくても、実は簡単な方法があります。Studioフローのデータは内部的にはJSON形式で表現されており、コンソール画面上で手動で簡単にフローを更新できるのです。具体的には、Flexアカウントの [Messaging Flow] に戻って [Trigger] ウィジェットをクリックし、[Show Flow JSON] をクリックします。

フローのJSON表記をこのコードに置き換えます。

[Save] をクリックすると、画面上の見た目が数秒で新しいフローに置き換わります。実際には、テスト環境で実際に利用している変数を指し示すように、ウィジェット2つを更新する必要があります。

studio-gdfcx-2-jp

[DialogflowDetectIntent] ウィジェットを選択し、[Service]、[Environment]、[Function] の各パラメーターを設定します。

次に [SendToFlexAgent] ウィジェットを選択し、[Workflow] を [Assign to Anyone] に、[Channel] を [SMS] に設定します。

次に、Studioフローで [Publish] を押し、最終的なフローの発行作業を行います。あとは、SMS経由でDialogflow CXボットとの会話をお楽しみください！

まとめ

おめでとうございます。以上で完了です。作成したDialogflowボットを操作し、最新のメッセージフローの導入をお楽しみください。次のブログ投稿では、ボイスチャネルを対象としてDialogflow CXを連携させる方法を紹介する予定です。

Justin Young: Twilioのコンタクトセンタースペシャリスト。15年以上にわたりコンタクトセンター構築やコンサルティングを手がけ、デジタル変革とサービス自動化を推進。家族は妻と3人の子ども（4人目も誕生予定）。余暇は若年層スポーツのコーチに励んでいます。

関連投稿

関連リソース

A newspaper article

Twilio Docs

APIからSDK、サンプルアプリまで

言語とプラットフォームの API リファレンス ドキュメント、SDK、ヘルパー ライブラリ、クイックスタート、チュートリアル。
An Open book

リソース・センター

最新の電子ブック、業界レポート、ウェビナー

顧客エンゲージメントの専門家から学び、自社のコミュニケーションを改善しましょう。
User group reactions

Ahoy

Twilio の開発者コミュニティ ハブ

コミュニケーションとデジタル エンゲージメント エクスペリエンスを構築するためのベスト プラクティス、コード サンプル、インスピレーション。