Azure Cloud Shellで、ブラウザ上からVSCodeを使う

こんなやつ
![20180718_azure.gif](https://qiita-image-store.s3.amazonaws.com/0/50391/a37640de-b9ac-f2a9-ad1c-5fe0020c5e0d.gif)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">マジじゃん。<br>Microsoft Azure Cloud Shell(Azure PortalのWeb画面から生えてくるシェル)の中で、なんかVSCodeが動くようになってた。つまりブラウザでVSCodeが動く。<a href="https://t.co/vE35stsFrc">https://t.co/vE35stsFrc</a> <a href="https://twitter.com/hashtag/azurejp?src=hash&amp;ref_src=twsrc%5Etfw">#azurejp</a> <a href="https://twitter.com/hashtag/jazug?src=hash&amp;ref_src=twsrc%5Etfw">#jazug</a> <a href="https://t.co/1XC1XLFAZN">pic.twitter.com/1XC1XLFAZN</a></p>&mdash; suzuki.sh(s2terminal) (@suzukiterminal) <a href="https://twitter.com/suzukiterminal/status/1019369424682274816?ref_src=twsrc%5Etfw">July 17, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Azure Cloud Shellとは？
Cloud Shellとは、MicrosoftAzureの提供する、ブラウザ上で利用できるシェルです。

https://docs.microsoft.com/ja-jp/azure/cloud-shell/overview

おもに、Azureをブラウザ上から`$ az`コマンドでCLI操作することを目的として作られているようです。

### Azure Cloud Shellのいろいろな起動方法
- [shell.azure.com](https://shell.azure.com/) にアクセス
- [Azureポータル](https://portal.azure.com/) の「CloudShellアイコン`>_`」をクリック
- Azure公式ドキュメント内の「使ってみる」ボタンをクリック
    - たとえば [Azure App Service での \.NET Core および SQL Database の Web アプリの作成 \| Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/app-service/app-service-web-tutorial-dotnetcore-sqldb#create-a-resource-group) にある

![20180729_azure.gif](https://qiita-image-store.s3.amazonaws.com/0/50391/d1753cd4-5644-d7a0-8ee2-d958895437d0.gif)
ドキュメント内にあるコマンドがコピーできるのは分かりますが、ドキュメント上でシェルを起動してすぐ使うことができるのはなかなか斬新な発想だと思います。

### 仕様
- 使うにはMicrosoft Azureのアカウントが必要
- Cloud Shellを起動すると、裏側で仮想マシンが立ち上がっている。この仮想マシン自体に利用料はかからない
    - 仮想マシンはAzureアカウント毎に1台
- ストレージ永続化にはMicrosoft Azure Files ストレージを紐付ける必要があり、このストレージの利用料金は通常通り発生する
- シェルにはBashまたはPowerShellかを選べる。
    - ただし2018年7月時点でPowerShellの方はプレビュー

## Azure Cloud Shell上のVSCode

Cloud Shell上で`$ code`コマンドが使えるようになっていて、実行すると[Visual Studio Code](https://code.visualstudio.com/)みたいな謎のGUIエディタが突如ブラウザ上に出現します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/50391/273ddea3-7dc3-1a6b-f7fe-47c81e53b99e.png)

JavaScript等への強力な補完機能とかもそのまま使えます。
JavaScriptを書いたら、そのままCloud Shellに戻って`$ node index.js`とかで実行できます。

### ショートカットキー

動作|キー
:--|:--
保存|Ctrl+S
閉じる|Ctrl+Q
ファイルを開く|Ctrl+P
コマンドパレット|**F1**

コマンドパレット上から他のショートカットキーを確認できます。
コマンドパレット自体のショートカットキーはVSCodeのもの(Ctrl+Shift+P、またはCtrl+Pしてから`>`入力)と異なるため注意が必要です。

コマンドパレットにあるのはインデントやカーソル移動、検索など最低限の内容になっています。

VSCodeの特徴のひとつ、マルチカーソル機能も利用可能です。`Add Cursor (Above|Below)`コマンドに、VSCodeと同じCtrl+Alt+(Up|Down)Arrowショートカットキーが設定されています。

Markdownプレビューや言語・テーマの変更、拡張機能の追加などはできないようです。

### 注意点

- ファイルの作成方法
    - `$ code newfile`のように新規ファイルを作成することはできず、Cloud Shellが落ちてしまう。
    - `$ touch newfile`のようにしてファイルを作成してから`$ code newfile`として使うか、`$ code`で単体で起動してから名前をつけて保存する
- プログラミング言語について
    - 判定は自動検出のみ。VSCodeにある`Change Language Mode`コマンドは存在しない
    - ファイル名が`hoge.rb`ならばRuby、`hoge.php`ならばPHPとして扱ってくれるが、Cloud ShellにはRubyやPHPはインストールされておらず実行できない。
        - 実行できる言語は[Azure Cloud Shell の機能 \| Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/cloud-shell/features#tools)に一覧がある
- テーマの変更機能はない
    - ただ`Toggle High Contrast Theme`という独自のコマンドが存在し、ハイコントラストの配色が選択できる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/50391/d3ac22bd-a623-6667-29b4-8250d8f7e25e.png)
 

### おまけ: 一体これはVSCodeなのか
このcodeコマンド、実際にはVSCodeというよりは、VSCodeのコア部分である[Microsoft/monaco\-editor](https://github.com/Microsoft/monaco-editor)をブラウザで使えるようにした物のように見えます。

`$ code --version`や`$ code --help`コマンドは使えなかったので、バージョンを確認したりすることはできません。
ではこの`$ code`コマンドは何なのか、すこし中を失礼してみると...

```bash
$ which code
/usr/bin/code
$ cat /usr/bin/code
#! /bin/bash

####
#
# Copyright (c) Microsoft Corporation
#
# All rights reserved.
#
####

curl -d "{ \"params\": \"$@\", \"pwd\": \"`pwd`\" }" -H "Content-Type: application/json" -X POST http://localhost:8888/editors/${ACC_TERM_ID}/cli;
```

localhost:8888に謎のサーバが立っているらしく、そこにカレントディレクトリと引数(ファイル名)をJSON POSTしているようでした。
(通常のVisualStudioCodeならば、Electronの起動コマンドが入っているところです: [vscode/code\.sh at 1\.25\.1 · Microsoft/vscode](https://github.com/Microsoft/vscode/blob/1.25.1/resources/win32/bin/code.sh))


## 参考

- [Announcing the Azure Cloud Shell editor in collaboration with Visual Studio Code \| ブログ \| Microsoft Azure](https://azure.microsoft.com/ja-jp/blog/cloudshelleditor/)
- [VS Codeのエディタ部分をPWAにしてAzureにDeployして、モバイルで使う \- backstage](http://s2terminal.hatenablog.com/entry/2018/04/22/015656)