このページの本文へ

FuelPHPとTwilioで会議脱出アプリ作ってみた (2/2)

2013年09月02日 11時00分更新

文●江草正庸/ニフティ

  • この記事をはてなブックマークに追加
本文印刷

Webアプリを作る

 続いて、アプリ本体を作ってきましょう。今回はPHPのフレームワークである「FuelPHP」を利用します。脱出ヘルパーのような小規模のアプリであれば必ずしもフレームワークを使わなくても構いませんが、保守性や拡張性を考えて利用するとよいでしょう。

 最小限の機能を実装しますので、HTMLを表示するViewとデータ操作をするControllerのみを利用します。構成は以下のとおりです。

■View(html表示)

  • home/fuel/app/views/twilio/escape/index.php
  • home/fuel/app/views/twilio/escape/complete.php

■Controller

  • home/fuel/app/classes/controller/twilio/escape.php

 FuelPHPについてはここでは説明しませんので、Fuelphpドキュメントを確認してください。

Viewの作成

 まずは画面表示部分であるHTMLを作成するViewから作ります。利用シーンを考えると、入力にもたついているとまわりに怪しまれるので、シンプルな画面である必要があります。そこで、最低限必要のUIとして、以下のように電話がかかってくるまでの時間と、利用する用途を選択できるようにします。

home/fuel/app/views/twilio/escape/index.php

<?php echo Form::open( '/twilio/escape/complete'); ?>
<p>時間:
  <?php
   echo Form::select('time', Input::post('time'), array(
    '1' => '1分後に通知',
    '5' => '5分後に通知',
    '10' => '10分後に通知',
  ));
  ?>
</p> 
<p>用途:
  <?php
  echo Form::select('type', Input::post('type'), array(
    'default' => '一般用',
    'job' => '仕事用',
     'party' => '飲み会用',
  ));
?>
</p>
 <p>
  <?php echo Form::submit('submit', '  送信  '); ?>
  <?php echo Form::reset ('reset', ' リセット '); ?>
</p> 
<?php echo Form::close(); ?>

 続いて完了画面を作成します。

home/fuel/app/views/twilio/escape/complete.php

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
  $(function(){
   $("#sleep").load("/twilio/escape/call/<?php echo $time; ?>/<?php echo $type; ?>");
   })
</script>

〜 省略 〜

<p>登録が完了しました。</p>
<div id="sleep">
    <p><?php echo $time; ?>分後に通知します。</p>
</div>

 設定した時間後にバックグラウンドで処理を実行するため、jQueryを使い、Ajaxで非同期処理しています。

CONTROLLERの作成

 続いてコントローラーを作成します。メソッドは全部で4つ用意します。

  • 初期画面表示(index)
  • 完了画面表示(complete)
  • 電話コール(call)
  • Twiml生成(twiml)

 このほか、本来はエラー処理等も考える必要がありますが、今回はすべて省略します。

home/fuel/app/classes/controller/twilio/escape.php

class Controller_Twilio_Escape extends Controller
{
// 初期画面
  public function action_index()
  {
    return Response::forge(View::forge('twilio/escape/index'));  
  }
// 完了画面
  public function action_complete()
  {
    $data = array();   
    $data['time']   = Input::post('time');
    $data['type']   = Input::post('type'); 
    return Response::forge(View::forge('twilio/escape/complete',$data));
  }
// 電話コール public function action_call($time,$type)
  {
    sleep($time*60);
    $twiml_url = "twilio/escape/twiml/$type";
        $call = Twilio\Twilio::request('MakeCall');
    $response = $call->create(array(
      'To' => '+8180xxxxxxxx',   // 自分の電話番号
      'From' => '+8150xxxxxxxx', // twilioの電話番号
      'Url' => Uri::create($twiml_url),
    )); 
    return;
  }
// twiml生成
  public function action_twiml($type)
  {
    switch ($type) {
      case work:
        $message = "はやく会議から脱出してください";
        break;
      case party:
        $message = "はやく飲み会から脱出してください";
        break;
      default:
        $message = "はやく脱出してください";
}
   
  $twiml = Twilio\Twilio::twiml();
  $twiml->say($message)->pause('', array('length' => '5'));
  return $twiml->render();  
  }
 
}

 参考までに、Twimlの表示は以下のようにレンダリングされます。

http://clwrt3t-ac1-app000.c4sa.net/twilio/escape/twiml/

<?xml version="1.0" encoding="UTF-8" ?>
<Response>
<Say voice="woman" language="ja-JP" loop="5">はやく脱出してください</Say>
<Pause length="5" />
</Response>

 簡単に上から処理を説明すると、

  1. 初期画面を表示
  2. 時間と用途を選択して送信
  3. 完了画面を表示してバックグラウンドで電話コール処理
  4. 時間が経過すると電話コール
  5. Twimlで音声処理
 

という流れになります。

 すべてのソースコードは以下にアップロードしてありますので、確認してください。

https://github.com/masatsune/twilio

アプリを使ってみる

 一通り完成しましたので、脱出ヘルパーを使ってみましょう。

【サンプル】脱出ヘルパー(このサンプルでは電話はかかりません)

http://clwrt3t-ac1-app000.c4sa.net/twilio/escape

 時間と用途を選択して送信をクリックします。設定した時間経過後にTwilio電話番号(050xxxxxxxx)から電話がかかって来たら成功です。

 電話に応答すると、設定したメッセージが女性の声で5回繰り返されます。

ホームアイコンに追加するともっと便利に

 ショートカット用のアイコンを「 home/public/assets/img/twilio.gif 」にアップロードしてHTMLのhead内に下記タグを追加します。

    <link rel="apple-touch-icon-precomposed" href="/assets/img/twilio.gif" />

 iPhoneの場合、Safariで「ホーム画面に追加」をすると、設定したアイコンでホーム画面にショートカットが作成できます。

 これでいつでも簡単に脱出ヘルパーを起動して、電話がかけられます。

まとめ

 今回はTwilio API ライブラリを使い、Twilioの基本的な機能を使ってブラウザー上で動くごく簡単なWebアプリを作ってみました。今回はWebアプリにしましたが、TwilioクライアントSDKを利用するとブラウザー上だけでなく、iPhoneやAndroidで動くスマートフォン向けのネイティブアプリも手軽に作れます。また、TitaniumでTwilioを簡単に扱うためのモジュール「TiTwilio」も公開されており、JavaScriptでiPhone/Android向けのIP電話アプリも簡単に作れそうです。

 たった数行でIP電話アプリを作れたり、スマートフォンによるスモールコールセンターを作成して、それを世界展開したり、といったことがアイデア次第でいろいろ考えられます。筆者も日々、アイデアを練っています。一緒に楽しみましょう!

著者:江草正庸(えぐさ・まさつね)

ニフティ株式会社で働くインフラエンジニア。普段は「ニフティクラウド」を利用したシステムの自動化を推進し、「@nifty」内のさまざまなサービスを支えるプラットフォームを構築している。boundio meetupをきっかけに、昨年サンフランシスコで行われたTwilioカンファレンス「Twilio Conference 2012」に参加。Twilioを使ってWebと電話を統合した「スマートコミュニケーション」を肌で実感。

前へ 1 2 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く