第4回 用件選択アナウンスを流し、顧客入力番号を取得 - TwilioとRailsでミニマムコールセンターを作ろう

`別サイトで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](http://localhost:3000/call/client)で前回までの状態になるはずです。

＊ただし、まだTwilioアカウントを取得していなかったり、環境変数が設定されていないと動きません。
その場合は、[第3回](/article/twilio_rails_callcenter_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=Agent1)にブラウザでアクセスし、
* 別のブラウザで[http://localhost:3000/call/client?client=Agent2](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プロジェクトをインターネットのサーバ上にアップします。

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

    proxylocal 3000 --host xxx

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

* http://example.com/call/client?client=Agent1
* http://example.com/call/client?client=Agent2

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


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

手順は以下の通りです

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

## まとめ
思ったように動いたでしょうか？

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

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

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

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

[https://github.com/fuji3zpg/twilio-collect-digit](https://github.com/fuji3zpg/twilio-collect-digit)

## 参考資料
TwilioのAPIドキュメントにTwiML [Gather](https://jp.twilio.com/docs/api/twiml/gather)の技術情報があります。

## 関連するページ
* [第3回 顧客の電話をエージェントのブラウザで受ける](http://qiita.com/fuji3zpg/items/4d9a2fa7c397f940118d)
* [連載「TwilioとRailsでミニマムコールセンターを作ろう」一覧](http://qiita.com/tags/twilio%e3%81%a8rails%e3%81%a7%e3%83%9f%e3%83%8b%e3%83%9e%e3%83%a0%e3%82%b3%e3%83%bc%e3%83%ab%e3%82%bb%e3%83%b3%e3%82%bf%e3%83%bc%e3%82%92%e4%bd%9c%e3%82%8d%e3%81%86)