Twilioブログ

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

構成イメージ

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

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

 

TwiML APPの作成

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

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

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

twilioコンソール

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

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

TwiMLAPP設定画面

 

ソースコードにTwiML APP設定

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

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

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

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

TwiML APP設定画面

下記のソースコードは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が選択できます。

TwiML App設定画面

 

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

電話番号一覧画面

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

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

Twilio Client Browser Phone

アプリケーションの説明。

画面の入力欄に電話番号を入力し、「発信」ボタンをクリックすると発信を行います。

電話番号の入力は下記の形式に合わせる必要があります。

例)080xxxxyyyy → +8180xxxxyyyy

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

電話アプリトップ画面

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

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

Twilioコンソール

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

Twilio事業部
Twilio事業部

KDDIウェブコミュニケーションズは、日本初のTwilioパートナーとして常に「開発者目線」を大切にしており、ブログ記事がお役に立てれば幸いでございます。

Share!!

この記事を読んだ人へのオススメ

  • お役立ち情報
  • イベント情報
  • 相談会申込
  • 導入事例