[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以上推奨)

コマンド

which php

結果(例/AmazonLinux)

/usr/bin/php

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

インストール(yumパッケージの場合)

sudo yum install php54 -y

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

コマンド(バージョン確認)

 php -v

結果(例/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がインストールされていること

コマンド

which curl

結果(例/AmazonLinux)

/usr/bin/curl

nginx + php-fpm

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

コマンド

which nginx

結果(例/AmazonLinux)

/usr/sbin/nginx

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

コマンド

which php-fpm

結果(例/AmazonLinux)

/usr/sbin/php-fpm

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

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

Twilioのアカウント

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

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

0. 事前準備

ファイル置き場の作成

変数の設定

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}||" )

コマンド

sudo mkdir -p ${DIR_TWIML} ${DIR_PHP_SCRIPT} \
  && ls ${DIR_TWIML} ${DIR_PHP_SCRIPT}

結果(例)

/usr/share/nginx/html/php:

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

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

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

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

変数の設定

FILE_PHP_SCRIPT='process_gather.php'

変数の確認

cat << ETX

  FILE_PHP_SCRIPT: ${FILE_PHP_SCRIPT}

ETX

コマンド

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. スクリプトの公開ディレクトリへの配置

コマンド

sudo cp ~/${FILE_PHP_SCRIPT} ${DIR_PHP_SCRIPT}/ \
  && cat ${DIR_PHP_SCRIPT}/${FILE_PHP_SCRIPT}

/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ファイルの作成

変数の設定

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."

変数の確認

cat << ETX

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

ETX

コマンド

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

コマンド

xmllint ~/${FILE_TWIML} -noout

2.2. TwiMLファイルの配置

コマンド

sudo cp ~/${FILE_TWIML} ${DIR_TWIML}/ \
  && cat ${DIR_TWIML}/${FILE_TWIML}

/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'を選択します。

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

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

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

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

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

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

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

完了