はじめに
前回、Auth0を使ってプライベートなマークダウンエディタを作る（クライアントサイド編）で、ブラウザで動作するマークダウンエディタのプロトタイプを作成しました。
本記事では、Electron を使ってデスクトップアプリ化しようと思います。
システム構成図
本記事では、前回記事で作成したクライアントを Electron を使ってデスクトップアプリにしていきます。
Vue.jsプロジェクトをElectron化する
Vue.js のプロジェクトは2コマンド実行するだけで Electron 化できます。
前準備：Vue.jsプロジェクトを作成する
Auth0を使ってプライベートなマークダウンエディタを作る（クライアントサイド編）の手順を一通り行い、http://localhost:3000/にアクセスすると以下のような画面が表示される状態にします。
Electronのコマンドを実行する
vue-cliプラグインのelectron-builderを使うことで Electron 化できます。
詳細はこちら→https://nklayman.github.io/vue-cli-plugin-electron-builder/
以下のコマンドを実行します。
$ npm i -g @vue/cli
$ vue add electron-builder
途中で、使用する Electron のバージョンを聞かれるので、最新の6.0.0を選択します。
$ npm i -g @vue/cli
$ vue add electron-builder
�📦 Installing vue-cli-plugin-electron-builder...
> electron-chromedriver@5.0.1 install C:\Users\taka\.ghq\github.com\mono0423\p-mark-down-editor\node_modules\electron-chromedriver
> node ./download-chromedriver.js
+ vue-cli-plugin-electron-builder@1.4.3
added 222 packages from 157 contributors and audited 30705 packages in 22.803s
found 7 moderate severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
✔ Successfully installed plugin: vue-cli-plugin-electron-builder
? Choose Electron Version ^6.0.0 <-- バージョンはとりあえず最新の6.0.0を選択（他のでも大丈夫です）
～～～～～～～～～～～～～～～～～～～～～～～～略～～～～～～～～～～～～～～～～～～～～～～～～～～
✔ Successfully invoked generator for plugin: vue-cli-plugin-electron-builder
The following files have been updated / added:
src/background.js
.gitignore
package-lock.json
package.json
You should review these changes with git diff and commit them.
少し待つと、コマンドが成功するはずです。
electron-builderによって、以下 4 ファイルが追加・更新されたようなので、バージョン管理している場合は忘れずにコミット・プッシュしておきましょう。
- src/background.js
- .gitignore
- package-lock.json
- package.json
いざ動作確認
package.jsonのscriptsを見るといくつかエイリアスが追加されており、$ npm run electron:serveで起動できそうなので、実行してみます。
$ npm run electron:serve
npm WARN lifecycle The node binary used for scripts is C:\Program Files (x86)\Nodist\bin\node.exe but npm is using C:\Program Files (x86)\Nodist\v-x64\12.11.1\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
DONE Compiled successfully in 7536ms 15:58:18
App running at:
- Local: http://localhost:3000/
- Network: http://192.168.100.47:3000/
Note that the development build is not optimized.
To create a production build, run npm run build.
- Bundling main process...
DONE Compiled successfully in 5384ms 15:58:23
File Size Gzipped
dist_electron\index.js 651.00 KiB 148.88 KiB
Images and other types of assets omitted.
INFO Launching Electron...
するとこんな画面が出てきます。
開発者ツールが表示されているので、×ボタンで閉じると Web と同じ見た目になりました。
Auth0 を使った Google ログインもでき、マークダウンエディタの機能も壊れることなくそのままデスクトップアプリとして動かすことができました。
まとめ
Vue.js で作成した Web アプリは、vue-cli プラグインのelectron-builderの力を借りることで、2コマンドだけでデスクトップアプリにできました（うち 1 つは vue-cli のインストールだったので、vue-cli がインストールされていれば、1コマンドのみですね）
デスクトップアプリとして動かした場合でも、Web で動いていた機能が壊れることなく動いたのは驚きました（Electron の内部では Chromium が使われているとのことなので、当たり前っちゃ当たり前ですが）
最近は PWA を使ってもデスクトップアプリっぽく見せることができるよう(Windows 10 1803の新機能「PWA」とは？PWAのUWPアプリ化を試してみる)ですので、そちらも試していきたいと思います。