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

やること

今回は、顧客の用件に応じて、番号を入力してもらって、担当するエージェントにコールを振り分けてみます。
普段、再配達や修理依頼などで、こういったシーンを経験する機会があると思います。

電話のシナリオ

２名のエージェントがブラウザでログインする
顧客がTwilio番号に電話する
顧客に「お問い合わせの場合は１、注文の場合は２を押してください」という番号入力アナウンスを流す
顧客が番号を入力する
顧客が「１」を押すと、エージェントの「Agent1」へ、それ以外は、「Agent2」へ電話をつなげる
顧客が電話を切る

Ruby on Railsで実装してみよう

前回のプロジェクトに追加していく

前回使ったプロジェクトに機能追加していきましょう。
今回から始めたい方は、 https://github.com/fuji3zpg/twilio-agent-browser のリポジトリをダウンロードしてください。

git clone git@github.com:fuji3zpg/twilio-agent-browser.git
cd twilio-agent-browser/
rails server

http://localhost:3000/call/clientで前回までの状態になるはずです。

＊ただし、まだTwilioアカウントを取得していなかったり、環境変数が設定されていないと動きません。
その場合は、第3回の手順に沿って、やってみてください。

複数人のエージェントが対応できるようにする

前回はエージェントの「Agent1」だけで対応しましたが、今回は顧客が「１」を押した場合と「２」を押した場合があるので、「Agent1」と「Agent2」のエージェントを扱うように変更します。

def client
  # パラメータ"client"でクライアント名を設定する。未設定の場合は、デフォルトのエージェント名を使用する
  @client_name = params[:client]

  if @client_name.nil?
    @client_name = default_client
  end

あるブラウザでhttp://localhost:3000/call/client?client=Agent1にブラウザでアクセスし、
別のブラウザでhttp://localhost:3000/call/client?client=Agent2にアクセスします。
すると、「クライアント 'Agent1' が待機中です。」「クライアント 'Agent2' が待機中です。」とそれぞれ表示されます。

TwilMLを設定して、顧客が入力した番号を取得する

顧客が入力した番号を取得するため、call_controller.rbにcollect_digitメソッドを追加します（番号取得用のTwiML）。
Gatherメソッドで番号を取得します。

base_url = request.protocol + request.host_with_port

  response = Twilio::TwiML::Response.new do |r|
    # 1桁の数字を取得し（numDigits）、actionのTwiMLに渡す。タイムアウトは10秒。
    r.Gather(action: base_url + '/call/receive', numDigits: 1, timeout: 10) do
      r.Say('お問い合わせの場合は１、注文の場合は２を押してください', voice: 'woman', language: 'ja-JP')
    end

    # タイムアウト時の処理
    r.Say('何も入力されませんでした', voice: 'woman', language: 'ja-JP')
    r.Redirect base_url + "/call/receive"
  end

  render xml: response.text
end

次に、番号取得後の処理を記述するTwiML（receiveメソッド）を追加します。

def receive
  response = Twilio::TwiML::Response.new do |r|
    r.Dial callerId: ENV['TWILIO_CALL_FROM'] do |d|
      if params[:Digits] == "1"
        d.Client 'Agent1'
      else
        d.Client 'Agent2'
      end
    end
  end

  render xml: response.text
end

ルーティングの設定

config/routes.rb に collect_digitとreceiveメソッドへのルーティング設定をします。

post 'call/collect_digit'
post 'call/receive'

CSRFエラー対策

call_controller.rb に下記を設定します。

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

TwiMLを試す

番号取得TwiML

curl -X POST http://localhost:3000/call/collect_digit -d ""

を実行すると、↓のような結果が返ってきます。

<Response>
  <Gather action="http://localhost:3000/call/receive" numDigits="1" timeout="10">
    <Say voice="woman" language="ja-JP">お問い合わせの場合は１、注文の場合は２を押してください</Say>
  </Gather>
  <Say voice="woman" language="ja-JP">何も入力されませんでした</Say>
  <Redirect>http://localhost:3000/call/receive</Redirect>
</Response>

コール振り分け用TwiML

curl -X POST http://localhost:3000/call/receive -d ""

を実行すると、↓のような結果が返ってきます。

<Response>
  <Dial callerId="+8150xxx">
    <Client>Agent2</Client>
  </Dial>
</Response>

電話して試す

Railsプロジェクトをインターネットのサーバ上にアップ

Twilioからアクセするできるように、Railsプロジェクトをインターネットのサーバ上にアップします。

前回の補足情報2でproxylocalを設定した方は、次のコマンドを実行すると、インターネットからアクセスできるURLが得られます。

proxylocal 3000 --host xxx

エージェント用ブラウザのURLを更新する

のように、インターネット上のURLに更新します。

Twilio番号に発信する

顧客の電話（トライアルではご自分の携帯電話）からTwilioの電話番号に電話して、エージェントのブラウザに着信させてみましょう。

手順は以下の通りです

Twilio管理画面の「TWILIO電話番号」で、ご自分の電話番号を選んだ後、
「音声通話」の"Request URL"として、「 http://example.com/call/collect_digit 」と「HPPT POST」を設定
携帯から取得したTwilio番号に発信する

まとめ

思ったように動いたでしょうか？

今回の実装で、顧客が入力した番号を取得して、複数人のエージェントにコールを振り分けることができることができるようになりました。
一見、これでミニマムコールセンターができたように見えますが、実は重要な機能が一つ足りません。

その機能は何でしょうか。

次回はその機能を実装していきましょう。
お楽しみに！

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

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

https://github.com/fuji3zpg/twilio-collect-digit

参考資料

TwilioのAPIドキュメントにTwiML Gatherの技術情報があります。

関連するページ