Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@fuji3zpg(K Fujimoto)

第3回 顧客の電話をエージェントのブラウザで受ける - TwilioとRailsでミニマムコールセンターを作ろう

Last updated at Posted at 2017-05-18

別サイトで2014/4/12に投稿した記事です。別サイト閉鎖につき、移転しました。情報が古い可能性があるので、ご注意ください。

今回の流れ

今回は、エージェントはブラウザでコールを受けることにします。
それでは、早速、実装していきましょう。

Ruby on Railsで実装してみよう

新しいRailsプロジェクトの作成

$ rails new twilio_agent_browser
$ cd twilio_agent_browser

RubyでTwilioで制御するためのgemを Gemfile に追加

gem "twilio-ruby"

エージェントがブラウザで使うクライアントを作成

$ rails generate controller call client # コントローラ call_controller.rb とビュー client.html.erb を作成する

app/controllers/call_controller.rb に下記を追加

def client
  @client_name = default_client

  # 以下、エージェント用クライアントが使える機能を設定する
  account_sid = ENV['TWILIO_SID']
  auth_token = ENV['TWILIO_TOKEN']

  capability = Twilio::Util::Capability.new account_sid, auth_token
  capability.allow_client_incoming @client_name # 電話応答機能を有効に
  @token = capability.generate # エージェント用クライアントに設定するトークン
end

private

  def default_client
    "Agent1"
  end

clientメソッドでは、エージェント用クライアントが使える機能を設定します。

app/views/call/client.html.erb に下記を追加

<script type="text/javascript"
    src="//static.twilio.com/libs/twiliojs/1.1/twilio.min.js"></script>
<script type="text/javascript"
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<link href="//static0.twilio.com/packages/quickstart/client.css" type="text/css" rel="stylesheet" />

<script type="text/javascript">
  /* Capability Tokenと紐付いたクライアントを作成する */
  Twilio.Device.setup("<%= @token %>", {debug: true});

  /* エージェントが待機中（電話応答可能状態）になったら、ログ出力する */
  Twilio.Device.ready(function (device) {
    $("#log").text("クライアント '<%= @client_name %>' が待機中です。");
  });

  /* エラーをログ出力する */
  Twilio.Device.error(function (error) {
      $("#log").text("エラー： " + error.message);
  });

  /* コール切断をログ出力する */
  Twilio.Device.disconnect(function (conn) {
      $("#log").text("コールを切断しました。");
  });

  /* 電話受信をリスニングし、かかってきたら応答する */
  Twilio.Device.incoming(function (conn) {
    $("#log").text(conn.parameters.From + "から電話がかかってきました。");
    // 接続に応答する
    conn.accept();
  });

  /* コールを切断 */
  function hangup() {
    Twilio.Device.disconnectAll();
  }
</script>

<button class="hangup" onclick="hangup();">切断</button>

<div id="log">準備中...</div>

ルーティング routes.rb を確認する

get 'call/client'

エージェント用ブラウザの動作確認

  • エージェント用のブラウザを立ち上げて、 http://example.com/call/client にアクセスする（example.com はご自分のドメインに読み替えてください）。
  • 「クライアント 'Agent1' が待機中です。」と表示されたらOKです。

TwiMLを作成する

TwiMLとは、電話がつながったあと、Twilioがすることを定義する指示書です。Twilioからアクセスするため、インターネット上に置いてください。XML形式で記述します。

ルーティング routes.rb を設定する

post 'call/voice'

call#voice にはHTTPのpostメソッドでアクセスすることにします。

call_controller.rb に下記を追加

# voiceメソッドへのCSRFチェックをオフにする。voiceメソッドにPOSTメソッドを送る時に、オフにしておかないとエラーが発生する。
protect_from_forgery except: [:voice]

def voice
  response = Twilio::TwiML::Response.new do |r|
    # callerIdは、取得したTwilioの番号か、Twilioに認証された電話番号（Caller ID）を設定する
    r.Dial :callerId => ENV['TWILIO_CALL_FROM'] do |d|
      d.Client default_client()
    end
  end

  render xml: response.text
end

voiceメソッドの動作確認

voiceメソッドにアクセスして、正しくXMLを出力するか、テストしてみます。

curl -X POST http://example.com/call/voice -d ""

設定が正しければ、↓のようなTwiMLが返ってくるはずです。

<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Dial callerId="+xxx">
    <Client>Agent1</Client>
  </Dial>
</Response>

＊なお、私の環境（Mac）では、「-d ""」を付けないと、↓のエラーが発生しました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD><TITLE>Length Required</TITLE></HEAD>
  <BODY>
    <H1>Length Required</H1>
    WEBrick::HTTPStatus::LengthRequired
    <HR>
    <ADDRESS>
     WEBrick/1.3.1 (Ruby/2.0.0/2013-11-22) at
     localhost:3000
    </ADDRESS>
  </BODY>
</HTML>

テストコール準備

app/modelsの下に call.rb というモデルを追加

class Call
  def self.to_default_agent
    account_sid = ENV['TWILIO_SID'] # Twilioで取得したSID
    auth_token = ENV['TWILIO_TOKEN'] # Twilioで取得したトークン

    client = Twilio::REST::Client.new(account_sid, auth_token)

    client.account.calls.create(
      from: ENV['TWILIO_CALL_FROM'], # 発信元電話番号： 取得したTwilioの電話番号
      to:   ENV['TWILIO_CALL_TO'], # 発信先電話番号： トライアルの場合は、Twilioによって確認された発信先電話番号にのみ発信できます。Twilioの管理画面からご自分の携帯番号を設定することになろうかと思います。
      url: ENV['TWILIO_XML_URL'], # インターネット上にあるXML形式のファイル。電話がつながると、TwilioはこのURLに次にすべきことを尋ねます。今回は、"http://example.com/call/voice"を設定します。
      method: 'POST' # Twilioは、HPPTのGETメソッドを使って、上記のURLにリクエストします。
    )
  end
end

環境変数を設定

export TWILIO_SID=xxx
export TWILIO_TOKEN=xxx
export TWILIO_CALL_FROM=+8150xxx
export TWILIO_CALL_TO=+8180xxx
export TWILIO_XML_URL=http://example.com/call/voice

.bash_profile 辺りに上記の環境変数を設定しておくと便利です。

設定後、

source ~/.bash_profile

コマンドを実行して、追加した環境変数を有効にするのをお忘れなく。

Railsコンソールでテストコール

$ rails console
> Call.to_default_agent

トライアルの場合は、現在トライアルで使用中であるというTwilioアナウンスが流れた後、Twilioから自分の携帯番号にかかって接続し、次にTwiMLの指示で、Twilioはエージェントのブラウザに電話をかけます。
自動的にエージェント用クライアント（ブラウザ）が応答し、携帯とエージェントの通話がはじまります。

コールセンターをイメージして

次に、顧客の電話（トライアルではご自分の携帯電話）からTwilioの電話番号に電話して、エージェントのブラウザに着信させるという、より現実的なシナリオをやってみましょう。

これを実現するには、Twilio管理画面の「TWILIO電話番号」で、ご自分の電話番号を選んだ後、「音声通話」の"Request URL"として、「http://example.com/call/voice」と「HPPT POST」を設定します。

まとめ

携帯とエージェント用ブラウザで通話できたでしょうか？
今回でコールセンターをイメージできたのではないでしょうか。

サンプルコードのダウンロード

上記のサンプルコードは、Githubよりダウンロードできます。

https://github.com/fuji3zpg/twilio-agent-browser

参考資料

今回のブラウザ通話のサンプルは、Twilio Client Ruby Quickstartを参考にしました。少し前（2014年３月）は、日本語の翻訳が存在していたと思うのですが、ちょっと見つけられませんでした。

補足情報1

通話ログはTwilio管理画面から見られます。
https://jp.twilio.com/user/account/log/calls

各通話の日付をクリックすると、詳細画面が表示されます。
料金確認したい場合やデバグの際に、役に立つでしょう。

補足情報2

ちょっと試したいだけなのに、その都度、サーバにデプロイするのはシンドイという方は、 ProxyLocal という gemを検討するといいと思います。

$ gem install proxylocal # proxylocal をインストール
$ proxylocal 3000 --host my_host # このコマンドを叩くだけで、"http://my_host.t.proxylocal.com/"で、自分のRailsプロジェクトにインターネットからアクセスできます。

補足情報3

Twilioトライアルアカウントの詳細については、FAQの「無料トライアルアカウントの制限事項は何ですか?」をご覧ください。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?