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
アプリを使ってみる
一通り完成しましたので、脱出ヘルパーを使ってみましょう。
【サンプル】脱出ヘルパー(このサンプルでは電話はかかりません)
時間と用途を選択して送信をクリックします。設定した時間経過後に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と電話を統合した「スマートコミュニケーション」を肌で実感。