Visual Studio Online "Monaco" でWeb上で完結する開発環境を使えるようになるまで
最近Web上で開発できる環境って増えてきましたよね。
有名どころだと
辺りでしょうか。
プロジェクト単位でなく、ただ書いて動かすだけのサービスなら他にも
などあります。
あとCloud9はGitHub Gistで大活躍のAce editorを開発しているところでもあります。
なんでもWeb上でやっちゃう時代
さて、時代の流れなのか、最近のMicrosoftの大幅なOpen & Webへの方向転換のおかげなのか、
Visual Studioもオンラインサービス連携が強化されています。
従来のTeam Foundationに加えてGitによるプロジェクト管理も出来るようになりました。
そしてWeb上での開発をMicrosoftもサポートしていたようなので、*1 今回、環境を整えてみることにしたわけです。
ちなみに、このMicrosoft製エディタ（コードネーム: Monaco）は、TypeScript公式サイトのPlaygroundやOneDrive（旧:SkyDrive）でも利用されています。
試しにOneDriveの任意のフォルダにJavaScriptファイルなど置いてみると分かりますが、Web上で編集できます。*2
前提条件
MonacoでVisual Studio Online上のプロジェクトを編集できるようにするためには、以下の条件をすべて満たす必要があります。
- Microsoftアカウントを持っていること
- MicrosoftアカウントでVisual Studio Onlineにサインアップしていること
- MicrosoftアカウントでWindows Azureにサインアップしていること
1つ目は言わずもがなですね。
2つ目、3つ目は無料でサインアップできます。
Visual Studio Online http://go.microsoft.com/fwlink/?LinkId=307137&clcid=0x411 Windows Azure https://account.windowsazure.com/signup?offer=ms-azr-0044p
無料枠ではいろいろな制限が付きますが、とりあえず触るだけなら問題ありません。
手順
以下は前提条件をクリアしているものとして進めます。
まずプロジェクトを作ります。
Visual Studio Onlineトップページの右上にある歯車マークをクリックします。
コントロールパネルに遷移するので、ここで「Create a new team project」をクリックします。
ポップアップダイアログが表示されるので、必要事項を記入し「Create project」をクリックします。
ここで、Version controlは必ずGitにしてください。
あとでこの違いが重要になってきます。
さて、プロジェクトが作成されたらVisual Studio Onlineですることはもうありません。
作られるのに少し時間がかかります。
次にAzureでWebサイトを作ります。
画面左下の「新規」をクリックして、「コンピューティング」→「Webサイト」→「カスタム作成」と辿ります。
必要事項を入力します。
必ず「ソース管理から発行」にチェックを入れてください。
「ソースコードの位置」で「Visual Studio Online」
「接続を承認する」で自分のURIを入力して「今すぐ承認」をクリックします。
小窓が開くので「Accept」を押してあげてください。
最後に「デプロイするリポジトリの選択」で、先ほど作ったプロジェクトを選択して完了してください。
サイトが作られるまで少し時間がかかります。
出来上がったらWebサイト名をクリックして詳細画面に進みます。
メニューの「構成」をクリックしてサイトの構成編集画面を表示します。
「VISUAL STUDIO ONLINE での編集」をオンにして*3 保存します。
メニューから「ダッシュボード」に移り、「Visual Studio Online での編集」をクリックします。
ここでやっとMonacoがお目見えです。
これからプロジェクトと関連付ける作業を行います。
上部メニューにあるサイト名をクリックし、「Connect to Visual Studio Online」をクリックします。
指示に従って接続します。
勝手に元の画面に戻るので、再び上部メニューからサイト名をクリックし、今度は「Clone repository from Visual Studio Online」をクリックします。
ここで先ほど作成したプロジェクトを選択します（Version controlがGitのもののみ選択できます）
と、これでコンソール画面にずらずらっとGitの標準出力が流れて…
晴れてVisual Studio Onlineのプロジェクトに関連付けられました。
あとは好きにコードを書いてgit pushしまくりましょう。
新規でファイル作成はもちろん、ローカルからのアップロード*4 にも対応しています。
Let's enjoy!!
あ、そうそう。
git pushするにはBasic認証(Digest認証かも？)が必要です。
認証するにはVisual Studio Onlineのコントロールパネルで、右上の自分の名前部分をクリックして「My profile」をクリックします。
ポップアップダイアログが表示されるので、「CREDENTIALS」タブの「Enable alternate credentials」をクリックし、パスワードを指定してください。
