メニュー

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Node.jsおよびExpressを使用した自動アンケート

大勢の人々からフィードバックを収集する必要がある場合は、Twilio Voice と SMS を使用して独自の自動調査を実装すると、時間を大幅に節約できます。それがソーシャルサービスプログラムの関係者であろうとフィールドサービス組織の関係者であろうと、素早く独自の調査を設定して、電話またはテキストメッセージで構造化データを収集できます。自動調査が高レベルでどのように機能するのかを以下に示します。

  1. エンドユーザーは、調査電話番号に電話をかけるか SMS 送信します。
  2. Twilio は、その通話またはテキストを取得し、応答方法を指示するためにアプリケーションへの HTTP リクエストを作成します。
  3. Your web application serves up TwiML instructions to Gather or Record the user input over the phone, or prompts for text input with Message.
  4. 各質問の後に、Twilio はユーザーの入力を使ってサーバーに別のリクエストを発行します。ユーザーの入力は、アプリケーションによってデータベースに保存されます。
  5. アプリケーションは、次の質問をするか調査を終了するための命令を使用して TwiML レスポンスを Twilio に返します。

私達が学ぶこと

This How-To demonstrates how to use TwiML to deliver a survey that can be completed via voice call. The survey actually works via SMS text messages, too, but we're going to focus on the looping logic necessary to conduct an interview over the phone. We will create a voice call flow using the Say, Record and Gather TwiML verbs.

また、複数のウェブホックリクエストにわたるデータベースでカンバセーションの状態を維持する方法についても学びます。自動調査のほかに、これらの手法を適用して、より複雑な IVR システムやテキストメッセージインターフェイスを実装できます。

Instacart uses Twilio to power their customer service surveys and integrate that feedback into their customer database. Read more here.

        
        
        
        
        package.json
        ここをクリックしてはじめましょう!

        このアプリケーションについて

        ほとんどの Node.js ウェブアプリケーションと同様に、このアプリケーションも、npm 経由でインストールされた多数の比較的小さなモジュールに依存して、HTTP リクエストの処理とデータの保存を行います。このアプリケーションの主要モジュールは以下のとおりです。

        • express - アプリケーションへの HTTP リクエストに応答できるようにする一般的なウェブフレームワーク。
        • mongoose - MongoDB 用の Object/Document Mapper(ODM)。
        • twilio - Twilio Node モジュールは、TwiML レスポンスの生成を支援してインタビューを推進します。
              
              
              
              
              package.json
              Bootstrap the application

              アプリケーションのブートストラップ

              これは、ウェブアプリケーションを提供するために実行する Node ファイルです。対象となる HTTP ポートと Mongoose を使用してデータを保存するために必要な MongoDB データベース接続文字列を含む外部ファイルからアプリケーションの設定をロードします。

              また、ウェブアプリケーションによって処理される 4 つのルートも定義します。そのうちの 3 つのルートはウェブホックです。Twilio 調査電話番号で着信通話またはテキストを受信するか、トランスクリプションジョブの結果の準備ができると、Twilio によってウェブホックが要求されます。4 番目のルートは、データベースから調査の結果を取得するためにレポーティング UI によって使用されます。

                    
                    
                    
                    
                    index.js

                    アプリケーションが完全に設定されたので、Twilio と TwiML を使用して音声インタビューを実装するために必要な高レベルのステップを見てみましょう。

                    インタビューループとは?

                    音声インタビューループ

                    The user can enter input for your survey over the phone using either their phone's keypad or by speaking. After each interaction Twilio will make an HTTP request to your web application with either the string of keys the user pressed or a URL to a recording of their voice input.

                          
                          
                          
                          
                          routes/voice.js

                          ユーザーの入力を処理および保存し、カンバセーションの現在の状態を維持してユーザーに返信するのはアプリケーションの責任です。このフローを調べて、アプリケーションが実際にどのように機能するのかを見てみましょう。

                          Configure your application to work with Twilio

                          通話への応答

                          インタビュープロセスを開始するには、着信通話またはテキストの取得時に、いずれかの Twilio 番号を設定してウェブアプリケーションに HTTP リクエストを送信する必要があります(ここでは音声側に焦点を当てていますが、アプリケーションはテキストメッセージも受け入れます)。

                          いずれかの番号をクリックして、サーバーを指し示す Voice URL と Message URL を設定します。コードでは、経路はそれぞれ /voice/message になっています。

                          自動アンケートのWebhookセットアップ

                          If you don't already have a server configured to use as your webhook, ngrok is a great tool for testing webhooks locally.

                          We've configured our webhooks in the Twilio Console. Next let's see how to respond to requests.

                          Respond to a voice call

                          通話への応答

                          The voice route maps to this Express handler function, which takes an HTTP request and HTTP response as arguments. From the request, we can access the phone number of the person calling in by the From POST parameter - we can use this to uniquely identify a person taking the survey.

                          We can also access the RecordingUrl, which contains any voice input from the user. Digits may also be present, which contains the string of keys entered by the user on their keypad. If this is the user's first call to our system or they failed to enter any input to the previous question, these values might be blank Strings.

                          また、TwimlResponse オブジェクトも作成します。このオブジェクトを使用して、最終的に Twilio のリクエストに対するレスポンスとしてレンダリングできる一連の XML を構築します。このオブジェクトは手の込んだことは一切しません。プログラムの実行に従って有効な TwiML 文字列を徐々に組み立てるために使用できる JavaScript オブジェクトを単に提供します。

                                
                                
                                
                                
                                routes/voice.js

                                We've seen how to handle requests to our webhooks. Now lets go deeper into how to generate TwiML to redirect our users to the next question and generate speech from text.

                                Ask a question!

                                質問をする

                                If either the user did not enter any input, it's the first question in the survey, or there's still another question after the current one, we will build a TwiML response that will ask the next question.

                                We define a few inner functions here to help us build our response. respond completes our TwiML response and sends XML content back to Twilio. say is shorthand for appending a string of text that will be read back to the user with Twilio TTS (text-to-speech) engine.

                                      
                                      
                                      
                                      
                                      routes/voice.js
                                      Gather user responses

                                      質問をする

                                      TwiML レスポンスでは、Gather タグまたは Record タグを含めてユーザーからの入力を収集する必要があります。どちらのタグを使用するかは、調査の質問タイプによって決まります。

                                      In the Record use case, we also provide a transcription callback URL. Unlike Gather and Record, the transcription callback happens outside the loop of the call, sometime in the very near future (several seconds rather than minutes). So while you can't count on having the transcript results during the flow of the call, you can add the transcript to your database record to give the response a chance to help enrich that data a bit.

                                      ここでのもう 1 つの注意事項は、Twilio のトランスクリプションサービスは自動化されており、常に極めて正確ではないということです。トランスクリプションの正確さが不可欠である場合は、Rev.com などの翻訳者によるサービスの使用を検討してください。

                                            
                                            
                                            
                                            
                                            routes/voice.js

                                            Now that we know how to ask questions and gather user input. Lets see how to store the survey state.

                                            Where are we in this conversation?

                                            カンバセーションの状態の更新

                                            ユーザーのレスポンスを保存し、ユーザーとのカンバセーションの状態を維持することは、サーバー側アプリケーションのモデルレイヤーで最適に処理される問題です。そのため、MongoDB に裏打ちされた Mongoose モデルを使用してこれを処理します。

                                            コントローラーからの調査状態の抽出には、テキストメッセージからの調査入力の処理にそれを再利用できるという利点もあります。#winning!

                                                  
                                                  
                                                  
                                                  
                                                  routes/voice.js

                                                  We have a general idea of how we want to persist survey state. Lets go into more details and have a look at what our schema looks like.

                                                  Mongoose スキーマ

                                                  Mongoose スキーマ

                                                  モデルでは、MongoDB に挿入するドキュメントのフォームを制約および検証できるようにするスキーマを作成します。ただし、Mixed タイプを使用すると、任意の JavaScript オブジェクトを responses 配列に保存できるため、ユーザーの応答を保存するために使用するオブジェクトによって、ある程度の柔軟性が得られます。

                                                        
                                                        
                                                        
                                                        
                                                        models/SurveyResponse.js

                                                        Define survey response model schema

                                                        models/SurveyResponse.js

                                                        Next, lets see how we will keep track of our data by using the type property on our models.

                                                        Store survey responses

                                                        レスポンスの保存

                                                        ユーザーからのレスポンスを保存する前に、送信された生の文字列値を、調査データの分析および視覚化の際に扱いやすいデータタイプに変換します。

                                                              
                                                              
                                                              
                                                              
                                                              models/SurveyResponse.js

                                                              Convert and save user responses

                                                              models/SurveyResponse.js

                                                              We've seen how to persist answers to our questions. Next we'll see how guide the user to the next question.

                                                              Step through the survey flow

                                                              次の質問をキューに追加する

                                                              現在のレスポンスが保存されたら、調査内の次の質問のインデックスを使用して、コントローラーへのコールバックを呼び出します。これは、調査の実際の長さよりも長くなる可能性があります。つまり、質問をすることは終了となります。

                                                                    
                                                                    
                                                                    
                                                                    
                                                                    models/SurveyResponse.js

                                                                    質問の終了後は、人々がどのように調査に応答したのかを確認したいと思うかもしれません。データの視覚化にはあまり多くの時間をかけませんが、このサンプルアプリケーションには、それに取り組む方法を示すコードを少し含めました。

                                                                    調査結果を表示する

                                                                    結果の確認

                                                                    このアプリケーションの静的アセットディレクトリには、調査質問の結果を表示するためのマークアップを含む index.html ファイルがあります。そのファイルは、Express アプリケーションに Ajax リクエストを発行し、調査から最後の 100 個の結果を取得してここに表示します。

                                                                    電話調査レスポンスについては、アプリケーションに送信された転写テキストに加えて、録音を聞くためのリンクがあります。

                                                                          
                                                                          
                                                                          
                                                                          
                                                                          public/index.html

                                                                          Sometimes, the results aren't enough. So lets see how we can drill deeper and hear the actual recordings.

                                                                          Listen to survey recordings

                                                                          Twilio 録音の再生

                                                                          録音リンクを動的にページに挿入する JavaScript では、Twilio から送信された同じ RecordingUrl を新しいウィンドウで開きます。これは十分に機能しますが、場合によっては、より堅牢な音声ライブラリ(Buzz など)を備えたページで直接再生することを検討する可能性もあります。HTML 5 音声で再生されるように録音を準備した場合、各録音は WAV または MP3 フォーマットで利用できるようになります。

                                                                                
                                                                                
                                                                                
                                                                                
                                                                                public/index.js
                                                                                これで以上です!

                                                                                これで終了

                                                                                And that's it! You can reload the page on your localhost in your browser and watch as the results fly in from your users.

                                                                                      
                                                                                      
                                                                                      
                                                                                      
                                                                                      public/index.js
                                                                                      関連トピック

                                                                                      関連トピック

                                                                                      Twilio を使う Node.js 開発者であれば、他のチュートリアルもお楽しみください。

                                                                                      ワンクリック通話

                                                                                      Learn how to use Twilio Client to convert web traffic into phone calls with the click of a button.

                                                                                      two factor authentication

                                                                                      Twilio 対応 Authy を使って Web アプリに二要素認証(2FA)を実装する方法を学びます。

                                                                                      これは役に立ちましたか?

                                                                                      Thanks for checking this tutorial out! If you have any feedback to share with us, we'd love to hear it. Connect with us on Twitter and let us know what you build!

                                                                                      Kevin Whinnery Jose Oliveros Agustin Camino Orlando Hidalgo Kat King Andrew Baker Paul Kamp
                                                                                      Rate this page:

                                                                                      ヘルプが必要ですか?

                                                                                      We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.