メニュー

Expand
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?

RubyおよびRailsを使用したワンクリック通話

サーフィンするくらい簡単にエンドユーザーが連絡を取れるようにしたいですって? 今日はあなたのラッキーデーです!

Let's go over the step s necessary to implement click-to-call in a Ruby on Rails application.

クリック トゥー コール

  1. Webサイトの訪問者は電話番号をWebフォームに送信する。
  2. Webアプリケーションは送信を受け取り、TwilioへのHTTPリクエストを開始して、Twilioに通話の発信を始めるよう指示する。
  3. Twilioはリクエストを受け取り、ユーザーの電話に発信を開始する。
  4. ユーザーが電話に出る。
  5. After the call connects, we provide TwiML instructions to connect the user to our sales or support teams.

私達が学ぶこと

This tutorial demonstrates how to initialize a call using the Twilio REST API and how to create a call using the TwiML Say verb.

さぁ、はじめましょう! 下のボタンをクリックして、チュートリアルの次の手順に移動してください。

Set up your environment

Before we create our click-to-call application, we need to set up our environment first.

Let's put our Twilio credentials in a place where our application can access them. For this tutorial, we'll store them in environment variables that our application can read.

# Find your Account SID and Auth Token at twilio.com/console
export TWILIO_ACCOUNT_SID=AC2XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
export TWILIO_AUTH_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
export API_HOST=https://example.herokuapp.com
export TWILIO_NUMBER=+15551230987

Replace the Account_SID, Auth_Token, and Twilio_Number placeholder values with your unique values, which you can find in the Twilio Console. You can use an existing Twilio phone number or obtain a new number.

Twilio Console Credentials Location

        
        
        
        
        app/controllers/twilio_controller.rb

        続いて、使いやすいWebフォームの作成について見ていきましょう。

        Webフォーム

        For our solution, we'll need a form where the user can enter a phone number.

        No need to overthink this as the real goal is to POST the user's and sales team's phone numbers to your controller.

        さて、このフォームに必要なものはなんでしょうか?

        • 電話番号用の入力
        • 営業チームの電話番号用のもうひとつの入力欄
        • 送信ボタン。
              
              
              
              
              app/views/twilio/index.erb

              Webフォームを構築する

              app/views/twilio/index.erb

              Since the page doesn't need to render new content after clicking on submit, we've decided to implement the POST action via AJAX using jQuery. Let's take a look at that next.

              フォームを送信する

              クリックトゥーコール機能をよりシームレスにするために、Ajax を使用して非同期的にフォームを送信するようにしました。

              このコードは、jQueryを使用してこれを実装するひとつの方法を示しています。

              • ユーザーがフォーム要素を「送信」するのを待ちます。
              • フォームデータをコントローラーに送信します。
              • 送信が成功したかどうかをユーザーに知らせます。

              これは jQuery の $.ajax() メソッドの非常に一般的な実装ですが、通話の接続時にレスポンスメッセージを返していることに注意してください。

                    
                    
                    
                    
                    app/assets/javascripts/app.js

                    AJAXでフォームを送信する

                    app/assets/javascripts/app.js

                    Now that we have the frontend done let's build a controller that will receive this data and call the user. We'll start our exploration in the next step.

                    Instantiate a client object

                    First, we initiate a @client object with our Account SID and Auth Token. This is essentially our Ruby REST API handler, which we could use to send SMS (or a myriad of other things).

                    In this example, we need it to get access to account.calls. This is the object that we're going to use to create phone calls.

                          
                          
                          
                          
                          app/controllers/twilio_controller.rb

                          フォームのPOSTを処理する

                          app/controllers/twilio_controller.rb

                          Next, we'll look at making phone calls.

                          発信する

                          We'll use the REST API to make an outgoing phone call which requires us to pass a From number, a To number and a URL Parameter that tells Twilio what to do after it connects the call to our user.

                          In this case, Twilio needs to DIAL in the Agent once the call has been placed. We'll discuss this more in future steps.

                                
                                
                                
                                
                                app/controllers/twilio_controller.rb

                                続いて、Twilioに対して後悔するエンドポイントについて見ていきましょう。

                                The Connect endpoint

                                Twilio makes a request to our application when the call is created using the REST API. This means that we need to create an endpoint that is publicly available for Internet requests: we'll walk through a way to make your localhost accessible via ngrok a little later in this tutorial.

                                      
                                      
                                      
                                      
                                      app/controllers/twilio_controller.rb

                                      コアコードコントローラー

                                      app/controllers/twilio_controller.rb

                                      A publicly exposed URL has some drawbacks. Next, we'll look at making sure we don't leak any sensitive data.

                                      Twilioリクエストを検証する

                                      TwiML sometimes can contain sensitive user information such as phone numbers. If you're revealing sensitive information at a route, you'll want to make sure you're talking to Twilio.

                                      So, let's check that the request was made by Twilio before doing any operation on the /Connect endpoint.

                                      authenticate_twilio_requestメソッドはアプリケーションが受信したリクエストが、実際にTwilioからのものであるかどうかを確認する仕組みを提供します。 

                                            
                                            
                                            
                                            
                                            app/controllers/twilio_controller.rb

                                            確かにTwilioと通信しているか確認する

                                            app/controllers/twilio_controller.rb

                                            Now that we know a request originates from Twilio let's move on and look at the TwiML response we'll send.

                                            TwiMLを生成する

                                            TwiML is a set of verbs and nouns written in XML that Twilio reads as instructions.

                                            In this case, our instructions inform Twilio to SAY something to the user and then DIAL the support agent's number so the customer can talk to him or her.

                                            To make writing TwiML easy, many of the helper libraries have methods that generate TwiML for you. We use twilio-ruby to create a TwiML response that will instruct Twilio to SAY something.

                                                  
                                                  
                                                  
                                                  
                                                  app/controllers/twilio_controller.rb

                                                  Twilioに何か発話(Say)させる

                                                  app/controllers/twilio_controller.rb

                                                  And with that, you've helped us get a working click-to-call form, ready to be integrated into your own application.

                                                  Test your app locally

                                                  Now you can run and test your Twilio app.

                                                  However, you probably want to test it using a publicly available endpoint without having to go "public" with your app. The best option is to use ngrok.

                                                  Note: For more information about running the application, see the readme file in the app github repository.

                                                  About ngrok

                                                  ngrok generates a secure URL that forwards traffic to a port, usually 5000, on your localhost server. It allows you to run applications locally but make them a publicly available endpoint via secure tunneling. This allows you to test your application and do all the things you want your app to do but in a secure public space.

                                                  ngrok is an executable (ngrok.exe) that you run on the command line or terminal.

                                                  Setting Up ngrok

                                                  Head over to ngrok's website, download the ngrok.zip file for your OS of choice, then unzip the file into an easily accessible location.

                                                  For example, on Windows, you can place it in your \Users directory in \AppData\Roaming\<ngrok-directory-name>\ngrok.exe. Then, update your PATH environment variables to the location of the ngrok executable. On Linux or OSX, it's much easier (see the instructions on the ngrok site).

                                                  And that's it.

                                                  Accessing your app from an endpoint using ngrok

                                                  So, now you are ready to use ngrok.

                                                  Before you start ngrok, it might be a good idea to have your Twilio Console open.

                                                  For Mac and Linux, open a terminal and run this command to start ngrok:

                                                  $ ./ngrok http 4040
                                                  

                                                  On Windows, open a command prompt and run this command to start ngrok:

                                                  $ Path-to-ngrok> ngrok http 4040
                                                  

                                                  Alternately, you can start ngrok using the following command:

                                                  $ ngrok http 4040 -host-header="localhost:4040"
                                                  

                                                  The port number "4040" is arbitrary. If your local server is running on another port, replace "4040" in the command with the appropriate port number.

                                                  This will start ngrok. A running instance of ngrok will appear in the terminal showing the local web interface (in this case http://127.0.0.1:4040) and the public URL (in this case, https://28dd499b.ngrok.io).

                                                  ngrok-running

                                                  The forwarding public URL needs to be set in the Twilio Console. In the Console, select the active phone number you set in the environment configuration file and enter the public URL from ngrok (shown above) in the "A Call Comes In" field under Voice & Fax. Be sure to select Webhook from the dropdown list.

                                                  Each time you restart ngrok a new public URL will be generated. You will need to update this URL in the Console any time you restart ngrok.

                                                  Twilio Console Webhook Setting

                                                  And that's it. You now have a publicly available endpoint for your app, so now you can take a look at your running app and enter the phone numbers using your ngrok address: https://xxxxxx.ngrok.io

                                                  他に構築できるもの

                                                  次はどこでしょうか?

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

                                                  Thanks for checking this tutorial out! Tweet to us @twilio and let us know what you're building!

                                                  Jarod Reyes Ricky Holtz Jose Oliveros Agustin Camino Andrew Baker Paul Kamp Glenn Lea Kat King
                                                  Rate this page:

                                                  ヘルプが必要ですか?

                                                  誰しもが一度は考える「コーディングって難しい」。そんな時は、お問い合わせフォームから質問してください。 または、Stack Overflow でTwilioタグのついた情報から欲しいものを探してみましょう。