─━─━─━─━─━─━─━─━─━─━─━─━─━─━
当日のスライド
─━─━─━─━─━─━─━─━─━─━─━─━─━─━
■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
↓
電話番号ページ内にある【Buy a Number】をクリックします。
↓
国に「Japan (+81)」を選択して、【検索】ボタンをクリックします。
↓
番号一覧画面からお好きな番号を見つけて【購入】ボタンをクリックします。
※まずは、お試しということでローカル番号(¥108円程)のご購入をおすすめします。
↓
下記、番号購入の確認画面が表示されますので、問題なければ【Buy This Number】をクリックします。
↓
おめでとうございます！
あなただけのtwilio番号の取得がこれで完了致しました。
それでは引き続き、
①音声を録音するTwiMLを作成してBluemixにデプロイしよう！
に進んでください。
① 音声を録音するTwiMLを作成してBluemixにデプロイしよう！
サンプルファイルのダウンロード
下記URLに音声を録音するTwiMLのサンプルファイルを用意しています。
【サンプルファイルダウンロード先URL】https://github.com/iwahei/twilioHandsOn20151029
【サンプルファイルダウンロード先URL】にアクセスして遷移先の右メニューの下部にある「Download ZIP」よりファイルをダウンロードしてください。
「twilioHandsOn20151029-master.zip」というフォルダーがダウンロードされますので、ダウンロード完了後、フォルダーを解凍します。
フォルダーを解凍すると「app.php」というファイルが格納されていますので、テキストエディターで開いてください。
該当の箇所を皆さんの環境に合わせて変更していきます。変更箇所は2箇所あります。
サンプルファイルの編集
■app.php
①、②の部分にそれぞれ情報を入力していきます。
①に入力する your_application_name の値を確認します。
Bluemixのページにアクセスします。
https://console.ng.bluemix.net/
(※ログインが必要です)
↓
ページ上部の「ダッシュボード」をクリックします。
↓
ダッシュボードページに遷移した先の【アプリケーション】というカテゴリー内で your application name の値を確認することができます。
ここで確認する your application name は、Node-REDのアプリケーション名です。
※ここでは例として twilio-hoge というアプリケーション名を設定していますが、your application name の値は皆さんの環境によって変わってきます。皆さんが設定されたアプリケーション名を使用してください。
↓
your application name の値を確認後、再度「app.php」を開いて赤枠の箇所に入力して保存します。
■app.php
②にはそれぞれ、
"+81xxxxxxxxxx" に「あなたの携帯番号」、"your name" に、「あなたのお名前」を入力して保存します。
※注意：番号は、E.164形式で入力してください。
例）090-1234-5678 の場合、+819012345678 の様に記述します。
■app.php
保存後、「app.php」を「PHP Webアプリケーションサーバーの構築 ハンズオン」で作成した「twilio_bluemix」フォルダーの中に入れます。
↓
コンソールを立ち上げます。
Windowsの方は「コマンドプロンプト」を、Macの方は「ターミナル」を起動してください。
↓
コンソールから「PHP Webアプリケーションサーバーの構築 ハンズオン」で作成した「twilio_bluemix」フォルダーに移動します。
ここからはお使いのパソコンによって操作方法が異なります。
お使いのパソコンを選択後、手順に従って作業を進めてください。
windowsでデプロイ
【Windows7の場合】
windowsのスタートボタンをクリックして、検索ボックスに「twilio_bluemix」と入力します。入力後一覧に「twilio_bluemix」フォルダーが表示されることを確認します。
↓
「twilio_bluemix」フォルダーをクリックすると下記ウィンドウが開きます。
表示されているアドレスバーを右クリックして、「アドレスのコピー(C)」を選択します。
↓
コマンドプロンプトに戻って下記のコマンドを入力します。
$ cd ␣ コピーした内容をペースト
※注意： ␣ は半角スペースの意味です。
コマンドプロンプトでコピーした内容をペーストする場合は少し特殊です。
下記手順で先ほどコピーした「twilio_bluemix」フォルダーまでのパスをペースをしてください。
↓
うまくいくと下記のように 「twilio_bluemix」フォルダーまでのフォルダーパスがペーストされます。
↓
入力後エンターキーを押して、下記画面の様になることを確認します。
↓
次にcfコマンド使用してデプロイ(サーバーにapp.phpをアップロード)します。
$ cf ␣ push ␣ アプリケーション名(.phpのアプリケーション名 ※1)
※注意： ␣ は半角スペースの意味です。
※1 .phpのアプリケーション名は、ダッシュボードページ内の【アプリケーション】というカテゴリーで確認することができます。
↓
下記の様な結果画面が表示されたら デプロイ成功です ！
引き続き、
② Twilio電話番号に電話が架かってくると指定のURLを叩くように紐付けの設定をしよう！
へ進んでください！
Macでデプロイ
【Macの場合】
まず、Finderをクリックして「twilio_bluemix」フォルダー内にある「app.php」まで行きファイルを選択します。
↓
「app.php」を選択した状態で右クリックし、「情報を見る」をクリックします。
↓
クリックすると、下記画像のように「twilio_bluemix」のフォルダー情報が表示されますので、場所をドラッグで選択し、テキストをコピーします。
↓
コンソールに戻って下記の様にコマンドを入力します。
$ cd ␣ コピーした内容をペースト
※注意： ␣ は半角スペースの意味です。
入力後エンターキーを押して、下記画面の様になることを確認します。
↓
次にcfコマンド使用してデプロイ(サーバーにapp.phpをアップロード)します。
$ cf ␣ push ␣ アプリケーション名(.phpのアプリケーション名 ※1)
※注意： ␣ は半角スペースの意味です。
※1 .phpのアプリケーション名は、ダッシュボードページに遷移した先の【アプリケーション】というカテゴリー内で確認することができます。
.phpのアプリケーション名を確認した後、下記のようにコマンドを入力してデプロイします。
下記の様な結果画面が表示されたら デプロイ成功です ！
② Twilio電話番号に電話が架かってくると指定のURLを叩くように紐付けの設定をしよう！
twilioの管理画面にログインします。
【twilio管理画面URL】https://jp.twilio.com/user/account/voice-sms-mms
ログイン後、上部メニューの「電話番号」をクリックします。
↓
一覧より、紐付けを行いたいtwilio電話番号をクリックします。
↓
twilio電話番号をクリックするとポップアップウィンドウが表示されますので「音声通話」タブをクリックします。
Configure with は URL を選択してください。
Request URL は http://{.phpのアプリケーション名}.mybluemix.net/app.php と入力してください。
※.phpのアプリケーション名がわからない方はコチラ。
その後【保存】をクリックして内容を保存します。
以上でTwilio電話番号に電話が架かってくると指定のURLを叩く紐付けの設定は完了です！
お疲れ様でした！