2013.10.23

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

構成イメージ

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

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

Twilio Client、SDKのダウンロード（Android,iOS）
http://twilio.kddi-web.com/funciton/client/index.html
JavaScript SDK
<script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script>
より詳しい内容は下記のページをご覧ください。
http://jp.twilio.com/docs/howto/twilio-client-browser-soft-phone

TwiML APPの作成

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

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

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

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

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

ソースコードにTwiML APP設定

Manage Appsに戻ると先ほど作成したAPPが表示されます。

TC_BrowserPhoneの「AP」から始まる34桁のキーがこのAPP SIDになります。

このAPP SIDを使ってTwilio APPを判別します。

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

下記のソースコードはTwilio Clientを使って開発された一部です。

上記で作成した「TwiML APP」を設定してみましょう。

2行：Twilio Clinetは、Twilio ヘルパーライブラリーの「Capability」を使います。

4行：皆さんのAccount SIDを入力します。

5行：皆さんのAUTH TOKENを入力します。

8行：APから始まる34桁のTwiML APP SIDを入力します。

9行：上記で作成した、TwiML APP名（フレンドリーネーム）を入力します。

電話番号にTwiML APPを設定。

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

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

ここで皆さんのTwilio電話番号の確認ができます。

※ トライアルアカウントでも1つの電話番号が付与されます。

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

下の画面の「Configure with URL」の部分が最初は「Configure with Application」になっています。

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