LoginSignup
3

More than 5 years have passed since last update.

[twilio] Twilio受信管理アプリを作る (AmazonLinux + nginx + php-fpm + Twilio PHP SDK)

Last updated at Posted at 2015-10-12

PHPで、Twilioに蓄積された録音メッセージの一覧を表示してみます。
また、録音データの再生や削除もできるようにしてみます。

前提条件

公開サーバ環境

Webサーバ + PHP環境

  • Twilio Post用サーバ環境を構築してみる (AmazonLinux + nginx + php-fpm):

Twilioのアカウント

  • Twilioのアカウントを保有していること。
    • Twilioの電話番号
    • Twilioの認証情報 (ACCOUNT SID / AUTH TOKEN)

Twilio+PHP環境

  • PHP (5.4以上を想定)
  • Twilio PHP SDK

(参考) Twilioで電話にメッセージを送る (クライアント環境: Twilio PHP SDK): http://qiita.com/tcsh/items/d0449909f20916fff159

0. 事前準備

Twilioアカウント情報の設定

Twilioの「はじめよう」画面から以下の情報を取得して変数に格納します。

  • ACCOUNT SID

  • AUTH TOKEN

  • 電話番号

変数の設定
TWILIO_ACCOUNT_SID='ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
TWILIO_AUTH_TOKEN='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
TEL_TWILIO_ORIGIN=<Twilioで取得した電話番号>

1. メッセージ送信アプリケーションの作成

1.1. ファイル置き場の作成

変数の設定
DIR_HTML='/usr/share/nginx/html'
DIR_PHP_SCRIPT="${DIR_HTML}/sysadm"
URL_PHP_SCRIPT=$(echo ${DIR_PHP_SCRIPT} | sed "s|${DIR_HTML}||" )
コマンド
sudo mkdir -p ${DIR_PHP_SCRIPT} \
  && ls ${DIR_PHP_SCRIPT}

1.2. アプリケーションディレクトリの作成

変数の設定
DIR_TWILIO_APP="${HOME}/app/twilio-admin-app" \
  && echo ${DIR_TWILIO_APP}
APP_NAME=$(echo ${DIR_TWILIO_APP} | sed 's|^.*/||') \
  && echo ${APP_NAME}
コマンド
mkdir -p ${DIR_TWILIO_APP} \
  && cd ${DIR_TWILIO_APP}

1.3. composerのインストール

コマンド
cd ${DIR_TWILIO_APP} \
  && mkdir bin \
  && curl -sS https://getcomposer.org/installer | \
  php -- --install-dir=bin --filename=composer
結果(例)
      #!/usr/bin/env php
      All settings correct for using Composer
      Downloading...

      Composer successfully installed to: /Users/taro/app/twilio-php/composer.phar
      Use it: php bin/composer

1.4. Twilio PHP SDKの導入

参考: https://jp.twilio.com/docs/php/install

コマンド
cd ${DIR_TWILIO_APP} \
  && ./bin/composer require twilio/sdk
結果(例)
      Using version ^4.2 for twilio/sdk
      ./composer.json has been created
      Loading composer repositories with package information
      Updating dependencies (including require-dev)
        - Installing twilio/sdk (4.2.1)
          Downloading: 100%

      Writing lock file
      Generating autoload files
コマンド
ls ${DIR_TWILIO_APP}/vendor/twilio/sdk/Services/Twilio.php > /dev/null 2>&1 \
  && echo $?
結果(例
0

Twilio PHPライブラリファイルの位置を変数に取り込みます。

変数の設定
FILE_LIB_TWILIO="vendor/twilio/sdk/Services/Twilio.php" \
  && ls ${FILE_LIB_TWILIO} > /dev/null 2>&1 \
  && echo $?
結果(例)
0

2. 電話録音アプリの作成

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

2.1. Twilioに録音されたメッセージを一覧するスクリプトの作成

変数の設定
FILE_PHP_SCRIPT='list-records.php'
FILE_CSS='main.css'
変数の確認"
cat << ETX

  APP_NAME:           ${APP_NAME}
  FILE_PHP_SCRIPT:    ${FILE_PHP_SCRIPT}
  TWILIO_ACCOUNT_SID: ${TWILIO_ACCOUNT_SID}
  TWILIO_AUTH_TOKEN:  ${TWILIO_AUTH_TOKEN}
  FILE_CSS:           ${FILE_CSS}

ETX
コマンド
cat << EOF > ${FILE_PHP_SCRIPT}
<!DOCTYPE html>
<!-- author: Toshiaki Enami -->
<meta charset="UTF-8">
<title>List Records</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  function del(sid){
      \$.ajax({
        url: 'delete-record.php',
        type: 'post',
        dataType: 'json',
        data: { 
          RecordingSid: sid
        }
      })
      .done(function (response) {
          location.reload();
      })
      .fail(function () {
          location.reload();

      });
    };
</script>

<hr />

<table>
  <caption>録音リスト</caption>
  <thead>
    <tr><th scope="col">DateCreated</th><th scope="col">From</th><th scope="col">To</th><th scope="col">Duration</th><th scope="col">Action</th></tr>
  </thead>
  <tbody>
  <?php
    require('${FILE_LIB_TWILIO}'); 
    \$account_sid = '${TWILIO_ACCOUNT_SID}'; 
    \$auth_token = '${TWILIO_AUTH_TOKEN}'; 
    \$client = new Services_Twilio(\$account_sid, \$auth_token); 
    \$recordings = \$client->account->recordings->getIterator(0, 50, array(   
    )); 
    foreach (\$recordings as \$recording) {
      //var_dump(\$recording);
      \$i = 0;
      echo '<tr >';
      if (\$i == 0) {
        echo '<th scope="row">' . \$recording->date_created . '</th>';
        \$i++;
      }
      \$call_sid = \$recording->call_sid;
      echo "<td>" . getCaller(\$client, \$call_sid, "from") . "</td>";
      echo "<td>" . getCaller(\$client, \$call_sid, "to") . "</td>";
      echo "<td>" . \$recording->duration . "</td>";
      echo "<td><a href='https://api.twilio.com" . \$recording->uri . ".wav'>Play</a><br /><a onclick='del(\"" . \$recording->sid . "\")'>Delete</a></td>";
      echo "</tr >";
    }

    function getCaller(\$client, \$callSid, \$type){
      \$call = \$client->account->calls->get(\$callSid);
      if(\$type == "from"){
        return \$call->from;
      } elseif(\$type == "to"){
        return \$call->to;
      } else {
        return NULL;
      }
    }
  ?>
  </tbody>
</table>
EOF

cat ${FILE_PHP_SCRIPT}

動作確認してみましょう。

コマンド
php ${FILE_PHP_SCRIPT}
結果(例)
<!DOCTYPE html>
<!-- author: Toshiaki Enami -->
<meta charset="UTF-8">
<title>List Records</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  function del(sid){
      $.ajax({
        url: 'delete-record.php',
        type: 'post',
        dataType: 'json',
        data: { 
          RecordingSid: sid
        }
      })
      .done(function (response) {
          location.reload();
      })
      .fail(function () {
          location.reload();

      });
    };
</script>

<hr />

<table>
  <caption>録音リスト</caption>
  <thead>
    <tr><th scope="col">DateCreated</th><th scope="col">From</th><th scope="col">To</th><th scope="col">Duration</th><th scope="col">Action</th></tr>
  </thead>
  <tbody>
  <tr ><th scope="row">Sat, 10 Oct 2015 00:28:38 +0000</th><td>+819018480135</td><td>+815031717400</td><td>2</td><td><a href='https://api.twilio.com/2010-04-01/Accounts/ACee27e8a970548a537b8ea8c4f0dd7bd4/Recordings/REd57ab0d42b29e7b7ad63710a4294066e.wav'>Play</a><br /><a onclick='del("REd57ab0d42b29e7b7ad63710a4294066e")'>Delete</a></td></tr >  </tbody>
</table>

2.2. CSSファイルの作成

コマンド
cat << EOF > ${FILE_CSS}
table, th, td {
    border: 1px solid #D4E0EE;
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
}

caption {
    font-size: 150%;
    font-weight: bold;
    margin: 5px;
}

td, th {
    padding: 4px;
}

thead th {
    text-align: center;
    background: #E6EDF5;
    color: #4F76A3;
    font-size: 100% !important;
}

tbody th {
    font-weight: bold;
}

tbody tr { background: #FCFDFE; }

tbody tr.odd { background: #F7F9FC; }

table a:link {
    color: #718ABE;
    text-decoration: none;
}

table a:visited {
    color: #718ABE;
    text-decoration: none;
}

table a:hover {
    color: #718ABE;
    text-decoration: underline !important;
}

tfoot th, tfoot td {
    font-size: 85%;
}
EOF

cat ${FILE_CSS}

2.3. 録音データを削除するスクリプトの作成

コマンド
FILE_PHP_SCRIPT='delete-record.php'
コマンド
cat << EOF > ${FILE_PHP_SCRIPT}
<?php
// author: Toshiaki Enami
require('${FILE_LIB_TWILIO}');
\$account_sid = '${TWILIO_ACCOUNT_SID}';
\$auth_token = '${TWILIO_AUTH_TOKEN}';
\$client = new Services_Twilio(\$account_sid, \$auth_token);

header('Content-Type: application/json');
// Need to validate paratmer
\$client->account->recordings->delete(\$_POST['RecordingSid']);
echo "Done";
EOF

cat ${FILE_PHP_SCRIPT}

3. Webサーバの公開ドキュメントディレクトリにスクリプトを配置

コマンド
sudo cp -R ${DIR_TWILIO_APP} ${DIR_PHP_SCRIPT}/ \
  && cat ${DIR_PHP_SCRIPT}/${APP_NAME}/${FILE_PHP_SCRIPT} \
  && cat ${DIR_PHP_SCRIPT}/${APP_NAME}/${FILE_CSS}  

4. スクリプトの動作確認

ブラウザで http://<ホスト>/sysadm/twilio-admin-app/list-records.php にアクセスしてみましょう。

録音データの一覧が表示されていればOKです。

  • Playリンクをクリックすると、録音データが再生されます。
  • Deleteリンクをクリックすると、録音データが削除されます。

5. Twilioのログ確認

完了

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
3