こんにちは。
Visual Studio Code で使用されているオープンソースの Monaco Editor ベースのブラウザー エディタ「App Service Editor」 (旧名 Visual Studio Online) を使うと、クラウドを使って、コード補完や検索などのユーティリティを使ったプログラミングが “いつでも どこでも” できることに加え、開発環境の作成・削除もローカル環境を汚すことなく迅速におこなえ、また console.log() などのサーバー側出力 (output) も実際の配置環境でリアルタイムに確認できるなど、多くの付加価値を得ることができます。(是非、使ってみてください。)
今回は、この App Service Editor をご紹介します。
App Service Editor の表示
前述の通り、ローカル環境に開発ツールなどをインストールする必要はいっさいありません。ブラウザーと Azure のアカウントがあれば充分です。(無料の Azure Web App で充分です。)
Azure Portal から App Services の Web App を作成し、作成された Web App (App Service) を選択して [Tools] (ツール) の [App Service Editor] を選択します。
下図の通り、App Service Editor が表示されます。
URL を見ていただくとお気づきの方も多いと思いますが、Kudu がベースとなっています。(Kudu についての説明は、ここでは省略します。)
Node.js で “Hello World”
それでは、簡単な Node.js のアプリを作って動かしてみましょう。作り方は、IIS 上で Node.js を動かすときとほぼ同じです。
まず、[New File] のアイコン 
をクリックして、「web.config」という名前のファイルを新規作成します。
既に Azure Web App には Node.js 用の IIS モジュール (iisnode) が入っているので、web.config に以下の通り記述して Node.js の設定をおこないます。
下記の構成では、public フォルダーの下に (同じ名前の) ファイルがある場合には Static コンテンツとして表示し、それ以外の場合には Node.js を使って server.js というファイルで処理するように構成しています。
<configuration> <system.webServer> <handlers> <add name="iisnode" path="server.js" verb="*" modules="iisnode" /> </handlers> <rewrite> <rules> <rule name="StaticContent"> <action type="Rewrite" url="public{REQUEST_URI}" /> </rule> <rule name="DynamicContent"> <conditions> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True" /> </conditions> <action type="Rewrite" url="server.js" /> </rule> </rules> </rewrite> <!-- node_modules をちゃんと隠す場合 --> <!-- <security> <requestFiltering> <hiddenSegments> <add segment="node_modules" /> </hiddenSegments> </requestFiltering> </security> --> </system.webServer></configuration>[New File] のアイコンをクリックして、今度は、「server.js」の名前のファイルを新規作成し、以下の通り記述します。ここでは、「Hello World」と表示させています。
なお、process.env.PORT は IIS が Node に渡すユーザー変数で、ここには Azure Web App が内部で使用するポートの名前が入っています。(tcp 80 などの外部ポートではありません。)
var http = require('http');http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/html' }); res.end('Hello, world!'); }).listen(process.env.PORT);補足 : 実際には、上記の server.js を作成して実行 (Ctrl-F5) をおこなうだけで、Script の start を理解して自動で Web.config を作成してくれます。Node.js、PHP などを使用するほとんどのケースで、Web.config の手動作成は不要です。
なお、コード編集の際に気づいたかと思いますが、編集中は JavaScript のコード補完をおこなってくれます。この辺りは、以前セミナーで何度も紹介した Napa 譲りな機能ですね。(Napa についての説明は省略します。)
例えば、「document.」と入力すると、document オブジェクトの候補の一覧が表示されるのがわかります。(Intellisense と呼ばれるエディター機能です。)
また、「for」と入力して Ctrl-Space を押すと、for loop や foreach など候補が表示されるので、いずれかを選択して Tab キーを押すと、下図の通り、そのコードのひな形が挿入されます。(Code Snippet と呼ばれるエディター機能です。)
なお、request など、Node.js が built-in しているさまざまなモジュールのオブジェクトについても、後述する typescript を使って Intellisense (Suggestion) による補完が可能です。(typescript の箇所で紹介します。)
もちろん、Ctrl-z (元に戻す) や Ctrl-y (繰り返し) などの基本的なコマンドも使えますので、ついブラウザーであることを忘れてしまうことでしょう。(例えば、Internet Explorer で F12 キーなどを押すと、ブラウザーの機能が動いてしまうので注意してくださいね。)
さいごに、左の Navigation で [Run] のアイコン 
をクリックすると、このアプリケーションが実行されます。(Ctrl-F5 キーでも OK です。)
ブラウザーで見ると、下図の通り、「Hello World」と表示されます。
ファイル内検索 (Shift-Ctrl-f) やファイル名検索 (Ctrl-e) など、エディターに必要なさまざまな機能を提供します。
Npm の使用
サーバー側のコマンドも使用できるため、Npm を使って Express などの追加のパッケージも使用できます。(今回はサーバー サイドですが、AngularJS なども使用できるので、MEAN スタックの開発なども可能です。)
今回は、Node の Ejs を使ってテンプレート ドキュメントを Parse してみましょう。(なお、今回は Ejs を単独で使用しますが、Express を使用したサンプルは「Azure Active Directory の SSO 開発 (Node.js 編)」に掲載しました。)
左の Navigation の [Open Console] のアイコン 
をクリックすると、サーバー側のコマンドを入力するためのコンソール (Console) が表示されます。(Ctrl-Shift-c でも OK です。)
ここに、今回は、以下の通り入力します。npm (Node Package Manager) を使って ejs をインストールしています。
npm install ejsでは、ejs で読み込むサンプル ファイルを作成してみましょう。
今回は、testpage.ejs というファイルを新規作成して、以下の通り記述します。
<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title><%=title %></title> <script src="hello.js"></script></head><body> <h1><%=title %></h1> <div> <button type=button onclick="javascript:test.show();">click me !</button> </div></body></html>
上記のコードで参照している hello.js も作成しておきましょう。「public」という名前のフォルダー (前述を参照) を作成し、このフォルダーに hello.js ファイルを新規作成して、以下の通り記述します。
var Test;(function (Test) { var Hello = (function () { function Hello(text) { this.text = text; } Hello.prototype.show = function () { alert(this.text); }; return Hello; })(); Test.Hello = Hello; })(Test || (Test = {}));var test = new Test.Hello("Hello, World!");さいごに、上記の server.js を以下の通り書き換えます。
今回は、上記でインストールした ejs パッケージを読み込み、testpage.ejs を Render 処理しています。(実際の開発では、URI のファイル名を元に読み込むなど、工夫して使ってください。)
var http = require('http');var fs = require('fs');var ejs = require('ejs');var testpage = fs.readFileSync('./testpage.ejs', 'utf8');http.createServer(function (req, res) { var testrender = ejs.render(testpage, { title:"EJS サンプル", }); res.writeHead(200, {'Content-Type': 'text/html'}); res.write(testrender); res.end();}).listen(process.env.PORT);再び、左の Navigation の [Run] アイコンをクリックし (Ctrl-F5)、ブラウザーで確認してみてください。
下図の通り表示され、[click me !] ボタンを押すと「Hello, World!」と alert が表示されます。
同様に、express を使用したい場合にも、下記の通り、サーバー環境だけでインストールとカスタマイズができます。
// install express generatornpm install express-generator -g// create express filesexpress -f// build using package.jsonnpm install
生産性の大幅アップ ! – typescript の使用
もちろん、いま流行りの typescript も使えます。(オープンソース界隈の迅速な動きもあり、typescript は、既に さまざまな環境で使えるようになっています。)
強い型付けによって、Intellisense (Suggestion) を参照しながらサクサクと JavaScript が書けるので、一度使い始めたらきっと離れられなくなるでしょう。
例えば、上記の hello.js を typescript で書き直してみましょう。
前述同様、Navigation の [Open Console] のアイコンをクリックしてコンソールを表示し (Ctrl-Shift-c)、今度は、以下の通りコマンドを入力します。
npm install typescript前述の hello.js を削除して、変わりに、以下の hello.ts を新規作成します。
module Test{ export class Hello{ constructor(private text : string){ } show() : void{ alert(this.text); } }}var test : Test.Hello = new Test.Hello("Hello, World!");今回は、試しに、このファイルだけ、tsc (typescript compiler) でコンパイルしてみます。
コンソールを使って、以下の通りコマンドを入力すれば OK です。
cd publictsc hello.tsコンパイルされ、上記と同じ hello.js が新規作成されます。(実行結果は同じなので 省略します。)
なお、こうした typescript、LESS などを使用する際には、grunt を組み合わせると、毎回上記のようなコマンドを入力せずに自動コンパイル可能です。
ただし、Free Plan の Azure Web App ではリソースの使用制限 (Quota Limit) が厳しいため、grunt などの常駐プロセスを使用する際は Basic plan か Standard plan に変更してください。
また、既に多くの定義ファイルが commit されているため、Express など既存のライブラリーやフレームワークに対応した定義ファイル (.d.ts ファイル) もインストールできます。
例えば、Node.js が既定で提供しているモジュールの多くのオブジェクト (request オブジェクト等) も any となっていて、使用可能なメンバーを探す際に苦労することがあります。このような場合、下記の通り、Node.js 用の定義ファイル を検索してインストールすることで、typings フォルダーに node.d.ts が配置されます。(下記の -a は -action の意味です。検索して、その結果をインストールしています。)
npm install tsd -gtsd query node -a install上記の定義ファイルを使用する際は、ファイルの先頭に下記の通り記述するか、_references.js というファイルに下記を記述して Global な参照として定義することで、Intellisense (Suggestion) が有効になります。
ただし、試してみたところ、https など、一部の細かなモジュールで Intellisense (Sugesstion) が効かないものもあったので注意してください。。。(大方定義されています !)
/// <reference path="typings/node/node.d.ts" />挿入の際もわざわざ始めから記述する必要はなく、「ref」と入力して Ctrl – Space キーを押すことで「/// <reference />」タグが挿入でき、さらに path=”” の中で Ctrl – Space を選択して *.d.ts ファイルが一覧されるので (下図)、node.d.ts を選択すれば OK です。(このように、Ctrl – Space は、コード本体以外のさまざまな補完で使用できます。)
これで、Node.js に built-in しているさまざまなオブジェクトについても Suggestion (Intellisense) を使って生産性高くプログラミングできます。
Debugging (デバッグ)
最新の App Service Editor では、Node-inspector が built-in されているため、ブラウザーを使用した Debug も可能です。
手順詳細は「Azure による Node.js の Remote Debug (node-inspector 編)」を参照してください。
ソース管理と Publish
App Service Editor では、Git も使えます。
Navigation の [Git] アイコン 
をクリックすると、UI を使った repository の初期化や commit などが可能です。(Ctrl-Shift-g でも OK です。)
上図で [Initialize git repository] をクリックして、comment を入力して Enter を押すと、ソースが Git (master repository) に commit されます。(.git のフォルダーが作成され、git の構成情報が作成されます。)
ソースコードの変更をおこなうと、エディター上で変更を示すアイコンも表示されて可視化できます。
再度、[Git] アイコン をクリックすると (Ctrl-Shift-g)、前回の commit から変更・追加などがおこなわれたファイル一覧が表示され、ファイルをクリックすると下図のように diff が表示されます。
Web アプリケーションができてきたら、さいごに、Visual Studio Team Service や Github などの Git に対応した repository に登録しても良いですし、逆に Visual Studio や Sublime Text などを使ってローカルで編集したファイルをこの remote repository に commit しても良いでしょう。
Visual Studio Team Service のプロジェクト管理を使用する場合は、TFS のコンソール (https://{account}.visualstudio.com) を開き、Git でログイン (認証) できるように、あらかじめ Basic Authentication の設定おこないます。
右上のユーザー名をクリックして、[My Profile] を選択します。
表示される画面で [Credentials] タブを選択し、Basic 認証のためのユーザー ID やパスワードの設定をおこなっておきます。
あとは、上述の App Service Editor のコンソール (Console) などを使って、作成したプロジェクト (https://<account>.visualstudio.com/DefaultCollection/_git/<project name>) にソース コードをチェックインできます。
git remote add origin https://tsmatsuz.visualstudio.com/DefaultCollection/_git/test1git push origin master(2015/03 追記 : Azure Web App における Git のさまざまな活用方法については「Azure Web App の Git 活用」に記載しました。)
補足 : Monaco の Console では対話型コマンド (interactice command) は使用できません。対話型コマンドを使用する際は Kudu Console を使用してください。
なお、Sep 2014 の更新 (Sprint 71 Update) により、Kudu Console へアクセスしやすくなりました。(下図参照)
補足 : Mac OS をお使いの方は、Ctrl – Space を選択すると Spotlight 検索が表示されてしまいます。Mac OS の方は、キーマップを変更して使用してください。(設定がやや面倒ですが、Ctrl – Space による Suggestion は上述の通り非常に強力ですので、是非活用してください。)
※ 変更履歴
2015/03/26 Azure WebSite から Azure Web App に名称変更
2016/07/15 Visual Studio Online から App Service Editor に名称変更
Categories: Uncategorized
tsmatz
7 replies»