【実践編】Twilioを使ってブラウザから携帯に電話をかける方法まとめ

photo credit: CalEvans via photopin cc

こんばんは、ボーノです。

今年は、ハッカソンでTwilioを使う事が何回かありました。

Twilioはまだまだ歴史の浅いサービスですが、近い将来化けるサービスの一つだと思っています。

開発者の興味もかなり高く、ハッカソンに参加すると必ずと言っていい程このサービスを使っているチームがある。

今回はブラウザから電話をかける方法を備忘録として残しておきます。

　　　コンテンツ

Twilioとは
- IP電話が簡単にかけられる！
- ドキュメントも豊富に用意
まずは準備
- 電話番号の登録
- ライブラリの設置
アプリケーションを利用するための初期設定を行う
ダイヤル部分を作成
ビューを作成
最後にブラウザから確認

Twilioとは

IP電話が簡単にかけられる！

Twilio for KDDI Web Communications｜KDDIウェブコミュニケーションズ

Twilioとは、IP電話を簡単に利用できるようにしたサービスです。

日本ではKDDIが提供している。実際に「電話をかける」という根幹にあたる部分はAPIで提供されており、開発者はそれを「如何に利用するか」のみに専念できます。

ドキュメントも豊富に用意

なお、本サービスはドキュメントが豊富に容易されており、分からない所はそこから探すと良いと思う。

今回も、基本的には下記ページの内容に沿って紹介しています。

Twilio Docs - HowTo Twilio Client Click To Call

まずは準備

電話番号の登録

まずは下記サイトにならって、電話番号を登録します。

Twilio（トゥイリオ）を触ってみた | キャスレーコンサルティング　技術ブログ

登録すると、下記の通りACCOUNT SIDとAUTH TOKENを入手できます。

ライブラリの設置

ライブラリがないと電話をかける事はできません。

少し分かり辛いですが、GitHubにライブラリがアップされているのでそれをダウンロードしておきます。

https://github.com/twilio/twilio-php/tree/master/Services

アプリケーションを利用するための初期設定を行う

browsephone.phpという名前でファイルを作成し、下記を入力します。

&lt;?php
include 'Services/Twilio/Capability.php';</p>
<p>$accountSid = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
$authToken = 'YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY';</p>
<p>$capability = new Services_Twilio_Capability($accountSid, $authToken);
$capability-&gt;allowClientOutgoing('APZZZZZZZZZZZZZZZZ');
?&gt;

<?php

include 'Services/Twilio/Capability.php';</p>

<p>$accountSid = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';

$authToken = 'YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY';</p>

<p>$capability = new Services_Twilio_Capability($accountSid, $authToken);

$capability->allowClientOutgoing('APZZZZZZZZZZZZZZZZ');

なお、X, Yは、ダッシュボードをクリックして「ACCOUNT SID」の数値と、「AUTH TOKEN」の数値を入力します。

Zには、アプリケーション毎に割り当てられたidを入力します。

「ツール」→「TWIML APPS」からアプリケーションを選び、その先にある「Sid」の欄の数値を入力します。

ダイヤル部分を作成

browsephone.phpに下記を追加します。

電話をかけるためのダイヤル部分を作成します。

なおここは、サンプルコードをコピペしただけです。

</p>
<html lang="ja">
<head>
</head>
<body>

<!--to dial-->

<script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.1/twilio.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    Twilio.Device.setup("<?php echo $token->generateToken();?>");
    var connection=null;

    $("#call").click(function() {  
        params = { "tocall" : $('#tocall').val()};
        connection = Twilio.Device.connect(params);
    });
    $("#hangup").click(function() {  
        Twilio.Device.disconnectAll();
    });

    Twilio.Device.ready(function (device) {
        $('#status').text('Ready to start call');
    });

    Twilio.Device.incoming(function (conn) {
        if (confirm('Accept incoming call from ' + conn.parameters.From + '?')){
            connection=conn;
            conn.accept();
        }
    });

    Twilio.Device.offline(function (device) {
        $('#status').text('Offline');
    });

    Twilio.Device.error(function (error) {
        $('#status').text(error);
    });

    Twilio.Device.connect(function (conn) {
        $('#status').text("Successfully established call");
        toggleCallStatus();
    });

    Twilio.Device.disconnect(function (conn) {
        $('#status').text("Call ended");
        toggleCallStatus();
    });

    function toggleCallStatus(){
        $('#call').toggle();
        $('#hangup').toggle();
        $('#dialpad').toggle();
    }

    $.each(['0','1','2','3','4','5','6','7','8','9','star','pound'], function(index, value) { 
        $('#button' + value).click(function(){ 
            if(connection) {
                if (value=='star')
                    connection.sendDigits('*')
                else if (value=='pound')
                    connection.sendDigits('#')
                else
                    connection.sendDigits(value)
                return false;
            } 
            });
    });
});
</script>

</p>

<head>

</head>

<body>

$(document).ready(function(){

Twilio.Device.setup("<?php echo $token->generateToken();?>");

var connection=null;

$("#call").click(function() {

params = { "tocall" : $('#tocall').val()};

connection = Twilio.Device.connect(params);

});

$("#hangup").click(function() {

Twilio.Device.disconnectAll();

});

Twilio.Device.ready(function (device) {

$('#status').text('Ready to start call');

});

Twilio.Device.incoming(function (conn) {

if (confirm('Accept incoming call from ' + conn.parameters.From + '?')){

connection=conn;

conn.accept();

}

});

Twilio.Device.offline(function (device) {

$('#status').text('Offline');

});

Twilio.Device.error(function (error) {

$('#status').text(error);

});

Twilio.Device.connect(function (conn) {

$('#status').text("Successfully established call");

toggleCallStatus();

});

Twilio.Device.disconnect(function (conn) {

$('#status').text("Call ended");

toggleCallStatus();

});

function toggleCallStatus(){

$('#call').toggle();

$('#hangup').toggle();

$('#dialpad').toggle();

}

$.each(['0','1','2','3','4','5','6','7','8','9','star','pound'], function(index, value) {

$('#button' + value).click(function(){

if(connection) {

if (value=='star')

connection.sendDigits('*')

else if (value=='pound')

connection.sendDigits('#')

else

connection.sendDigits(value)

return false;

}

});

</script>

ビューを作成

browsephone.phpに、更に下記を追加します。

ダイヤルするためのボタン等を配置します。

ここで、Nはかけたい電話番号を入力しておきます。

国際電話と同じ番号なので注意。

<input type="hidden" id="tocall" value="+81NNNNNNNNNN">
<input type="button" id="call" value="Start Call"/>
<input type="button" id="hangup" value="Hangup Call" style="display:none;"/>

<div id="status">
    Offline
</div>