Edited at

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

More than 3 years have passed since last update.

─━─━─━─━─━─━─━─━─━─━─━─━─━─━

当日のスライド

─━─━─━─━─━─━─━─━─━─━─━─━─━─━

■twilioの概要・ハンズオンのご説明

http://www.slideshare.net/YouheiIwasaki/1-twilio-with-bluemix-in

■Bluemix概要・ハンズオンのご説明

http://www.slideshare.net/masayafujita180/twilio-with-bluemix-in

─━─━─━─━─━─━─━─━─━─━─━─━─━─━


twilioで音声録音機能を作成しよう!

 

twilio番号をまだ取得していない方向け

twilio番号の取得をお願い致します。すでに取得している方はコチラから引き続き作業を進めてください。

管理ページにアクセスして、【電話番号】をクリックします。

【管理ページURL】https://jp.twilio.com/user/account/voice-sms-mms

スクリーンショット_2015-10-29_17_40_41.png

電話番号ページ内にある【Buy a Number】をクリックします。

スクリーンショット_2015-10-29_17_43_58.png

国に「Japan (+81)」を選択して、【検索】ボタンをクリックします。

スクリーンショット_2015-10-29_17_45_51.png

番号一覧画面からお好きな番号を見つけて【購入】ボタンをクリックします。

※まずは、お試しということでローカル番号(¥108円程)のご購入をおすすめします。

下記、番号購入の確認画面が表示されますので、問題なければ【Buy This Number】をクリックします。

スクリーンショット_2015-10-30_10_22_54.png

:tada: おめでとうございます! :tada:

あなただけのtwilio番号の取得がこれで完了致しました。

スクリーンショット_2015-10-30_10_30_38.png

それでは引き続き、

①音声を録音するTwiMLを作成してBluemixにデプロイしよう!

に進んでください。

 

 


① 音声を録音するTwiMLを作成してBluemixにデプロイしよう!


サンプルファイルのダウンロード

下記URLに音声を録音するTwiMLのサンプルファイルを用意しています。

【サンプルファイルダウンロード先URL】https://github.com/iwahei/twilioHandsOn20151029

【サンプルファイルダウンロード先URL】にアクセスして遷移先の右メニューの下部にある「Download ZIP」よりファイルをダウンロードしてください。

02e0b854-52de-47ce-1dfc-3f85a0def3d4.png

twilioHandsOn20151029-master.zip」というフォルダーがダウンロードされますので、ダウンロード完了後、フォルダーを解凍します。

フォルダーを解凍すると「app.php」というファイルが格納されていますので、テキストエディターで開いてください。

該当の箇所を皆さんの環境に合わせて変更していきます。変更箇所は2箇所あります。

 


サンプルファイルの編集

■app.php

①、②の部分にそれぞれ情報を入力していきます。

スクリーンショット_2015-10-26_21_10_10.png

①に入力する your_application_name の値を確認します。

Bluemixのページにアクセスします。

https://console.ng.bluemix.net/

(※ログインが必要です)

ページ上部の「ダッシュボード」をクリックします。

スクリーンショット_2015-10-07_1_21_20.png

ダッシュボードページに遷移した先の【アプリケーション】というカテゴリー内で your application name の値を確認することができます。

ここで確認する your application name は、Node-REDのアプリケーション名です。

スクリーンショット_2015-10-07_11_48_16.png

※ここでは例として twilio-hoge というアプリケーション名を設定していますが、your application name の値は皆さんの環境によって変わってきます。皆さんが設定されたアプリケーション名を使用してください。

your application name の値を確認後、再度「app.php」を開いて赤枠の箇所に入力して保存します。

■app.php

スクリーンショット_2015-10-26_21_14_00.png

 

 

②にはそれぞれ、

"+81xxxxxxxxxx" に「あなたの携帯番号」、"your name" に、「あなたのお名前」を入力して保存します。

※注意:番号は、E.164形式で入力してください。

例)090-1234-5678 の場合、+819012345678 の様に記述します。

■app.php

スクリーンショット_2015-10-26_21_15_46.png

 

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

コンソールを立ち上げます。

Windowsの方は「コマンドプロンプト」を、Macの方は「ターミナル」を起動してください。

スクリーンショット 2015-10-07 14.22.14.png

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

ここからはお使いのパソコンによって操作方法が異なります。

お使いのパソコンを選択後、手順に従って作業を進めてください。

≫Windowsをおつかいの方

≫Macをおつかいの方


windowsでデプロイ



【Windows7の場合】

windowsのスタートボタンをクリックして、検索ボックスに「twilio_bluemix」と入力します。入力後一覧に「twilio_bluemix」フォルダーが表示されることを確認します。

new1.png

twilio_bluemix」フォルダーをクリックすると下記ウィンドウが開きます。

表示されているアドレスバーを右クリックして、「アドレスのコピー(C)」を選択します。

new2.png

コマンドプロンプトに戻って下記のコマンドを入力します。

$ cd ␣ コピーした内容をペースト

※注意: は半角スペースの意味です。

コマンドプロンプトでコピーした内容をペーストする場合は少し特殊です。

下記手順で先ほどコピーした「twilio_bluemix」フォルダーまでのパスをペースをしてください。

new5.png

うまくいくと下記のように 「twilio_bluemix」フォルダーまでのフォルダーパスがペーストされます。

new6.png

入力後エンターキーを押して、下記画面の様になることを確認します。

new7.png

次にcfコマンド使用してデプロイ(サーバーにapp.phpをアップロード)します。

$ cf ␣ push ␣ アプリケーション名(.phpのアプリケーション名 ※1)

※注意: ␣ は半角スペースの意味です。

※1 .phpのアプリケーション名は、ダッシュボードページ内の【アプリケーション】というカテゴリーで確認することができます。

スクリーンショット_2015-10-07_17_21_09.png

下記の様な結果画面が表示されたら :tada: デプロイ成功です :tada:

windows_complate_deploy.png

引き続き、

② Twilio電話番号に電話が架かってくると指定のURLを叩くように紐付けの設定をしよう!

へ進んでください!

 

 

 

 


Macでデプロイ



【Macの場合】

まず、Finderをクリックして「twilio_bluemix」フォルダー内にある「app.php」まで行きファイルを選択します。

b9f2ec3b-9c1a-645e-74f7-07072abc6e58.png

app.php」を選択した状態で右クリックし、「情報を見る」をクリックします。

c7832222-14a3-15ae-84ce-245c0e264645.png

クリックすると、下記画像のように「twilio_bluemix」のフォルダー情報が表示されますので、場所をドラッグで選択し、テキストをコピーします。

66c1f58a-cf26-5c20-6a58-dbe75a513430.png

コンソールに戻って下記の様にコマンドを入力します。

$ cd ␣ コピーした内容をペースト

※注意: は半角スペースの意味です。

f17f5294-ae5e-7f30-0cf7-ee99fa2eff5d.png

入力後エンターキーを押して、下記画面の様になることを確認します。

スクリーンショット_2015-10-07_16_12_46.png

次にcfコマンド使用してデプロイ(サーバーにapp.phpをアップロード)します。

$ cf ␣ push ␣ アプリケーション名(.phpのアプリケーション名 ※1)

※注意: は半角スペースの意味です。



※1 .phpのアプリケーション名は、ダッシュボードページに遷移した先の【アプリケーション】というカテゴリー内で確認することができます。

スクリーンショット_2015-10-07_17_21_09.png

.phpのアプリケーション名を確認した後、下記のようにコマンドを入力してデプロイします。

スクリーンショット_2015-10-07_17_29_17.png

下記の様な結果画面が表示されたら :tada: デプロイ成功です :tada:

mac_complete_deploy.png



② Twilio電話番号に電話が架かってくると指定のURLを叩くように紐付けの設定をしよう!

twilioの管理画面にログインします。

【twilio管理画面URL】https://jp.twilio.com/user/account/voice-sms-mms

ログイン後、上部メニューの「電話番号」をクリックします。

スクリーンショット_2015-10-08_0_43_56.png

一覧より、紐付けを行いたいtwilio電話番号をクリックします。

スクリーンショット_2015-10-08_0_50_55.png

twilio電話番号をクリックするとポップアップウィンドウが表示されますので「音声通話」タブをクリックします。

Configure withURL を選択してください。

Request URLhttp://{.phpのアプリケーション名}.mybluemix.net/app.php と入力してください。

※.phpのアプリケーション名がわからない方はコチラ

スクリーンショット_2015-10-08_1_00_55.png

その後【保存】をクリックして内容を保存します。

以上でTwilio電話番号に電話が架かってくると指定のURLを叩く紐付けの設定は完了です!

お疲れ様でした!:bow: