前回は、ハンズオンイベントで紹介された内容からMonacoの特徴・魅力に迫りました。今回は、さらに一歩踏み込んでMonacoの機能に触れてみます。

Monacoの利用にはMicrosoft Azureのサブスクリプションが必要となります。試用を希望する際は以下サイトをご覧の上、事前にご登録ください。

Microsoft Azure 1か月無料評価版

URL：http://azure.microsoft.com/ja-jp/pricing/free-trial/

Microsoft Azure サブスクリプション申し込み Step by Step

URL：http://msdn.microsoft.com/ja-jp/windowsazure/ee943806

TypeScript標準対応

Monacoの特徴の1つに、TypeScriptをサポートしている点が挙げられます。TypeScriptは、Microsoftが中心となって開発しているスクリプト言語です。いわゆる「AltJS」と呼ばれる種類の言語で、コンパイル結果がJavaScriptコードになるため、最近のWeb開発で利用頻度が高まっています。今年の4月に開催されたイベント「Build 2014」にてバージョン1.0がリリースされ、今後の展開に注目が集まっている言語です。

MonacoではTypeScriptのコーディングを標準でサポートしているため、AltJS好きな開発者、TypeScriptをこれから使っていきたい開発者にはおすすめのツールと言えます。

まず、TypeScriptの実行環境をインストールします。

npm install -g typescript

続いて、これもMonacoの特徴であるGit連携を利用して、今回はTypeScriptのGithubリポジトリから、クローンを作成します。左のGitメニュー（上から三番目のボタン）をクリックし、GithubリポジトリのURLを入力します。

Microsoft/TypeScriptSamples

URL：https://github.com/Microsoft/TypeScriptSamples.git

すると下図のように展開されます。

今回作成したリポジトリ内にはさまざまなサンプルがありますので、ぜひMonacoを利用してコーディングの練習をしてみてください。

GitやVisual Studio Onlineなどのオンライン開発ツールとの連携

前述のとおり、MonacoはあらかじめGitの機能が使用可能です。ソースコード自体の編集はもちろん、CommitやPull/Pushといった基本操作もブラウザ上で行えます。

さらに、Microsoftが提供するVisual Studio Onlineとの連携も可能です。

メニューの「Azure Websites名」をクリックすると、利用できるツール群が表示されるので、その中から「Open Visual Studio Online」を選びます。その後、画面に従い、ご自身のVisual Studio Onlineのプロジェクト名を入力します。

入力後、Acceptを押して認証が完了すればすぐに使用できます。なお、Visual Studio Onlineを利用するには事前登録（無料）が必要です。

Azure Websitesがさらに利用しやすくなるKudu Console

先ほどのVisual Studio Onlineと同じく、Monacoから直接利用できる機能にKudu Consoleがあります。これは、Azure Websitesの管理ツールで、デバッグやコマンドラインを利用した操作などが行えます。

「⁠MonacoにはMonaco Consoleがあるのに、なんでKudu Consoleもあるの？」と思う方がいらっしゃるかもしれません。Monaco Consoleでは対話型コマンドの実行ができないのですが、Kudu Consoleでは対話型コマンドが実行できます。ですから、Monacoと連携させることにより、より一層、Azure Websitesを利用したWebサイト開発・運用の効率が高まります。

現時点での注意点

IIS向けの設定が必要

たとえば、Apacheなどで.htaccessで以下の通り記述されていると仮定します。

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule

この場合、IISのweb.configでは下記の通り記述します。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Laravel4" stopProcessing="true">
                    <match url="^" ignoreCase="false" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="index.php" appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Node.js使用時の注意点

前回紹介したとおり、Monacoを利用すればnode-inspectorでブラウザでバッグが可能です。ただし、node-inspectorの現在の仕様により、対応しているおもなブラウザはGoogle ChromeとOperaとなっている点に注意が必要です。

Monaco Consoleでは対話型コマンドが実行できない

先述のとおり、Monaco Consoleでは対話型コマンドが実行できません。たとえば、ファイルが存在するあるディレクトリをdelコマンドで消去しようとするとMonaco Consoleが落ちてしまいます。

Kudo Consoleではあればこの問題を回避して、そのまま実行を進められます。

まとめ

今回は、Monacoでできることをさらに深堀りして紹介しました。多機能ではありながらも、すべてWebブラウザ上で行える点、GitやVisual Studio Onlineなどの開発者がすでに持っているスキルセットを活用できる点、TypeScriptやOpen Kudo Consoleなど、最新の技術に触れられる点など、これから開発者を目指す方はもちろん、たとえば、フロントエンド開発に注力したいなど、Web開発に軸足を置こうと考えている開発者にはおすすめのツールと言えるでしょう。