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>

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

初期画面を表示
時間と用途を選択して送信
完了画面を表示してバックグラウンドで電話コール処理
時間が経過すると電話コール
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 次へ