ブラウザを電話機に!Twilio Client ブラウザフォンの作り方

20131023-01.png

Twilio Clientは、VoIPで通信を行います。様々なデバイス(パソコンやモバイル(iOS、Android))のマイクとスピーカーを制御し、音声通信(電話)が可能なアプリケーションを開発することが可能です。

使い方はとっても簡単。Twilioで提供しているTwilio Client用のSDKをアプリケーションに埋め込むとTwilioによる電話機能を搭載可能です。

 

 

TwiML APPの作成

 

ハードウェア(パソコンやスマホ、タブレットなど)から電話ができるアプリケーションを開発するためには、Twilio Applications(TwiML APPS)が必要です。

下記の手順で、みなさんのTwiML APPSを作成してください。

経路:メニュー → ツール → TWIML APPS → TwiMLAppを作成する

 

20131023-02.pngのサムネイル画像

 

「TwiML App」の情報を入力してみましょう。

  • フレンドリーネーム:APPの名前
  • Request URL:このAPPが呼ばれた際に参照するTwiMLのURLを設定します。
  • 入力が終わったら「変更を保存する」ボタンを忘れないように!

 

20131023-03.png

 

ソースコードにTwiML APP設定

Manage Appsに戻ると先ほど作成したAPPが表示されます。
TC_BrowserPhoneの「AP」から始まる34桁のキーがこのAPP SIDになります。
このAPP SIDを使ってTwilio APPを判別します。

APPの内容を修正する際にはAPP名(下記のTC_BrowserPhone)をクリックすれば設定画面に移動します。

 

20131023-04.pngのサムネイル画像

下記のソースコードはTwilio Clientを使って開発された一部です。
上記で作成した「TwiML APP」を設定してみましょう。

2行:Twilio Clinetは、Twilio ヘルパーライブラリーの「Capability」を使います。
4行:皆さんのAccount SIDを入力します。
5行:皆さんのAUTH TOKENを入力します。
8行:APから始まる34桁のTwiML APP SIDを入力します。
9行:上記で作成した、TwiML APP名(フレンドリーネーム)を入力します。

 

20131023-05.png

電話番号にTwiML APPを設定。

次は、電話番号にTwiML APPを設定してみます。

経路:メニュー → 電話番号 → TWILIO電話番号

ここで皆さんのTwilio電話番号の確認ができます。
※ トライアルアカウントでも1つの電話番号が付与されます。

 

画面の「電話番号(+81 50-xxxx-yyyy)」をクリックすると設定画面に移動します。

20131023-06.png

 

下の画面の「Configure with URL」の部分が最初は「Configure with Application」になっています。
「Configure with Application」をクリックするとアプリケーション設定画面に変わることと「音声通話」の下にある「アプリケーション」が表示され、先ほど作成したTwiML APPが選択できます。

20131023-07.png

 

最終確認です。
電話番号画面に戻ると右側の表示が、TwiML APP名になっていることを確認できます。
この電話番号から発信や受信が発生すると、設定されているTwiML APPが呼ばれることになります。

20131023-08.png

 

実際のウェブアプリを作りましょう。

サンプルコードは下記のリンクからダウンロードできます。
Twilio Client Browser Phone

 

アプリケーションの説明。
画面の入力欄に電話番号を入力し、「発信」ボタンをクリックすると発信を行います。
電話番号の入力は下記の形式に合わせる必要があります。
例)080xxxxyyyy → +8180xxxxyyyy

 

「切断」ボタンをクリックすると通話を終了します。

20131023-09.png

サンプルコードにTwilio情報を設定しましょう。

ダッシュボードからACCOUNT SID、AUTH TOKENの確認ができます。

20131023-010.png

index.php
4行目:ACCOUNT SID
5行目:AUTH TOKEN
8行目:TwiML APP SID
※ このブログ「TwiML APPの作成」から確認
9行目:TwiML APP名
※ このブログ「TwiML APPの作成」から確認

 

TC_BP_TwiML.php
5行目:Twilio電話番号(設定例:+8150xxxxyyyy)
※ このブログ「電話番号にTwiML APPを設定。」から確認
6行目:TwiML APP名
※ このブログ「TwiML APPの作成」から確認

 

「index.php」はローカルでも動きますが「TC_BP_TwiML.php」はTwilioから参照できるように
パブリックサーバーに配置してください。

まとめ

下の動作確認をしてみましょう。

  • 電話の発信
    画面の入力欄に電話番号を入れて「発信」ボタンをクリックするとその電話番号に電話をかけます。
  • 電話の受信
    自分のTwilio電話番号(050-xxxx-xxxx)に電話を掛けてみてください。ブラウザのアラートにて電話を受けることができます。

このようにいくつかの設定と簡単なソースコードでパソコンのブラウザを電話機として開発することが可能です。
サンプルコードを応用すればもしくはTwilioのJS SDKを使えば自分だけのコールセンターや電話機能が搭載されているウェブアプリケーションの開発ができます。

 

※ ソースコードはご自由に使ってください!みなさんの素敵なアプリをお待ちしております。

【Twilio for KDDI Web Communications】
公式ページ:http://twilio.kddi-web.com
Facebook:https://www.facebook.com/TwilioforKWC
Twitter:@TwilioforKWC

この記事をシェア


最新記事

すべての記事へ