読者です 読者をやめる 読者になる 読者になる

htsign's blog

ノンジャンルで書くつもりだけど技術系が多いんじゃないかと思います

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上のプロジェクトを編集できるようにするためには、以下の条件をすべて満たす必要があります。

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トップページの右上にある歯車マークをクリックします。
f:id:htsign:20140530233211p:plain

コントロールパネルに遷移するので、ここで「Create a new team project」をクリックします。
f:id:htsign:20140530233646p:plain

ポップアップダイアログが表示されるので、必要事項を記入し「Create project」をクリックします。
ここで、Version controlは必ずGitにしてください。
あとでこの違いが重要になってきます。
f:id:htsign:20140530233712p:plain

さて、プロジェクトが作成されたらVisual Studio Onlineですることはもうありません。
f:id:htsign:20140530233742p:plain
作られるのに少し時間がかかります。


次にAzureでWebサイトを作ります。
画面左下の「新規」をクリックして、「コンピューティング」→「Webサイト」→「カスタム作成」と辿ります。
f:id:htsign:20140530234015p:plain
f:id:htsign:20140530234030p:plain

必要事項を入力します。
必ず「ソース管理から発行」にチェックを入れてください。
f:id:htsign:20140530234118p:plain

ソースコードの位置」で「Visual Studio Online」
f:id:htsign:20140530234133p:plain

「接続を承認する」で自分のURIを入力して「今すぐ承認」をクリックします。
小窓が開くので「Accept」を押してあげてください。
f:id:htsign:20140530234147p:plain

最後に「デプロイするリポジトリの選択」で、先ほど作ったプロジェクトを選択して完了してください。
f:id:htsign:20140530234220p:plain
サイトが作られるまで少し時間がかかります。


出来上がったらWebサイト名をクリックして詳細画面に進みます。
f:id:htsign:20140530234558p:plain

メニューの「構成」をクリックしてサイトの構成編集画面を表示します。
f:id:htsign:20140530234617p:plain

VISUAL STUDIO ONLINE での編集」をオンにして*3 保存します。
f:id:htsign:20140530234642p:plain

メニューから「ダッシュボード」に移り、「Visual Studio Online での編集」をクリックします。
f:id:htsign:20140530234724p:plain


ここでやっとMonacoがお目見えです。
これからプロジェクトと関連付ける作業を行います。
上部メニューにあるサイト名をクリックし、「Connect to Visual Studio Online」をクリックします。
f:id:htsign:20140530234814p:plain

指示に従って接続します。

勝手に元の画面に戻るので、再び上部メニューからサイト名をクリックし、今度は「Clone repository from Visual Studio Online」をクリックします。
f:id:htsign:20140530234832p:plain

ここで先ほど作成したプロジェクトを選択します(Version controlがGitのもののみ選択できます)
f:id:htsign:20140530234849p:plain

と、これでコンソール画面にずらずらっとGitの標準出力が流れて…
f:id:htsign:20140530234944p:plain

晴れてVisual Studio Onlineのプロジェクトに関連付けられました。
あとは好きにコードを書いてgit pushしまくりましょう。
新規でファイル作成はもちろん、ローカルからのアップロード*4 にも対応しています。

Let's enjoy!!


あ、そうそう。
git pushするにはBasic認証(Digest認証かも?)が必要です。
認証するにはVisual Studio Onlineのコントロールパネルで、右上の自分の名前部分をクリックして「My profile」をクリックします。
ポップアップダイアログが表示されるので、「CREDENTIALS」タブの「Enable alternate credentials」をクリックし、パスワードを指定してください。

*1:実は半年以上前からできていたようでした。知らなかった…。ショック…。

*2:こちらで確認している限りでは、.js, .ts, .phpシンタックスハイライト&コード補完&構文解析あり、 .cs, .html はシンタックスハイライトのみ、 .ps1 は if など極小数の予約語のみ色分けされ、 .awk, .pl, .rb, .py はテキストと認識され編集はできるが一切補助機構なし、といった感じでした。

*3:「この機能を使用するには、展開資格情報が必要です。」と表示されスイッチがグレーアウトされていたら、「今すぐ展開資格情報を設定する」をクリックし、指示に従って設定しましょう。

*4:IE10以降, Firefox, Chrome等のモダンブラウザならDrag&DropでOK