[Twilio] Twilioで番号入力を受け付けてみる (AmazonLinux + nginx + php-fpm)

Twilioからのリクエストを受け付ける公開Webサーバを構築してみます。
実際に、電話を受けてキー入力の受け付けと読み上げをするアプリケーションで動作確認もしてみます。

この手順では、PHPスクリプトは認証なしの公開ディレクトリに配置し、TwiMLで記述したXMLファイルはベーシック認証で保護されたディレクトリの下に配置してみます。


# 前提条件

## 公開サーバ

* (参考) Amazon Linux環境の構築
   * キーペアの作成 (新規): http://qiita.com/tcsh/items/59303d9506ca7d13f744
   * インスタンスの作成 (Public): http://qiita.com/tcsh/items/ae8f1f0d706237327c5a


## PHP環境

phpがインストールされていること (5.4以上推奨)

```bash:コマンド:
which php
```

```text:結果(例/AmazonLinux):
/usr/bin/php
```


インストールされていない場合は、インストールします。

```bash:インストール(yumパッケージの場合):
sudo yum install php54 -y
```

PHPのバージョンを確認しておきましょう。

```bash:コマンド(バージョン確認)
 php -v
```

```text:結果(例/AmazonLinux):
PHP 5.4.45 (cli) (built: Sep 11 2015 21:23:18) 
Copyright (c) 1997-2014 The PHP Group
Zend Engine v2.4.0, Copyright (c) 1998-2014 Zend Technologies
```


## curlコマンド

curlがインストールされていること

```bash:コマンド:
which curl
```

```text:結果(例/AmazonLinux):
/usr/bin/curl
```

## nginx + php-fpm

nginxとphp-fpmがインストールされており、外部からアクセスした場合にPHPスクリプトが動作すること。

```bash:コマンド:
which nginx
```

```bash:結果(例/AmazonLinux):
/usr/sbin/nginx
```

* (参考) Amazon Linuxにnginxをインストールする (yumパッケージ): http://qiita.com/tcsh/items/001c05ce9b0e5a34abc7


```bash:コマンド:
which php-fpm
```

```bash:結果(例/AmazonLinux):
/usr/sbin/php-fpm
```

* (参考) [nginx] Amazon Linux + nginx + php-fpmでPHPスクリプトを実行する (ベーシック認証付き): http://qiita.com/tcsh/items/360956faf5c4b2562021

ベーシック認証の設定もしておいてください。


## Twilioのアカウント

Twilioの動作確認をする場合は、

* Twilioのアカウントを保有していること。
  * Twilioの電話番号 (携帯電話からかけるために必要です。)
  * (このハンズオンではTwilioの認証情報は不要です。)


# 0. 事前準備

## ファイル置き場の作成

```bash:変数の設定
DIR_HTML='/usr/share/nginx/html'
DIR_TWIML="${DIR_HTML}/sysadm/xml"
DIR_PHP_SCRIPT="${DIR_HTML}/php"
URL_PHP_SCRIPT=$(echo ${DIR_PHP_SCRIPT} | sed "s|${DIR_HTML}||" )
```

```bash:コマンド:
sudo mkdir -p ${DIR_TWIML} ${DIR_PHP_SCRIPT} \
  && ls ${DIR_TWIML} ${DIR_PHP_SCRIPT}
```

```text:結果(例):
/usr/share/nginx/html/php:

/usr/share/nginx/html/sysadm/xml:
```

# 1. 電話受信アプリの作成

公開Webサーバ上に電話受信アプリを作成します。

## 1.1. Twilioからのリクエストを処理するスクリプトの作成

```bash:変数の設定
FILE_PHP_SCRIPT='process_gather.php'
```

```bash:変数の確認
cat << ETX

  FILE_PHP_SCRIPT: ${FILE_PHP_SCRIPT}

ETX
```

```bash:コマンド:
cat << EOF > ~/${FILE_PHP_SCRIPT}
<?php
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
echo "<Response><Say>You entered " . \$_REQUEST['Digits'] . "</Say></Response>";
EOF
```

## 1.2. スクリプトの公開ディレクトリへの配置

```bash:コマンド:
sudo cp ~/${FILE_PHP_SCRIPT} ${DIR_PHP_SCRIPT}/ \
  && cat ${DIR_PHP_SCRIPT}/${FILE_PHP_SCRIPT}
```

```php:/usr/share/nginx/html/php/process_gather.php:
<?php
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
echo "<Response><Say>You entered " . $_REQUEST['Digits'] . "</Say></Response>";
```

## 1.3. スクリプトへのアクセス確認

ブラウザで http://<ホスト>/php/process_gather.php にアクセスして、"You entered "が表示されればOKです。



# 2. TwiMLファイルの作成

## 2.1. TwiMLファイルの作成

```bash:変数の設定
FILE_TWIML='complex_gather.xml'
MSG_SAY='Please enter your account number,followed by the pound sign.'
MSG_ERROR="We didn't receive any input. Goodbye."
```

```bash:変数の確認
cat << ETX

  URL_PHP_SCRIPT: ${URL_PHP_SCRIPT}
  FILE_TWIML:     ${FILE_TWIML}
  MSG_SAY:        ${MSG_SAY}
  MSG_ERROR:      ${MSG_ERROR}

ETX
```

```bash:コマンド:
cat << EOF > ~/${FILE_TWIML}
<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Gather action="${URL_PHP_SCRIPT}/${FILE_PHP_SCRIPT}" method="GET">
        <Say>${MSG_SAY}</Say>
    </Gather>
    <Say>${MSG_ERROR}</Say>
</Response>
EOF
```

```bash:コマンド:
xmllint ~/${FILE_TWIML} -noout
```

# 2.2. TwiMLファイルの配置

```bash:コマンド:
sudo cp ~/${FILE_TWIML} ${DIR_TWIML}/ \
  && cat ${DIR_TWIML}/${FILE_TWIML}
```

```xml:/usr/share/nginx/html/sysadm/xml/complex_gather.xml:
<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Gather action="/php/process_gather.php" method="GET">
        <Say>Please enter your account number,followed by the pound sign.</Say>
    </Gather>
    <Say>We didn't receive any input. Goodbye.</Say>
</Response>
```

## 2.3. TwiMLファイルへのアクセス確認

ブラウザで http://<ホスト>/sysadm/xml/complex_gather.xml にアクセスすると、ベーシック認証のダイアログが表示されるので、ユーザ名とパスワードを入力して、XMLが表示されればOKです。




# 3. Twilioの設定変更

- ログイン: http://twilio.kddi-web.com
- 画面: 'Voice, SMS & MMS' > '電話番号: 'https://jp.twilio.com/user/account/voice-sms-mms/phone-numbers
   - 電話番号のリンクをクリックします。
   - ポップアップで「音声通話」タブを選択します。
   - Request URLにTwiML(XMLファイル)のURLを貼り付けます。
      - 例: http://username:password@<ホスト名>/sysadm/xml/complex_gather.xml
      - username:passwordには、ベーシック認証のユーザ名(例:sysadm)とパスワード(例:#userPass123)を記述します。
   - URLを貼り付けた欄の右のプルダウンから'HTTP GET'を選択します。

![スクリーンショット 2015-10-10 9.07.33.png](https://qiita-image-store.s3.amazonaws.com/0/48158/256e0f27-d3d1-9e45-8498-2bbad919fa5e.png)

- 「保存」ボタンをクリックします。


# 4. 電話アプリの動作確認

- 電話番号に電話します。

  - complex_gather.xmlに記述したメッセージが流れます。

- 数字キーを複数回押します。

  - しばらく待つ、もしくは#キーを押します。

- complex_gather.phpに記述したメッセージが流れて、電話が切れます。



# 完了