【第0回 Twilio勉強会 with JAWS UG in 福岡】twilioハンズオン資料

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

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


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

<div></div>

## **<font color="#df2630">① アカウントを作成して、twilioの電話番号を取得しよう！</font>**

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

アクセスすると下記フォームが表示されます。
※会社名(オプション)は入力しなくても大丈夫です。
入力後**<font color="#c00912">【始めましょう】</font>**ボタンをクリックします。
![スクリーンショット 2015-08-18 17.21.31.png](https://qiita-image-store.s3.amazonaws.com/0/48445/f6167132-7522-e664-b1e5-b2e4a6578edc.png)

↓

携帯の電話番号を入力して、**<font color="#c00912">【Text Me】</font>**ボタンをクリックします。
※テキストが届かない場合は、 **<font color="#c00912">call me instead.</font>** をクリックしてお試しください。
![スクリーンショット 2015-08-18 17.32.15.png](https://qiita-image-store.s3.amazonaws.com/0/48445/3ff31e7a-4ee5-1ccb-66cb-3d4f230a2f5a.png)

↓

携帯に識別コードが送信されるので、Verification Code と書かれているテキストフォームにコードを入力します。
併せて、Type on the words above と書かれているテキストフォームに CAPTCHA を入力します。
入力後**<font color="#c00912">【Submit】</font>**ボタンをクリックします。
![スクリーンショット 2015-08-18 17.34.27.png](https://qiita-image-store.s3.amazonaws.com/0/48445/770e637e-bd4e-6bcb-8326-1e6a75d9a624.png)

↓

成功すると下記画面に遷移します。
![スクリーンショット_2015-08-18_17_39_34.png](https://qiita-image-store.s3.amazonaws.com/0/48445/adbac577-0a19-7373-0d72-a961ac1c4923.png)
それでは、twilioの電話番号を取得しましょう。
続けて画面上の**<font color="#c00912">【Get your Twilio number】</font>**をクリックします。

↓

twilioの電話番号が表示されます。
**<font color="#c00912">【Choose this number】</font>**をクリックします。
![スクリーンショット_2015-08-18_17_38_13.png](https://qiita-image-store.s3.amazonaws.com/0/48445/2d4ed116-33d3-9d78-2fd9-ae0ab968d5a1.png)

↓

:tada: おめでとうございます！！ :tada: 　twilioの電話番号の取得が完了しました！
![スクリーンショット_2015-08-18_17_48_32.png](https://qiita-image-store.s3.amazonaws.com/0/48445/206b4df7-a7de-d643-712a-826b41c466f3.png)


<br />


## **<font color="#df2630">② サーバーとtwilioシステムのヒモ付をしよう！</font>**

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

管理メニューの**『ツール』**→**『TWIML APPS』** をクリックします。
下記ページが表示されるので、**<font color="#c00912">【TwiMLAppを作成する】</font>**をクリックします。
![スクリーンショット_2015-08-18_18_04_11.png](https://qiita-image-store.s3.amazonaws.com/0/48445/8a5af806-2b0d-ed53-b483-9e51d4ec5fbf.png)

↓

下記画像を参考に
**『フレンドリーネーム』**と**『Request URL』**を入力します。
入力後**<font color="#c00912">【保存】</font>**をクリックして、内容を保存します。
**※Request URLに入力するURLは、 http://{AWSで構築したインスタンスのElasticIP}/twilio/TC_BP_TwiML.phpです。**
![c26b88c3-d5c5-8460-d6b3-1fff4bb99197.png](https://qiita-image-store.s3.amazonaws.com/0/48445/47bd6da1-58c4-783d-b7ba-a6ea73de1a07.png)



↓

TwiMLAppの作成が完了しました！
![4d1250f5-059c-c9af-4417-b49b1eb351e1.png](https://qiita-image-store.s3.amazonaws.com/0/48445/08b43896-66ad-5562-368a-605352b390ae.png)

↓

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

管理メニューの**『電話番号』**→**『TWILIO電話番号』**をクリックします。
下記ページが表示されるので、表示されている番号をクリックします。
![スクリーンショット_2015-08-19_10_57_38.png](https://qiita-image-store.s3.amazonaws.com/0/48445/eb073435-4a11-d0de-f1eb-4996ccee2334.png)

↓

Configure with の選択項目内から**【アプリケーション】**を選択。
アプリケーションの選択項目内から**【hoge】（※先ほど作成したTwiMLAppのフレンドリーネーム）**を選択。
選択後、**<font color="#c00912">【保存】</font>**ボタンをクリックします。
![スクリーンショット_2015-08-19_11_06_28.png](https://qiita-image-store.s3.amazonaws.com/0/48445/59e0d82b-e092-1094-5e87-e3466658736b.png)

↓

:tada: おめでとうございます！ :tada: サーバーとtwilioシステムとのヒモ付が完了しました！
![9306d53a-365e-e792-9df1-6516fdc9b559.png](https://qiita-image-store.s3.amazonaws.com/0/48445/ab8c227d-cb41-ef8d-aabd-88aba947a581.png)


<br />


## **<font color="#df2630">③ ブラウザフォンアプリに TwiML APPの情報を設定しよう！</font>**


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

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

今回扱うファイルは下記、赤文字の <font color="red">index.php</font> と <font color="red">TC_BP_TwiML.php</font> の2ファイルです。

![folder.png](https://qiita-image-store.s3.amazonaws.com/0/48445/f3626a99-f621-2bd3-ecd4-39d8ae82c416.png)


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


**■index.php**
①、②の部分に情報を入力していきます。
![スクリーンショット_2015-08-19_15_15_11.png](https://qiita-image-store.s3.amazonaws.com/0/48445/76245b53-dd02-7391-cd91-3ea7f51cd1fc.png)

①に入力する、**＄accountSid(twilio account SID)** と **＄authToken(twilio Auth Token)** の値を確認します。
管理メニューの**『example@example.com Trial Account』**→**『アカウント』**をクリックします。
遷移先のページでそれぞれの値が確認できます。
![スクリーンショット_2015-08-19_17_32_37.png](https://qiita-image-store.s3.amazonaws.com/0/48445/a5259bd5-d97c-94ad-5330-ae714b1debb8.png)


確認したら、index.phpを開いて赤枠の箇所にそれぞれ入力して、保存します。
![スクリーンショット_2015-08-19_15_47_09.png](https://qiita-image-store.s3.amazonaws.com/0/48445/1ac9d464-9cc3-8f6a-dee9-c005ba202d76.png)


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

下記ページに遷移したら、フレンドリーネームをクリックします。
今回の場合は  **hoge** です。
![スクリーンショット_2015-08-19_16_07_11.png](https://qiita-image-store.s3.amazonaws.com/0/48445/ee8a86fb-fe36-8e6b-7187-9d892046b26a.png)

遷移先のページでそれぞれの値が確認できます。
![スクリーンショット_2015-08-19_16_10_09.png](https://qiita-image-store.s3.amazonaws.com/0/48445/4ba542dd-5e95-8caf-5df1-d329ead206d7.png)

確認後、再度 index.phpを開いて赤枠の箇所にそれぞれ入力して、保存します。
![スクリーンショット_2015-08-19_16_15_57.png](https://qiita-image-store.s3.amazonaws.com/0/48445/7538f585-82d4-fc40-d63a-94983c886974.png)

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


**■TC_BP_TwiML.php**
①、②の部分に情報を入力していきます。
![スクリーンショット_2015-08-19_16_32_06.png](https://qiita-image-store.s3.amazonaws.com/0/48445/dfaae38e-3f19-93ed-c73c-0a72c0afcf29.png)

①に入力する、**＄callerId** の値を確認します。
管理メニューの**『電話番号』**→**『TWILIO電話番号』**をクリックします。
遷移先のページで値の確認ができます。
②に入力する、**＄number** の値は、TwiMLAppのフレンドリーネームを設定します。
この場合は、 **hoge** です。
![a250cd0f-46fc-f088-5571-410cf4a3d48f.png](https://qiita-image-store.s3.amazonaws.com/0/48445/1db12edc-f12c-4300-c4ac-61f94492892d.png)


↓

確認後、TC_BP_TwiML.phpを開いて赤枠の箇所にそれぞれ入力して保存します。
**※$callerIdに入力する番号は、 +810512345678(スペース、ハイフン無し)、 +81 50-1234-5678(スペース、ハイフンあり) どちらの形式でも大丈夫です。**
![スクリーンショット_2015-08-19_17_44_40.png](https://qiita-image-store.s3.amazonaws.com/0/48445/1d571e63-21be-2636-8bb4-402c766caa04.png)

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


<br />


## **<font color="#df2630">④ ブラウザから電話をかけてみよう！</font>**

**index.php** と **TC_BP_TwiML.php**の設定が終わったら、
実際にブラウザから **http://{AWSで構築したインスタンスのElasticIP}/twilio/index.php** にアクセスしてみましょう。
アクセスすると、下記ページが表示されます。 

![スクリーンショット 2015-08-19 16.45.50.png](https://qiita-image-store.s3.amazonaws.com/0/48445/0289560f-f5a4-a956-579a-21060237da14.png)

それでは実際にブラウザから電話をかけてみましょう！

![スクリーンショット_2015-08-19_16_49_10.png](https://qiita-image-store.s3.amazonaws.com/0/48445/6bce18ec-3a16-c38a-d090-c0361e3b1c3b.png)

どうでしょう？かかってきましたか？
:tada: かかってきたら成功です！ :tada: 
こんどは逆にtwilioの電話番号にかけてみましょう！

以上でハンズオンは終了です。
お疲れ様でした。 :bow: