2019年11月4日(米国時間)、Microsoft Ignite 2019にてVisual Studio Onlineがパブリックプレビューになりました。
Announcing Visual Studio Online Public Preview | Visual Studio Blog
Just announced! Including a browser-based editor that’s powered by @code. https://t.co/5OvvEbKCXK
— Visual Studio Code (@code) November 4, 2019
つまりこのように、ブラウザ上でVS Codeを使って開発をすることができます。
コード内容もエディタ設定もすべてクラウドに保存されるので、どんな環境でも作業を再開することができます。
本稿ではエディタのVisual Studio Code(以下"ローカル版VS Code")がWebブラウザ上で動作する環境である**Visual Studio Online(以下VS Online)**を取り扱います。(MicrosoftにはこのVS Onlineと類似していたり同名だったりするサービスが複数あって少々ややこしいのですが...)
また、VS Onlineにはサーバとしてクラウド版とセルフホスト版が、クライアントとしてWebブラウザかローカル版VS Codeを使うか、それぞれ選べるようです。本稿ではブラウザ上から使うというコンセプトのため、以下クラウド版+Webブラウザ版を前提として話を進めていきます。
なお本稿も、一部このVS Onlineを使って書いています。
環境
- Windows 10 Pro 1809
- Chrome OS 77
たぶんMacでも一緒です
利用方法
How to use Visual Studio Online with a browserに沿って用意していきます。
VS Onlineを利用するには、「Microsoftアカウント」と「Azureサブスクリプション(課金設定)」が必要です。もしAzureのサブスクリプションを持っていない場合、新規作成すると最初1ヶ月は一定量の無料枠がついてくると思います。
VS Onlineを利用するには、下記から「Plan」と「Environment」を作成していきます。
Visual Studio Online - Web ベースの IDE と共同コード エディター
Planが課金の設定で、Environmentがエディタ+仮想マシンの設定です。
Planは基本的にひとつ作れば良さそうですが、Environmentは用途に応じて複数作成することになりそうです。
Planの作成
サブスクリプションとリージョンを選択します。
リージョンは2019年11月4日現在下記から選択できます。特に理由がなければ、日本であればSoutheast Asiaを選択すればいいと思います。
- East US
- Southeast Asia
- West Europe
- West US 2
Environmentの作成
下記を設定します。
- Git Repository
- 指定すると、自動でCloneするようです。
- Put environment to sleep after
- 指定した時間をすぎるとサスペンドします。
- (おそらく起動している間だけ課金されるので、不必要な課金を避けたければ適当なタイミングでサスペンドするようにしておいたほうが良いと思います)
- Instance type
- Standard (4 コア、8 GB RAM)か、Premium (8 コア、16 GB RAM)かを選択できます。どちらもストレージは64 GBのようです。
- つよいマシンのほうが値段も高いです。
以上の設定をすると完成です。
しばらく待つと、見慣れたVS Codeの画面がブラウザ上で表示されます。
VS Codeとしての機能を使ってみる
拡張機能の利用
普通にローカル版VS Codeと同じ拡張機能がほぼ利用できるようです。
そもそも最初から4つの拡張機能がインストールされています。
Azure、LiveShare、IntelliCodeは今までもよく使っていますが、「VisualStudio Online」という見慣れない拡張機能があります。
ユーザー設定の利用
フォントの設定など多くをローカル版VS Codeから引き継ぐことができました。ローカルにダウンロードしてあるフォントであれば普通に有効になるようです。地味に素晴らしいです。
なお私がローカル版VS Codeで使っている下記設定をそのまま使って試しました。
https://github.com/s2terminal/visualstudiocode-usersetting/blob/master/User/settings.json
Terminalの利用
VS Onlineでは最初からTerminalでBashが利用可能です。
環境はDebianのようです。
vsonline:~/workspace$ cat /etc/os-release | grep NAME
PRETTY_NAME="Debian GNU/Linux 9 (stretch)"
NAME="Debian GNU/Linux"
VERSION_CODENAME=stretch
あまりDebianは詳しくないのですが、例えばlessが入っていないなど最低限の環境のようです。普通にsudo apt installは実行できました。
vsonline:~/workspace$ sudo apt install less
nodeが入っているので、例えばここから$ npm install ts-nodeしてTypeScriptを実行したりできました。
VS Onlineの値段は？
Visual Studio Online の価格を見てください。
ちょっとややこしいのですが、基本的には、VS Onlineを起動していた時間に対する従量課金のようです。例として環境の有効時間が730時間(丸1ヶ月)で、うちアクティブ時間が100時間(5時間×20営業日程度)で約5,628円とあり、一般的な開発にフルで使った場合はだいたいこれくらいになるのではないかと思います。
自動サスペンドによる節約と懸念点
(※このセクションには未確認の情報を含みます)
VS Onlineには作成時に設定したようにAuto Suspendの設定があります。この設定によってたとえば「5分間使用していない時はSuspendになって料金を節約する」という事ができるようです。
しかしSuspendに入る条件が不明瞭で、かつSuspendとは別で「接続・切断」という概念があるようです。Auto Suspendの時間を過ぎてもVS Onlineのタブを開いている間は接続したままでSuspendもしなかったため、もしかしたらタブを開きっぱなしだとVS Onlineを使っていなくても課金し続けられるかもしれません。利用しない場合はタブを閉じるか手動でSuspendする癖をつけたほうが良さそうです。SuspendやDisconnectについてはVS Onlineの環境一覧ページかVS Onlineのコマンドパレットから手動実行することができます(おそらく拡張機能の追加コマンドです)。
この「有効時間」「アクティブ時間」「サスペンド」「接続」あたりの定義がはっきりしないので、ノウハウが出揃うまでの間は料金面について慎重に確認しながら使ったほうが良いと思います。
Tips
- 表示言語の変更はできず英語のみのようです。
-
ext install MS-CEINTL.vscode-language-pack-jaで日本語のLanguage Packはインストールできるのですが、切り替えるための>Configure Display Languageコマンドが出てきませんでした。 - 参考: ローカル版VS Codeでは下記のようなコマンドを使って言語を切り替えられます。
-
- ショートカットキーがブラウザと衝突することがあります
- VS Codeの命とも言うべきコマンドパレットの呼び出しのショートカットキーが、「印刷」と衝突するのが致命的です。
- どうやらファイル編集中はVS Codeの「コマンドパレット呼び出し」が優先され、そうでない場合(拡張機能画面など)では「印刷」が優先されるようです。
- VS Codeの命とも言うべきコマンドパレットの呼び出しのショートカットキーが、「印刷」と衝突するのが致命的です。
- コマンドパレット自体は利用可能です。
- コマンドパレットさえ呼び出すことができれば、衝突を気にすることはありません。
- カラーテーマの変更もできます。
