【第1回 Twilio勉強会 with Bluemix in 福岡】twilioハンズオン資料

─━─━─━─━─━─━─━─━─━─━─━─━─━─━
**当日のスライド**
─━─━─━─━─━─━─━─━─━─━─━─━─━─━
■twilioの概要・ハンズオンのご説明
http://www.slideshare.net/YouheiIwasaki/1-twilio-with-bluemix-in

■Bluemix概要・ハンズオンのご説明
http://www.slideshare.net/masayafujita180/twilio-with-bluemix-in
─━─━─━─━─━─━─━─━─━─━─━─━─━─━


# **twilioで音声録音機能を作成しよう！**

<div>&nbsp;</div>

＊**twilio番号をまだ取得していない方向け**＊
twilio番号の取得をお願い致します。すでに取得している方は<a href="#start">コチラ</a>から引き続き作業を進めてください。

管理ページにアクセスして、**【電話番号】**をクリックします。
【管理ページURL】https://jp.twilio.com/user/account/voice-sms-mms

<img width="967" alt="スクリーンショット_2015-10-29_17_40_41.png" src="https://qiita-image-store.s3.amazonaws.com/0/48445/853fdcd9-77a5-880c-b6bb-6352aff455a5.png">

↓

電話番号ページ内にある**【Buy a Number】**をクリックします。
<img width="971" alt="スクリーンショット_2015-10-29_17_43_58.png" src="https://qiita-image-store.s3.amazonaws.com/0/48445/158d93f4-1a84-ef39-f374-ab9b28e4b0cb.png">

↓

国に**「Japan (+81)」**を選択して、**<font color="#c00912">【検索】</font>**ボタンをクリックします。
<img width="851" alt="スクリーンショット_2015-10-29_17_45_51.png" src="https://qiita-image-store.s3.amazonaws.com/0/48445/9f52d8e0-e323-f643-e8b1-fce29731f43f.png">

↓

番号一覧画面からお好きな番号を見つけて**【購入】**ボタンをクリックします。
**※まずは、お試しということでローカル番号(¥108円程)のご購入をおすすめします。**

↓

下記、番号購入の確認画面が表示されますので、問題なければ**<font color="#2893d9">【Buy This Number】</font>**をクリックします。
<img width="583" alt="スクリーンショット_2015-10-30_10_22_54.png" src="https://qiita-image-store.s3.amazonaws.com/0/48445/ce41863d-0892-457f-04ba-5e66b9713a07.png">

↓

:tada: おめでとうございます！ :tada: 
あなただけのtwilio番号の取得がこれで完了致しました。
<img width="581" alt="スクリーンショット_2015-10-30_10_30_38.png" src="https://qiita-image-store.s3.amazonaws.com/0/48445/a386bc76-2949-d7dd-8e9f-09b8f0cb0505.png">

それでは引き続き、
**<font color="#df2630">①音声を録音するTwiMLを作成してBluemixにデプロイしよう！</font>**
に進んでください。


<div>&nbsp;</div>
<div>&nbsp;</div>

<a name="start"></a>
## **<font color="#df2630">① 音声を録音するTwiMLを作成してBluemixにデプロイしよう！</font>**


### サンプルファイルのダウンロード
下記URLに音声を録音するTwiMLのサンプルファイルを用意しています。
【サンプルファイルダウンロード先URL】https://github.com/iwahei/twilioHandsOn20151029


【サンプルファイルダウンロード先URL】にアクセスして遷移先の右メニューの下部にある「**Download ZIP**」よりファイルをダウンロードしてください。
<img width="995" alt="02e0b854-52de-47ce-1dfc-3f85a0def3d4.png" src="https://qiita-image-store.s3.amazonaws.com/0/48445/86ae8990-e544-d21e-f3f4-bbc007d135b0.png">



「**twilioHandsOn20151029-master.zip**」というフォルダーがダウンロードされますので、ダウンロード完了後、フォルダーを解凍します。
フォルダーを解凍すると「**app.php**」というファイルが格納されていますので、テキストエディターで開いてください。
該当の箇所を皆さんの環境に合わせて変更していきます。変更箇所は**2箇所**あります。

<div>&nbsp;</div>
### サンプルファイルの編集
■app.php
①、②の部分にそれぞれ情報を入力していきます。
<img width="1105" alt="スクリーンショット_2015-10-26_21_10_10.png" src="https://qiita-image-store.s3.amazonaws.com/0/48445/acea0747-67e5-5b17-b73a-f893cf909db3.png">



①に入力する **your_application_name** の値を確認します。
Bluemixのページにアクセスします。
https://console.ng.bluemix.net/
(※ログインが必要です)

↓

ページ上部の「**ダッシュボード**」をクリックします。
![スクリーンショット_2015-10-07_1_21_20.png](https://qiita-image-store.s3.amazonaws.com/0/48445/62c8a746-0233-5199-4591-7d07c1856553.png)

↓

ダッシュボードページに遷移した先の【**アプリケーション**】というカテゴリー内で **your application name** の値を確認することができます。
ここで確認する **your application name** は、**Node-REDのアプリケーション名**です。
![スクリーンショット_2015-10-07_11_48_16.png](https://qiita-image-store.s3.amazonaws.com/0/48445/f2849a7c-689e-b41a-c9d0-23b01a7b0fec.png)
※ここでは例として **twilio-hoge** というアプリケーション名を設定していますが、**your application name** の値は皆さんの環境によって変わってきます。皆さんが設定されたアプリケーション名を使用してください。

↓

**your application name** の値を確認後、再度「**app.php**」を開いて赤枠の箇所に入力して保存します。
■app.php
<img width="1106" alt="スクリーンショット_2015-10-26_21_14_00.png" src="https://qiita-image-store.s3.amazonaws.com/0/48445/7b908b21-ac63-283f-820f-347a910c3801.png">


<div>&nbsp;</div>
<div>&nbsp;</div>

②にはそれぞれ、
**"+81xxxxxxxxxx"** に「あなたの携帯番号」、**"your name"** に、「あなたのお名前」を入力して保存します。
<font color="#df2630">**※注意：**</font>番号は、E.164形式で入力してください。
例）**090-1234-5678** の場合、**+819012345678** の様に記述します。

■app.php
<img width="1104" alt="スクリーンショット_2015-10-26_21_15_46.png" src="https://qiita-image-store.s3.amazonaws.com/0/48445/41b22a41-3028-bee9-83fe-7db299acfab6.png">


<div>&nbsp;</div>


保存後、「**app.php**」を「PHP Webアプリケーションサーバーの構築 ハンズオン」で作成した「**twilio_bluemix**」フォルダーの中に入れます。


↓

コンソールを立ち上げます。
Windowsの方は「**コマンドプロンプト**」を、Macの方は「**ターミナル**」を起動してください。
![スクリーンショット 2015-10-07 14.22.14.png](https://qiita-image-store.s3.amazonaws.com/0/48445/71afb1ee-f930-85ad-efb9-b5d47e30cc8f.png)

↓

コンソールから「PHP Webアプリケーションサーバーの構築 ハンズオン」で作成した「**twilio_bluemix**」フォルダーに移動します。

ここからはお使いのパソコンによって操作方法が異なります。
お使いのパソコンを選択後、手順に従って作業を進めてください。

<a href="#windows">≫Windowsをおつかいの方</a>
<a href="#mac">≫Macをおつかいの方</a>



### windowsでデプロイ
<a name="windows"></a>
**【Windows7の場合】**
windowsのスタートボタンをクリックして、検索ボックスに「**twilio_bluemix**」と入力します。入力後一覧に「**twilio_bluemix**」フォルダーが表示されることを確認します。
![new1.png](https://qiita-image-store.s3.amazonaws.com/0/48445/00b16e47-a279-797d-af42-2c81e619f699.png)

↓

「**twilio_bluemix**」フォルダーをクリックすると下記ウィンドウが開きます。
表示されているアドレスバーを右クリックして、「**アドレスのコピー(C)**」を選択します。
![new2.png](https://qiita-image-store.s3.amazonaws.com/0/48445/89ba74a2-d0c5-35bb-c8b9-e4bc50e1ad0f.png)

↓

コマンドプロンプトに戻って下記のコマンドを入力します。
**$ cd ␣ コピーした内容をペースト**
<font color="#df2630">**※注意：**</font> **␣** は半角スペースの意味です。

**コマンドプロンプト**でコピーした内容をペーストする場合は少し特殊です。
下記手順で先ほどコピーした「**twilio_bluemix**」フォルダーまでのパスをペースをしてください。
![new5.png](https://qiita-image-store.s3.amazonaws.com/0/48445/4fb234d0-e464-bf8e-5109-ab773f647abd.png)

↓

うまくいくと下記のように 「**twilio_bluemix**」フォルダーまでのフォルダーパスがペーストされます。
![new6.png](https://qiita-image-store.s3.amazonaws.com/0/48445/dbe06b28-b1ae-7a1b-6a56-f3623abec60f.png)

↓

入力後エンターキーを押して、下記画面の様になることを確認します。
![new7.png](https://qiita-image-store.s3.amazonaws.com/0/48445/cad1e612-d058-150e-1697-97927531d3c6.png)

↓

次にcfコマンド使用してデプロイ(サーバーにapp.phpをアップロード)します。
**$ cf ␣ push ␣ アプリケーション名(.phpのアプリケーション名 <font color="#0000ff">※1</font>)**
**<font color="#df2630">※注意：</font>** ␣ は半角スペースの意味です。

**<font color="#0000ff">※1</font>** .phpのアプリケーション名は、ダッシュボードページ内の【アプリケーション】というカテゴリーで確認することができます。
![スクリーンショット_2015-10-07_17_21_09.png](https://qiita-image-store.s3.amazonaws.com/0/48445/677989d2-1e98-db0d-aed0-7cdf311d86d9.png)

↓

下記の様な結果画面が表示されたら :tada: デプロイ成功です :tada: ！
![windows_complate_deploy.png](https://qiita-image-store.s3.amazonaws.com/0/48445/8411fa17-d958-5bfb-b7b6-eddbe7600f64.png)


引き続き、
<a href="#two_twilio">② Twilio電話番号に電話が架かってくると指定のURLを叩くように紐付けの設定をしよう！</a>
へ進んでください！



<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>


### Macでデプロイ
<a name="mac"></a>
**【Macの場合】**
まず、Finderをクリックして「**twilio_bluemix**」フォルダー内にある「**app.php**」まで行きファイルを選択します。
<img width="1280" alt="b9f2ec3b-9c1a-645e-74f7-07072abc6e58.png" src="https://qiita-image-store.s3.amazonaws.com/0/48445/6e68101f-03a3-8fe5-7eeb-39e36bf83e63.png">



↓

「**app.php**」を選択した状態で右クリックし、「**情報を見る**」をクリックします。
<img width="1280" alt="c7832222-14a3-15ae-84ce-245c0e264645.png" src="https://qiita-image-store.s3.amazonaws.com/0/48445/b6167953-b787-9029-3b98-06e7264a8a89.png">



↓

クリックすると、下記画像のように「**twilio_bluemix**」のフォルダー情報が表示されますので、場所をドラッグで選択し、テキストをコピーします。
<img width="1279" alt="66c1f58a-cf26-5c20-6a58-dbe75a513430.png" src="https://qiita-image-store.s3.amazonaws.com/0/48445/9c087f05-a8c7-e729-c394-ccba6fae5150.png">



↓

コンソールに戻って下記の様にコマンドを入力します。
**$ cd ␣ コピーした内容をペースト**
<font color="#df2630">**※注意：**</font> **␣** は半角スペースの意味です。

<img width="1280" alt="f17f5294-ae5e-7f30-0cf7-ee99fa2eff5d.png" src="https://qiita-image-store.s3.amazonaws.com/0/48445/bb8430e8-2a4d-25a3-ad89-95188bd9e9c4.png">


入力後エンターキーを押して、下記画面の様になることを確認します。
![スクリーンショット_2015-10-07_16_12_46.png](https://qiita-image-store.s3.amazonaws.com/0/48445/c0a0de96-6599-4d33-e425-fbb26e75c486.png)


↓

次にcfコマンド使用してデプロイ(サーバーにapp.phpをアップロード)します。
**$ cf ␣ push ␣ アプリケーション名(.phpのアプリケーション名 <font color="#0000ff">※1</font>)**
<font color="#df2630">**※注意：**</font> **␣** は半角スペースの意味です。

<a name="phpApplication"></a>
<font color="#0000ff">**※1**</font> **.phpのアプリケーション名**は、ダッシュボードページに遷移した先の【**アプリケーション**】というカテゴリー内で確認することができます。
![スクリーンショット_2015-10-07_17_21_09.png](https://qiita-image-store.s3.amazonaws.com/0/48445/677989d2-1e98-db0d-aed0-7cdf311d86d9.png)


**.phpのアプリケーション名**を確認した後、下記のようにコマンドを入力してデプロイします。
![スクリーンショット_2015-10-07_17_29_17.png](https://qiita-image-store.s3.amazonaws.com/0/48445/330cbd3c-8350-198f-61d9-e5fd79f5f93d.png)


下記の様な結果画面が表示されたら :tada: デプロイ成功です :tada: ！
![mac_complete_deploy.png](https://qiita-image-store.s3.amazonaws.com/0/48445/f0c00efa-b8e7-1f2b-b86a-da682f6a4a2f.png)



<br />


<a name="two_twilio"></a>
## **<font color="#df2630">② Twilio電話番号に電話が架かってくると指定のURLを叩くように紐付けの設定をしよう！</font>**

twilioの管理画面にログインします。
【twilio管理画面URL】https://jp.twilio.com/user/account/voice-sms-mms

ログイン後、上部メニューの「**電話番号**」をクリックします。
![スクリーンショット_2015-10-08_0_43_56.png](https://qiita-image-store.s3.amazonaws.com/0/48445/5a7211f6-ba5d-13e9-0a7e-0cdf51693bc7.png)

↓

一覧より、紐付けを行いたいtwilio電話番号をクリックします。
![スクリーンショット_2015-10-08_0_50_55.png](https://qiita-image-store.s3.amazonaws.com/0/48445/ec3eff66-5760-ec0d-662b-4e3f3712dd3a.png)

↓

twilio電話番号をクリックするとポップアップウィンドウが表示されますので「**音声通話**」タブをクリックします。
**Configure with** は **URL** を選択してください。
**Request URL** は **http://{.phpのアプリケーション名}.mybluemix.net/app.php** と入力してください。
※.phpのアプリケーション名がわからない方は<a href="#phpApplication">コチラ</a>。
![スクリーンショット_2015-10-08_1_00_55.png](https://qiita-image-store.s3.amazonaws.com/0/48445/52371818-0c84-1902-2553-69697348915a.png)
その後<font color="#c00912">**【保存】**</font>をクリックして内容を保存します。

以上でTwilio電話番号に電話が架かってくると指定のURLを叩く紐付けの設定は完了です！
お疲れ様でした！:bow: 

<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>