しばやん雑記

ASP.NET とメイドさんが大好きなフリーランスのプログラマーのブログ

Microsoft Azure Web サイトと Mac で始める Web アプリ開発

Windows では最強の Azure Web サイト開発環境だった WebMatrix も、バージョン 4 が出る感じが全くしないですね。某氏は ARM 版が欲しいとか言ってましたが叶いそうにないです。

しかし Microsoft Azure Web サイトのアプリケーションギャラリーと Visual Studio Online "Monaco" を使うことで、WebMatrix に相当する機能をブラウザだけで行えるようになりました。なので Surface RT / 2 などの ARM マシンでもブラウザが動作すれば、簡単にアプリケーションの開発が行えるようになりました。

そこで、今回は Mac だけを使って開発を行ってみたいと思います。

Azure Web サイトの作成

思ったより知られていなかったみたいですが、Azure の管理ポータルから Web サイトを作成するときに、ギャラリーから作成を選ぶと WordPress や MediaWiki などの OSS アプリケーション以外にも、ASP.NET や Node.js、PHP などのテンプレートを選んでインストールすることが出来ます。

f:id:shiba-yan:20140428231024p:plain

Azure Web サイトが Java に対応したので Tomcat と Jetty もあります。見覚えある方も居ると思いますが、WebMatrix のテンプレートから作成する時とほぼ同じテンプレートが、Web サイトのギャラリーにも用意されています。

今回は PHP の Starter Kit を選択して、新しい Web サイトを作成していきます。URL はユニークなものを入力し、下の方にスクロールすると表示されるユーザー名とパスワードは、サンプルサイトの管理画面にログインするためのものなので、適当に入力してください。

f:id:shiba-yan:20140428231042p:plain

後は ClearDB の許諾にチェック入れたりするだけで Starter Kit がインストールされて、PHP や MySQL への接続準備が整った環境が出来上がります。ちなみに Node.js の場合は Sinatra ライクな Express を使ったテンプレートがあるので、結構便利だと思います。npm も使えますしね。

とりあえず作成された Web サイトへアクセスしてみると、サンプルアプリケーションが表示されます。

f:id:shiba-yan:20140428231056p:plain

ちゃんと動作していることが確認出来たので、今回のメインとなる Visual Studio Online を有効化し、そのオンライン IDE である "Monaco" を紹介していきたいと思います。

Visual Studio Online の有効化

Azure Web サイトで Visual Studio Online を有効化するためには、有効化したい Web サイトの構成タブを選択し、その中にある "Visual Studio Online での編集" を On にして保存します。

f:id:shiba-yan:20140428231110p:plain

これだけで Visual Studio Online が有効になるので、ダッシュボードに戻って一度リロードすると以下のようなリンクがサイドバーに表示されます。

f:id:shiba-yan:20140428231122p:plain

そしてリンクをクリックすると、Safari の場合はパスワード付き URL が原因でフィッシングサイトとか警告が出ますが、特に問題ないので無視して進めると、以下のような Visual Studio Online "Monaco" のメイン画面が表示されます。

f:id:shiba-yan:20140428231133p:plain

基本的にアプリケーションの開発に必要な機能はベータの段階ですが揃っていますので、実際に開発環境としての機能を紹介していきます。

開発環境としての基本機能

開発環境の基本と言えるエディタですが、Visual Studio Online と言うだけあってインテリセンスがしっかりと実装されています。以下の画像は PHP ですが、関数名がしっかりと補完されていることが分かりますね。

f:id:shiba-yan:20140428233816p:plain

関数名とかの補完であれば他のエディタでも使えたりしますが、Visual Studio Online では関数の引数に対してもいろんなメッセージが表示されるので、ほぼドキュメント調べることなくコードを書いていけます。

f:id:shiba-yan:20140428233824p:plain

特に PHP では引数の順番を間違えることが多いですが、括弧をタイプしたタイミングで表示されるので、間違えることはほぼありません。

検索機能も用意されているので、サーバー上にあるファイルを一括で検索することが出来ます。正規表現も使えるので Visual Studio とほぼ同じ機能を持っている感じでしょうか。

f:id:shiba-yan:20140428231230p:plain

検索結果の表示は Visual Studio より分かりやすい気がします。

コンソールを使う

Ctrl+Shift+C ショートカットキーを押すと、コンソールが立ち上がります。

基本は Windows なので Windows のコマンドが使えるようになっていますが、Web サイトには git がプリインストールされている関係上、一般的な Unix コマンドも使えるようになっています。

f:id:shiba-yan:20140428231156p:plain

そして面白いのが、Monaco ではコンソールを複数開いて随時切り替えて利用出来る点でしょうか。

ちょっとした screen コマンドっぽく使えます。

f:id:shiba-yan:20140428231211p:plain

使い勝手的には Windows よりも Linux に近いように作られている気がします。

git を使ってバージョン管理を行う

そしてアプリケーションの開発では必須と言えるのがバージョン管理ですが、先ほども説明した通り Web サイトには git がプリインストールされているので、特に何もしなくても git を使った開発が行えます。

そして専用のサイドバーも用意されているので、Ctrl+Shift+G ショートカットキーを押すと表示されます。

f:id:shiba-yan:20140428231219p:plain

コンソールを開いて git コマンドを直接使うことも出来ますし、GUI での操作もメニューにいろいろと用意されているので、比較的簡単に使えるようになっています。

git commit --amend へのショートカットが用意されているのは面白いですね。

f:id:shiba-yan:20140428233253p:plain

実際にコミットを行う場合にはコミットメッセージを入力して Enter キーを押すだけですが、ユーザー名やメールアドレスがといった基本設定が行われていない場合には、エディタがインラインで立ち上がるので、その場での入力が可能です。

f:id:shiba-yan:20140428233527p:plain

git rebase -i や git commit --amend などエディタが立ち上がるシーンでは、このようなインラインでのエディタ表示になるみたいですね。

他にもブランチの作成や切り替え、そしてリモートリポジトリとの同期などをトップのナビゲーションバーから行えます。

f:id:shiba-yan:20140428233539p:plain

これらが全てブラウザ上で動作しているのは驚きですね。他にも機能は沢山あるんですが、既に Build Insider で一色さんが記事を書かれているので、そっちに丸投げします。

Visual Studio Online “Monaco”入門 - Build Insider

WebMatrix を使う理由は Azure Web サイトとの連携のしやすさと、テンプレートギャラリーだったのですが、今回全てブラウザだけで実行可能になってしまいました。Windows だけで動く WebMatrix ではなく、様々な環境で動く Visual Studio Online に注力する方向みたいですね。