Twilio クライアント JavaScript クイックスタート

このクイックスタートは、Twilioクライアントについて学びながら構築できるサンプル・アプリケーションを通じて、開発に素早く慣れることができるよう作られています。 素敵でしょう? さっそくチャレンジしましょう!

アカウント情報の収集

まずすべきことは、Twilioアカウントからすべての必要な情報を集めることです。 Twilioクライアントのバックエンドをセットアップするには、アカウントの次の4つの値が必要になります。

設定値 説明
アカウントSID プライマリ Twilio アカウント識別子 - 調べるにはコンソールのここにアクセスします。
認証トークン 上記同様、認証に使用されます。ここからご確認ください
TwiML App SID このアプリケーションの動作するサーバーにアクセスするよう構成されたVoice URLをともなうTwiMLアプリケーションです。コンソールから作成可能です。 また、サーバーが正常稼働したらTwiML App上でVoice「REQUEST URL」を設定しておく必要があります。
Twilio電話番号 E.164形式で記述された電話番号です。 - ここから取得できます

スターターアプリケーションのダウンロード、構成、および実行

お好みのサーバー側プログラミング言語のダウンロード・パッケージを選択してください。 主にフロントエンド開発者の方で特に強いこだわりがない場合は、Node.jsまたはRubyがもっとも迅速に使い慣れることができるようになるでしょう。

上記で作成した4つの値を使って、各スターター・アプリケーションのREADME(英語)の指示に従い、お使いのマシンでアプリケーションを設定、実行します。

サーバーをホストする

サーバーが正常に動作したら、それをTwilioからアクセスできる場所にホストする必要があります。 アプリケーションをレンタルサーバー会社に公開することもできますし、またローカル上で実行してngrokを使用し、外部からアクセス可能なURLへのトンネルを開発マシンに作成することも可能です。お選びのプラットフォーム向けのngrokについての指示については、上記READMEをご参照ください。

TwiML Appを構成する

さて、TwiML AppのVoice「REQUEST URL」を、ご自身のサーバーのVoice URLに到達できるよう設定しましょう。 再度、プラットフォーム固有の指示がないか上記のREADMEを確認してください。

TwilioClientRequestUrl.png

スターターアプリケーションの探求

ここからがお楽しみです! スターター・アプリケーションのホームページにアクセスすると、以下のような画面がご覧いただけるでしょう。

TwilioClientQuickstart.png

ランダムなクライアント名を割り当て、通話を発信する準備が整いました。 電話番号や他のユーザーのクライアント名を入力して、通話を発信できます。 もうひとつのブラウザー・ウィンドウでアプリケーションを開いて、自分自身に電話をかけてみましょう。 ハウリングをお楽しみください!

スターター・アプリケーションのHTMLとCSSはあまり面白いものではありませんが、このアプリケーションを動かしているJavaScriptには、いくつかのとても重要な役割があります。

  1. Ajax経由でサーバーからケイパビリティ・トークンを取得する
  2. Twilio クライアント JavaScript ライブラリーを初期化する
  3. UIイベントを処理し、通話を発信する
  4. Twilioクライアントのイベントを処理し、ステータス・メッセージを表示する

ヘルプ

さらなるお手伝いが必要ですか? twilio_support@kddi-web.com までお知らせいただければ、できるだけ速やかに解決できるよう尽力いたします。 Twilioクライアントを使ったシステム構築をお楽しみください。 そして、作っているものをぜひお知らせください!