こんにちは。

今日は Mac OS などをお使いの方のために、Node.js と Azure を組み合わせた Twilio API 開発の圧倒的メリットをご紹介します。
(Windows をお使いの方は、.NET (C# など) を使って、同等、もしくはそれ以上の開発生産性を得られます。「Visual Studio で Azure のプロジェクトを Remote Debug する」を参照してください。)

先日実施した Twilio X Azure ハンズオンでは、TypeScript 定義ファイルなど、いくつかテキストにない余談も入れたので、これらもあわせて記載しておきます。
なお、次回ハンズオンは 12/11 を予定していますが、前回はすぐにうまってしまったので、もう少しキャパを広げて実施したいと思います。(募集サイトはまだこれからです。)

Twilio API を使った開発 (はじめに)

まず、メリットを紹介する前に、Twilio 開発における特徴を説明します。

Twilio API を使ったアプリケーションでは、ざっと下図のような流れでアプリケーションが動作します。

1. 皆さんが構築するアプリケーションや電話受信などをトリガとして、クラウド上で動作している Twilio Service は処理を開始します。(下図の 1)
2. Twilio Service は、処理すべき応答 (通話内容、送信内容など) を取得するため、皆さんが構築したアプリケーションにアクセスします。(下図の 2)
3. その受け取った内容を元に、通話や SMS 送信などをおこないます。(下図の 3)

IVR などでは、この 2 と 3 のキャッチボールが続くことになります。

さて、通常の開発 (プログラミングやテスト) では、localhost で動かしたものをクラウドに配置するという流れになるかと思いますが、上図のように、Twilio Service (https//api.twilio.com) が皆さんのアプリケーションに頻繁にアクセスするため、多くの場合、開発時 (初期のプログラミング段階) でも動作させるためにクラウドに配置しておく必要があります。(なお、いくつか回避方法はありますが、実用的ではありませんので省略します。)
つまり、Twilio API を使った開発において、localhost を使った開発・検証は極めて限定的で、一般には、プログラミングの初期段階 (単体テスト含む) からクラウドを使った開発が必要になってきます。

そして、ここに、Azure の大きな特徴 (差別化) の 1 つでもある「開発プラットフォームとしてのクラウド」のメリットが生きてきます。

Browser Only でデスクトップ並みの開発

まず 1 つ目のメリットは、こうしたクラウド上での開発 (初期段階でのプログラミング等) がデスクトップ上と変わらないほど快適にできる点です。
以前、「App Service Editor で Node.js アプリ開発」で紹介したように、ブラウザー エディターを使って直接クラウド上でコードの開発や管理をおこなうことができます。しかも、下記の通り生産性高く !

• Azure Web App (旧 Azure WebSite) を作成したら、App Service Editor のエディターを開きます。
  (App Service Editor のエディターの表示手順は、「App Service Editor で Node.js アプリ開発」を参照してください。ここでは、手順を省略します。)
• App Service Editor の Console を開いて (Ctrl-Shift-c)、下記のコマンドを入力して Node.js 用の Twilio ライブラリーをインストールします。(-g ではないので注意！)

npm install twilio

• App Service Editor の Explorer から server.js を作成して、下記の通り入力します。
  Account SID, Auth Token, From (Phone Number) は Twilio のホーム から取得してください。(なお、Twilio の trial account を使用されている方は、To には決められた電話番号しか指定できないので注意してください。)

// This time, we don't use express (pure node.js)var http = require('http');var url = require('url');var twilio = require('twilio');http.createServer(function (req, res) {  var urlopts = url.parse(req.url);  if(urlopts.pathname == '/hello') {    var twiRes = twilio.TwimlResponse();    twiRes.say({language : 'ja-jp'}, 'こんにちは');    res.writeHead(200, { 'Content-Type': 'text/xml' });    res.end(twiRes.toString());  }  else if (urlopts.pathname == '/test') {    var client = twilio(      '<Account>',      '<Auth Token>');    client.makeCall({      from: '+81-XX-XXXX-XXXX',        to: '+81-XX-XXXX-XXXX',        url: 'http://<your domain>.azurewebsites.net/hello'    }, function(error, data) {      console.log('makeCall error');    });    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });    res.end('電話をかけました！');  }  else {    res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' });            res.end('Not Found');  }}).listen(process.env.PORT);

• [Run] ボタン (Ctrl-F5) を押して、ブラウザーから http://<your domain>.azurewebsites.net/test にアクセスすると、「こんにちは」と電話がかかってくるはずです。

もちろん、コードの作成中は Suggestion (Intellisense) も表示されますが、以下の通り TypeScript という AltJS を使うと、さらに大きな生産性を得ることができます。
TypeScript は JavaScript のスーパーセットであり (つまり、JavaScript で書いたコードは TypeScript のコードでもあります)、 TypeScript 独自の構文で無理に記述しなくても、JavaScript 単体でも恩恵を受けられますので、最初はこれだけでも充分です。一例を見てみましょう。

TypeScript は、既にコミュニティ (エコシステム) が充実しており、Node.js そのものや、Express フレームワーク、AngularJS、jquery などの多くの著名ライブラリーの定義ファイルが提供されています。
例えば、今回の場合、下記の通り Console で実行して、Node.js 用の TypeScript 定義ファイル (.d.ts ファイル) をインストールできます。(下記の -a は action の意味です。tsd query で検索をおこない、検索結果をインストールしています。)
これにより、node.d.ts という定義ファイルが typings というフォルダーの下にコピーされるはずです。

npm install tsd -gtsd query node -a install

このダウンロードした定義ファイルを開発中のソース (上記の server.js) で参照するため、ソース (server.js) の先頭で「ref」と入力して Ctrl-Space を入力してみてください。「reference」を選択すると、定義ファイルを reference するコードのひな形が挿入されます。(注意 : Mac OS の方は、既定で Ctrl-Space キーとして Spotlight 検索が割り当てられているので、すみませんが、あらかじめ key map を変更しておいてください。)

つぎに、ファイル名の挿入箇所で Ctrl-Space を選択すると、ダウンロードされている TypeScript 定義ファイルの一覧が表示されるので、下図の通り node.d.ts を選択します。

この 2 ステップで、下図の通り、TypeScript 定義ファイルの参照 (コメントアウトされた reference タグ) が挿入されます。
すると、下図の通り、強い型付けによって、多くのオブジェクトでメンバーの候補が表示されるようになります。

なお、残念ながら、現時点 (2014 Oct) では Twilio API Libarary の TypeScript 定義ファイル (.d.ts) は提供されていませんが、今回のハンズオン用に twilio.d.ts (http://1drv.ms/1r5eLfW) を作成しましたので試しにダウンロードして使ってみてください。(定義ファイル作成では、一部、こちらのツールを使わせていただきました。)
このファイルを typings フォルダーに Upload し、上記同様、ソースで参照すると、下図の通り、Twilio API ライブラリーの関数についても Suggestion (Intellisense) が表示されるようになるでしょう。

慣れてきたら、コード自体も TypeScript で記述すると、さらに生産性が向上します。また、TypeScript コンパイルの際には、grunt と組み合わせて自動ビルドのフローを構成することもできます。(ただし、grunt を使用する場合は、Azure Web App の [Free] インスタンスではなく、[Basic] または [Standrd] インスタンスに設定しておいてください。[Free] では CPU の利用が大きく制限されています。)

すぐできる Remote Debugging

さて、ローカル環境が使えない場合のもう 1 つの問題がデバッグです。上記の場合、console.log で結果を出力するなどして簡単な確認はできますが、コードが複雑になってくるとかなりつらいですね。
Azure Web App では、「Azure による Node.js の Remote Debug (node-inspector 編)」で紹介したように、Node-inspector というデバッガー プロセスが Built-in されており、簡単な設定ですぐに Debug を開始できます。

ただし、この Debug 環境は、環境依存性があるので注意してください。
まず、Debug で使えるブラウザーは、いまのところ Chrome か Opera のみです。Mac OS の方も、どちらかをインストールしておいてしてください。(後述する Debug 実行の画面だけこれらのブラウザーを使用すれば良く、デバッグ対象のアプリの呼び出しはどのブラウザーからでも構いません。)
また、Azure の Debugger プロセスと Debug UI の間の通信として Web Socket を使用しています。このため、企業プロキシーの設定などで Web Socket がブロックされる場合は使用できません。(画面上部のバーだけが表示され、止まってしまいます。)

Debug 開始前の準備は、下記の 2 つだけです。

• Azure Portal で [Configure] (構成) タブをクリックして、[Web Socket] をオン (On) にします。
  
• App Service Editor で、ソース内にある Web.config の debuggingEnabled を true に変更します。(下記太字)
  なお、この Web.config は、一度 [Run] (Ctrl-F5) を実行しないと自動生成されないので、事前に一度 Run しておいてください。

<?xml version="1.0" encoding="utf-8"?><configuration>   <system.webServer>      . . .      <rewrite>         <rules>          <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">                      <match url="^server.js/debug[/]?" />          </rule>          . . .         </rules>      </rewrite>      . . .      <iisnode watchedFiles="web.config;*.js" debuggingEnabled="true" />   </system.webServer></configuration>

上記の Web.config を見ると、/server.js/debug/ というパスが NodeInspector という rule に割り当てられているのがわかります。
つまり、ブラウザー (Chrome) で http://<your domain>.azurewebsites.net/server.js/debug/ に接続することで、Debug 用の UI が起動します。 (下図)

Debug UI では、左上の矢印をクリックすると、下図の通り、サーバー側のフォルダ階層やソース (server.js) が表示できます。

例えば、上述の server.js で、下記のソースの箇所の番号をクリックして breakpoint を設定します。

var urlopts = url.parse(req.url);

他のブラウザー (Safari でも何でも構いません) から、このアプリケーション (/test) にアクセスしてみましょう。すると、breakpoint を設定したコード (上記の行) で停止します。

F10 で 1 行進めると、urlopts の中に値が設定されますので、右の [Watch Expression] にこの変数を入力して Watch してみてください。pathname に「/test」と入っているのが確認できます。(下図)

続けて F8 で Continue すると、電話がかかり、再度、このソースの箇所 (breakpoint) で停止します。今度は、Twilio Service (https://api.twilio.com) から、TwiML を取得するために呼ばれています。

F10 で進めると、下図の通り、今度は、pathname に「/hello」と入っているのが確認できます。

このように、Twilio では、さきに電話をかけて、そのあとで TwiML を取得して音声通話しているのがわかります。Debug をおこなうと、変数の内部や、こうした処理の順序などが、非常によくわかりますね。(手の込んだデバッグでは、どんな風に動いているか、という検証も必要になります。)

Azure Web App には Git も入っていますので、このように Azure Web App を開発環境として使い、完成後に本番環境やソース管理のリポジトリーなどに push しても構いません。

なお、ハンズオンでは PHP を使った演習もしましたが、残念ながら PHP ではこうした Remote Debug は不可能ですのでご注意ください。

補足 :  PHP の Twilio API を使用する際は、「Azure Web App で curl を使って SSL (https) でアクセスする際の注意点」を参照してください。

※ 変更履歴

2015/03/26  Azure WebSite から Azure Web App に名称変更

2016/07/19  Visual Studio Online (Monaco) から App Service Editor に名称変更