VS Codeのエディタ部分をPWAにしてAzureにDeployして、モバイルで使う

普段は開発にもメモにもVS Codeを使っているのですが、VS CodeはChromebook等では使えません。そこでVS CodeのエディタエンジンであるMonaco Editorを、Azure Web Appsにデプロイして、PWAとして使ってみました。

PWAにすることで、ブラウザさえあればオフラインでも動作するようになり、エディタアプリのように利用できます。

Monaco Editor on Cloud

https://monaco-on-cloud.azurewebsites.net

実際に、この記事もこのエディタで書きました。

以下に、今回使ってみた技術を列挙します。なお本件はGlobal Azure Bootcamp 2018@TokyoでLTをしたのですが、思ったよりもAzure関係ない技術が多かったので、こうして改めてまとめてみました。

Visual Studio Code (VS Code)

code.visualstudio.com

Microsoftが無償で提供している、最高のエディタ
Electron製で、Webの技術で動いている
Windows/Linux/Mac版がある
- ChromebookやiOS/Android版は無い

Monaco Editor

https://microsoft.github.io/monaco-editor/

VSCodeのエディタエンジン部分。VS Codeとは独立したリポジトリになっている
- もともとVS CodeよりもMonaco Editorの方が歴史は古いはず
公式にはモバイルはサポート対象外だが、動くには動く
$ npm install monaco-editor –saveしてHTMLを書くだけで、高機能なエディタがすぐに動く

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
</head>
<body>

  <div id="container"></div>
  
  <script>
  require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' }});
  require(['vs/editor/editor.main'], function() {
    var editor = monaco.editor.create(document.getElementById('container'), {
      value: [
      'function x() {',
      '\tconsole.log("Hello world!");',
      '}'
      ].join('\n'),
      language: 'javascript'
    });
  });
  </script>
</body>
</html>

https://github.com/s2terminal/monaco-on-cloud/commit/ed4d045f1129b70cf98ea821ee167783313d4c10

Web Server for Chrome

chrome.google.com

Chrome上で動作するWebサーバ。開発用に使用。
静的HTMLファイルを指定すると http://localhost:8887 等でアクセスできるようになる
PWAを開発するならChromeを活用したほうが良いので、開発サーバもChromeで。

Azure Web Apps

docs.microsoft.com

git pushするだけで静的なサイトを簡単にDeployできる。本番環境に使用。
- Web Appは.NETやPHP等のバックエンドWebアプリケーションも動作するが、今回は静的HTML。
- $ git push azureするときに$ npm installも自動で実行してからDeployしてくれる
HTTPSも付いてくる
- ポータル上で「カスタムドメイン」→「HTTPSのみ」で、HTTP→HTTPSへリダイレクトするようになる

Azure Cloud Shell

docs.microsoft.com

Azure Web Appsのドキュメント内で「使ってみる」を押すとブラウザ画面下部から生えてくるシェル
これを使うと、ドキュメントからWeb AppsをDeployできる

Service Worker

developers.google.com

PWAの構成要素。Webページとは別に裏側で動作するプログラム。
ここでfetchイベントを使ってHTTPリクエストに割り込み、キャッシュがあればキャッシュから返すことで、Webページがオフラインでも動作するようにできる

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        return response; // キャッシュから返す
      }
      return fetch(event.request); // ネットワークにリクエストする
    })
  );
});

https://github.com/s2terminal/monaco-on-cloud/commit/7b03a28bcb2b8d56e283c36597fe7cbfaf69818b

しかし、このようにキャッシュの戦略を適当に書いていくことは推奨されないので、後述のWorkboxのようなライブラリを用いる
- 実際、全然キャッシュが消せなくなって困った

Workbox

developers.google.com

Service Workerによるキャッシュ機構を提供する、Google製のライブラリ
先程のキャッシュの記述も、このようにシンプルに書き変えることができる

importScripts('node_modules/workbox-sw/build/workbox-sw.js');
workbox.routing.registerRoute(new RegExp('/'), workbox.strategies.networkFirst());

https://github.com/s2terminal/monaco-on-cloud/commit/31b32dac2ae2441ccd066415c245ff58725f5bab

Web App Manifest

developers.google.com

PWAにはWeb App Manifestと呼ばれるJSONファイルが必須
アプリ名やアイコン画像などを、ここで指定する

{
  "short_name": "Monaco",
  "name": "Monaco Editor on Cloud",
  "theme_color": "#1e1e1e",
  "background_color": "#1e1e1e",
  "display": "minimal-ui",
  "icons": [{
    "src": "images/logo.png",
    "type": "image/png",
    "sizes": "400x400"
  }],
  "start_url": "index.html"
}

Azure Web Appsの仕様で、web.configというXMLを作成して設定しないとJSONが配信できず403 Forbiddenとなる

<?xml version="1.0" encoding="UTF-8" ?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

https://github.com/s2terminal/monaco-on-cloud/commit/b3bc1688eb0faed05c92de71948c862793aaa105

Lighthouse (Chrome Audits Tab)

f:id:s2terminal:20180422012045p:plain

Chrome DevToolsのAuditsタブ等から使える、ウェブサイトの診断ツール
Chromeに統合されているので、本番環境はもちろんlocalhostでも問題なく利用できる
PWAの対応状況を点数化して、対応項目を列挙してくれる

CSSグリッドレイアウト

developer.mozilla.org

twbs/bootstrapのようなフレームワーク無しに、CSSだけで簡単にグリッドシステムを実現できる記法
学習には https://cssgridgarden.com が分かりやすい

Office UI Fabric JS

https://dev.office.com/fabric-js/index.html

Office365等に使われているCSSフレームワーク
- 個人的には、Fluent Design SystemのCSS フレームワークが欲しいけど...
うまく使えばMicrosoft製品っぽいUIを実現できる

<button id="save" class="ms-Button ms-Button--primary">
  <span class="ms-Button-label">Save</span>
</button>
<button id="load" class="ms-Button ms-Button--primary">
  <span class="ms-Button-label">Load</span>
</button>