─━─━─━─━─━─━─━─━─━─━─━─━─━─━
当日のスライド
─━─━─━─━─━─━─━─━─━─━─━─━─━─━
■twilioのご説明
http://www.slideshare.net/YouheiIwasaki/0-twilio-with-jaws-ug-in

■AWSを使ったTwilio環境構築ハンズオン資料
http://www.slideshare.net/youukkari/twilioug-twilio
─━─━─━─━─━─━─━─━─━─━─━─━─━─━

twilioでウェブブラウザフォンを作成しよう！

① アカウントを作成して、twilioの電話番号を取得しよう！

下記URLにアクセスして、アカウントを取得しましょう。
https://jp.twilio.com/try-twilio/kddi-web

アクセスすると下記フォームが表示されます。
※会社名(オプション)は入力しなくても大丈夫です。
入力後【始めましょう】ボタンをクリックします。

↓

携帯の電話番号を入力して、【Text Me】ボタンをクリックします。
※テキストが届かない場合は、 call me instead. をクリックしてお試しください。

↓

携帯に識別コードが送信されるので、Verification Code と書かれているテキストフォームにコードを入力します。
併せて、Type on the words above と書かれているテキストフォームに CAPTCHA を入力します。
入力後【Submit】ボタンをクリックします。

↓

成功すると下記画面に遷移します。

それでは、twilioの電話番号を取得しましょう。
続けて画面上の【Get your Twilio number】をクリックします。

↓

twilioの電話番号が表示されます。
【Choose this number】をクリックします。

↓

おめでとうございます！！　twilioの電話番号の取得が完了しました！

② サーバーとtwilioシステムのヒモ付をしよう！

まず、TwiML Appsを作成します。

管理メニューの『ツール』→『TWIML APPS』 をクリックします。
下記ページが表示されるので、【TwiMLAppを作成する】をクリックします。

↓

下記画像を参考に
『フレンドリーネーム』と『Request URL』を入力します。
入力後【保存】をクリックして、内容を保存します。
※Request URLに入力するURLは、 http://{AWSで構築したインスタンスのElasticIP}/twilio/TC_BP_TwiML.phpです。

↓

TwiMLAppの作成が完了しました！

↓

それでは、作成したTwiMLAppと先ほど取得したtwilioの電話番号のヒモ付の設定をしていきましょう！！

管理メニューの『電話番号』→『TWILIO電話番号』をクリックします。
下記ページが表示されるので、表示されている番号をクリックします。

↓

Configure with の選択項目内から【アプリケーション】を選択。
アプリケーションの選択項目内から【hoge】（※先ほど作成したTwiMLAppのフレンドリーネーム）を選択。
選択後、【保存】ボタンをクリックします。

↓

おめでとうございます！サーバーとtwilioシステムとのヒモ付が完了しました！

③ ブラウザフォンアプリに TwiML APPの情報を設定しよう！

/var/www/html/twilio 内にあるファイルにTwilML APPの情報を設定していきます。

─━─━─━─━─━─━─━─━─━─━─━─━─━─━
※/var/www/htmlに twilio フォルダーが無い方(ある方はスキップしてください)※
下記URLにアクセス。右メニューの【Download ZIP】をクリックしてダウンロード。
https://github.com/hunnycode/TC-browser-phone
ダウンロードしたフォルダーを twilio にリネームして、/var/www/html アップロードしてください。
─━─━─━─━─━─━─━─━─━─━─━─━─━─━

今回扱うファイルは下記、赤文字の index.php と TC_BP_TwiML.php の2ファイルです。

では、早速設定していきましょう！

■index.php
①、②の部分に情報を入力していきます。

①に入力する、＄accountSid(twilio account SID) と ＄authToken(twilio Auth Token) の値を確認します。
管理メニューの『example@example.com Trial Account』→『アカウント』をクリックします。
遷移先のページでそれぞれの値が確認できます。

確認したら、index.phpを開いて赤枠の箇所にそれぞれ入力して、保存します。

次に、②に入力する ＄capability->allowClientOutgoing(twilio APP SID)と＄capability->allowClientIncoming(twilio client name)の値を確認します。
管理メニューの『ツール』→『TWIML APPS』をクリックします。

下記ページに遷移したら、フレンドリーネームをクリックします。
今回の場合は hoge です。

遷移先のページでそれぞれの値が確認できます。

確認後、再度 index.phpを開いて赤枠の箇所にそれぞれ入力して、保存します。

以上で、index.phpの設定は完了です。

■TC_BP_TwiML.php
①、②の部分に情報を入力していきます。

①に入力する、＄callerId の値を確認します。
管理メニューの『電話番号』→『TWILIO電話番号』をクリックします。
遷移先のページで値の確認ができます。
②に入力する、＄number の値は、TwiMLAppのフレンドリーネームを設定します。
この場合は、 hoge です。