backstage

合唱音源の新着情報の舞台裏

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

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

Launch Cloud Shell

  • 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

Office UI Fabric JS

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

<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>

LT発表資料

完成品

f:id:s2terminal:20180422014044p:plain

まとめ

Azure Web Apps を使うと、静的サイトを簡単にDeployすることができます。PWA として作成すれば、エディタのようにWebアプリをオフライン動作させることもできます。

参考

Where is the mobile version of Code. There are too many times that I have to rdp into a PC to make a minor change because I dont have an editor on my mobile device... (Windows phone, iPad, iPhone, Android Phone) ??? Please provide a mobile version!!! · Issue #27553 · Microsoft/vscode