Azure Visual Stuido Online “monaco”でTwilioの開発をより簡単に

日本マイクロソフト社と定期的に開催している「Twilio x Azure ハンズオンイベント(以下、ハンズオンイベント)」で実施した「初級編」の内容をご紹介いたします。
スクリンショットや説明が細かくなっていますが、最後まで手順通り作業を行いますとAzure websites上でTwilioを動かせることと、Twilioの基本的な動きを試すことができると思います。
このブログをご覧頂いているみなさんも試してみてください。


約2時間30分間行われるハンズオンイベントは、両サービスの開発の簡単さを中心にして、イベントが終わっても次のステップに各自進められるように、開発方法をみなさんにお伝えしている、デベロッパー向けイベントです。

今回紹介をする、Visual Studio Onlineは、Azure websitesを基盤にしたブラウザで動作する開発環境です。プロジェクトの生成はもちろん、ソースコードの作成、編集、削除など開発を行う際に必要な機能が揃っています。

Twilioは、TwiML(Twilio Markup Language)をウェブに配置をし、指定されたURLにTwilioがリクエストを送る仕組みになっています。そのため、ウェブサーバーが必要。
今までは、ウェブサーバーを用意し、ローカルで作成したTwiMLをSCPやFTPなどを使ってウェブサーバーにアップロードしましたが、Visual Studio Onlineを使うことによってファイルのアップロードに関する時間が短縮され、Twilio機能をより多く試すことができました。
ハンズオンイベントは、参加者各自の環境でハンズオンを行うこともできるようになっていますので、自由な感じでTwilioを体験可能です。

Twilioのソースコードはこちら。
着信専用のTwilio電話番号を用意し、電話番号のリクエストURLに下記のTwiMLを設定します。
これだけで、着信専用電話番号(050番号)に電話をかけると最初案内メッセージをアナウンスし、その後発信者の声を録音します。最後に録音された音声ファイルを確認することができます。
<Say>:テキストを音声に変換します。
<Record>:録音を行います。
<Play>:MP3など音声ファイルを再生します。

それでは、やってみたいと思います。
最初に、各サービスのアカウントは各自準備してください。
両サービスとも無料で始められます。新規登録は下記のリンクからできます。
Twilio for KDDI Web Communications 新規登録
Microsoftアカウント

流れとしては、
・Azure websites生成
・Visual Studio Onlineセットアップ
・TwiML作成
・Request URL設定
・電話をかけて確認する

・Azure websites生成
まず、最初にMicrosoft Azureのポータルにログインをします。
画面の下段にある「新規」を選択してwebsitesを生成します。
スクリーンショット 2015-02-19 23.10.48.png
websitesを生成します。
作成方法にはいくつかありますが、今回は「簡易作成」から作成してみたいと思います。
① コンピューティング → WEBサイト → 簡易作成
② URLにサイトのURLを入力
③ 最後に「WEBサイトの作成」をクリックしてサイトの作成を完了

スクリーンショット 2015-02-19 23.12.55.png
これで、「twilio-monaco」が作成されました。
スクリーンショット 2015-02-19 23.16.58.png
・Visual Studio Onlineセットアップ
次は、Visual Stuido Online "monaco"をセットアップします。
ダッシュボードの「構成」をクリックします。
この「構成」では、websitesのいろんな設定が可能です。
例えば、PHPのバージョンの選択、証明書やドメイン、ソケットなどサイト全般の設定が可能です。

ここで確認!
このwebsitesには「Visual Studio Online」が設定されていないため、「概要」にも表示されていません。
スクリーンショット 2015-02-19 23.18.54.png
構成画面の一部ですが、項目の中で「VISUAL STUDIO ONLINEでの編集」設定に移動します。
① VISUAL STUDIO ONLIENでの編集を「ON」にする(デフォルト:OFF)
② 「保存」ボタンをクリックして設定を保存
スクリーンショット 2015-02-19 23.22.50.png
保存完了後、画面のトップに移動し、「ダッシュボード」を選択します。
スクリーンショット 2015-02-19 23.28.10.png
ダッシュボードの概要から「VISUAL STUDIO ONLINE」が追加されたのを確認できます。
スクリーンショット 2015-02-19 23.29.47.png
・TwiML作成
ではでは!これからVisual Studio Onlineを使ってTwiMLを作成してみます。
これが「Visual Studio Online」の初期画面です。
ブラウザからコードの作成はもちろん、編集、削除などなど普通のエディターのように使えます。
gitとの連携もできることと、コンソール作業など開発に必要な便利な機能が揃っているのを確認できます。
スクリーンショット 2015-02-19 23.32.47.png
ここで!メニューの説明
先日、ハンズオンイベントでメニューに関する質問が多かったので、簡単に紹介します。
git:gitのソースコードと連携
実行:開発中のプロジェクトをブラウザで実行
コンソール:コンソール操作可能
ファイル生成:プロジェクト内に新しいファイルを生成
フォルダー生成:プロジェクト内に新しいフォルダーを生成
更新:プロジェクトの更新
・・・:サブメニューとしてファイルのアップロードやダウンロードが可能
スクリーンショット 2015-02-19 23.36.35.png
TwiMLを作成してみます。
① ファイル作成
② ファイル名「twiml.xml」を作成し、右側のエディター画面にてTwiMLを作成。
③ 「実行」をクリック
スクリーンショット 2015-02-19 23.43.19.png
作成したTwiMLが正しく作成されたかを確認します。
上記で「③」をクリックすると、新しいブラウザからwebsitesが表示されます。
そのURLの後ろに作成したTwiMLのファイル名を入力してみましょう。
下記のイメージのように、XML形式でコードが表示されるとOK。
※ 今回は、XML形式に作成しましたので、ソースコードがまるみえな状態ですが、Twilioで提供している
 様々なプログラミング言語のヘルパーライブラリーを使いますと、各値を変数化することができ、
 値が表示されないようにすることも可能です。
※ TwiMLが表示されたURLが、着信専用電話番号の「Request URL」になります。
スクリーンショット 2015-02-19 23.51.39.png
・Request URL設定
これからは、Twilioのダッシュボードにログインします。
トップメニューで「電話番号」をクリックします。
スクリーンショット 2015-02-19 23.55.04.png
契約中の電話番号が表示されます。
着信で使う電話番号 をクリックします。
スクリーンショット 2015-02-19 23.57.23.png
電話番号管理画面から、電話番号のRequest URLを設定します。
① Request URL:着信の際にTwilioがリクエストを送るURLを設定
 (上記で作成した「Request URL」をそのまま設定)
② 保存:設定を保存

スクリーンショット 2015-02-19 23.58.47.png
ここまでできたら、みなさんの着信用電話番号に電話をかけることで先ほど作成をしたTwiMLが実行されることを確認できます。

最後に、Visual Studio Onlineのコンソール機能をご紹介します。
この機能は、いろんな場面で使われるかと思いますが、ハンズオンイベントでは、Twilio PHPヘルパーライブラリー(Zip)をコンソールで解凍する際によく使われましたので、ここで簡単に紹介をします。

・Twilio PHPヘルパーライブラリーをダウンロード
ダウンロードは こちら からできます。
① → ② → ③ の順にクリックすると、ローカルに「twilio-php-master.zip」がダウンロードされます。
スクリーンショット 2015-02-20 0.07.40.png
Visual Studio Onlineの「Upload Files」からローカルにダウンロードされた「twilio-php-master.zip」をアップロードします。
① → ② :ファイルをアップロード
③:アップロード後、コンソールアイコンをクリックします。
スクリーンショット 2015-02-20 0.15.22.png
圧縮ファイルを解凍
①:表示されたコンソールに「unzip twilio-php-masuter.zip」を実行し、Zipファイルを解凍
②:ファイルが解凍されたのを確認

twilio-monacoでTwilioのPHPヘルパーライブラリーを使えるようになります。
スクリーンショット 2015-02-20 0.17.41.png
最後に
本ブログで紹介をさせていただいた内容を一通り試していただいた方は、TwilioのドキュメントのTwiMLリファレンスをご覧頂きながら他の機能も是非試してみてください。
TwiMLリファレンス

この記事をシェア

最新記事

すべての記事へ