Media Streamが双方向に対応し、スムーズな音声ボットが作れるようになりました!

こんにちは、Twilio事業部のkatsu.tです。
Twilio Media Streamの双方向通信が可能になりました。これにより、音声ストリームを用いることができるチャットボット構築サービス(Dialogflowなど)と連携することで滑らかな音声ボットを作成することができます。

本記事では、新しくなったTwilio Media StreamとDialogflowを使ったサンプルコードを元に音声ボットを構築していこうと思います。

Media Streamとは

Media Streamsとは、Twilioの通話音声にWebSocketを使用してリアルタイムにアクセスすることができるサービスです。
Media Streamsと他のサービス(TTSや感情分析エンジン)を組み合わせることでリアルタイムな文字起こしや感情分析が可能となります。

必要なもの

・Twilioアカウント
・Googleアカウント

Twilioアカウントの作成

Twilioアカウントをまだ作成していない方は、こちらよりアカウントの作成をお願いします。

Bundlesの設定

電話番号を購入するために、Twilioに個人情報を登録する必要があります。
詳しくは以下の記事をご覧ください。

電話番号の購入

まず、電話番号購入画面を開きます。

電話番号購入画面

購入したい国を選択して、「検索」をクリックします。

電話番号購入画面で国を選択

購入したい電話番号を選択して「購入」をクリックします。

電話番号購入画面で購入

電話番号の内容を確認して、「Next」をクリックします。

電話番号購入の確認画面

電話番号をご利用いただく方の属性に合わせて選択し、「Next」をクリックします。
法人のお客様:Business
個人のお客様:Individual

電話番号を利用する属性に合わせて選択

最後にBundlesの設定で作成した内容をそれぞれ選択して、「Buy」をクリックします。

Bundlesの設定で作成した内容で購入

Twilio CLIのセットアップ

Twilio CLIのセットアップについてはこちらの記事をご覧ください。

Dialogflow

Dialogflow APIの有効化

GCPコンソールにアクセスしDialogflow APIを有効化します。
APIとサービス画面を開きます。

Dialogflow APIを有効化

続いて「APIとサービスを有効化」をクリックします。

Dialogflow APIとサービスを有効化

検索欄に「Dialogflow」と入力します

Dialogflowを入力

検索結果が表示されたら「Dialogflow」をクリックします。

Dialogflowをクリック

「有効にする」をクリックしたら、準備OKです。

Dialogflow有効化のクリック

サービスアカウントの作成

APIとサービス画面を開きます。

DialogflowのAPIとサービス画面を開く

「認証情報」をクリックします。

Dialogflowの認証情報をクリックする

「認証情報を作成」をクリックし「サービスアカウント」を選択します。

Dialogflowの認証情報を作成してサービスアカウントを選択する

任意のサービスアカウント名を入力して、「作成」をクリックましす。

Dialogflowのサービスアカウント名を入力して作成をクリック

ロールにDialogflowのクライアントを追加します。

Dialogflowのクライアントを追加

「完了」をクリックします。

Dialogflowの完了をクリック

作成した、サービスアカウントを選択します。

Dialogflowのサービスアカウントを選択する

「鍵を追加」をクリックし、「新しい鍵を作成」を選択します。

Dialogflowの鍵を追加して作成

JSONを選択して「作成」をクリックします。

DialogflowのJSONを選択して鍵を作成

エージェントの作成

Dialogflowコンソールにアクセスして新しいエージェントを作成します。
左側のメニューで [Create Agent] をクリックします(すでに他のエージェントをお持ちの場合は、エージェント名をクリックし、一番下までスクロールして [Create new agent] をクリックします)。

Default LanguageにJapanese - jaを選択し、「CREATE」をクリックします。

Dialogflowで日本語を選択

作成できたらエージェント名の隣の歯車マークをクリックして、Project IDを控えておきます。

DialogflowのProject IDを控えておく

音声ボットの構築

ここからは実際にTwilioとDialogflowを使って音声ボットを構築していきます。

最初にソースコードをダウンロードします。
サンプルコードはこちら

$ git clone git@github.com:twilio/media-streams.git
    or
$ git clone https://github.com/twilio/media-streams.git

media-streams/node/dialogflow-integration内に事前準備で作成したサービスアカウントのjsonファイルを「google_creds.json」という名前でコピーします。

対象のフォルダへ移動します。

$ cd media-streams/node/dialogflow-integration/

対象フォルダへ移動したら、対応する言語を日本語に変更します。
dialogflow-utils.js内のlanguageCodeja-JPに変更します。。

const intentQueryAudioInput = {
    audioConfig: {
            audioEncoding: "AUDIO_ENCODING_MULAW",
            sampleRateHertz: 8000,
            languageCode: "ja-JP",  // ja-JPに変更する
            singleUtterance: true,
        },
        interimResults: false,
    };

    function createDetectStream(isFirst, sessionId, sessionPath, sessionClient) {
        let queryInput = intentQueryAudioInput;
        if (isFirst) {
            queryInput = {
                event: {
                    name: process.env.DIALOGFLOW_STARTING_EVENT_NAME,
                    languageCode: "ja-JP", // ja-JPに変更する
                },
            };
        }
        .....
    }

対応言語を日本語に変更したら、次は必要なモジュールをインストールします。

$ npm install

必要なモジュールを作成したら続いて環境変数設定を行います。

$ npx configure-env
    ? Your Twilio Account SID. Copy and paste this value from https://twilio.com/console › // TwilioアカウントSIDを入力してください。
    ? Your Twilio Auth Token. Copy and paste this value from https://twilio.com/console › // Auth Tokenを入力してください。
    ? Enter your Dialogflow project id › // DialogflowのプロジェクトIDを入力してください。
    ? The name of your starting Dialogflow event › // Dialogflowで一番最初に応答するイベント名を入力してください。
    ? We will redirect your call to this a Webhook that should return TwiML. › // Dialogflowが終了した時のリダイレクト先を入力してください。
    ? Location of your Google credential file. › // Googleサービスアカウントのキーファイル(.json)へのパスを入力してください。

サーバーの起動を行います。

$ npm start

最後に電話番号に起動したサーバーのURLを設定します。以下コマンドを実行するとngrokが起動し、Twilioからローカルサーバーにアクセスできるようになります。

twilio phone-numbers:update +8105XXXXXXXX(購入した電話番号) --voice-url=http://localhost:3000/twiml

テスト

無事、環境構築は完了です。
最後に実際に電話をかけて今までと比べて数段レスポンスがよくなったMedia Streamを用いた音声ボットをお試しください!

まとめ

今までTwilioで音声ボットをやろうとした時、Twilioで文字起こしを行うか録音した音声をボットに投げていたので、どうしても微妙な間が開いてしまっていました。
Media Streamに直接アクセスできるようなったことにより、以前より数段スムーズな受け答えが可能となりました!
是非お試しください!

アプリケーションエンジニア 葛 智紀

前職でiOS、Androidのネイティブアプリケーション開発、AngularやLaravelを用いたウェブアプリケーション開発に従事。
KDDIウェブコミュニケーションズではTwilioの最新情報の発信やTwilioを用いた地域課題解決を担当。
個人では、Google Developer Group Tokyoのオーガナイザーを務める。

この記事をシェア

すべての記事へ

Blog

Twilioビジネスセミナー Vol.62 Genesys Cloud × Twilioで実現する”クラウドファースト”コンタクトセンター

Blog

【Insightsシリーズ第3弾】Twilio Messaging Insightsがリリース!

Blog

Media Streamが双方向に対応し、スムーズな音声ボットが作れるようになりました!

Blog

クラウドコンタクトセンターリリース後に起きた失敗と改善について

Blog

二段階認証とは|メリット、種類、導入方法、二要素認証との違いは?

Blog

Twilio Authyを用いた二要素認証(二段階認証)の実装方法