Vue.jsで作ったマークダウンエディタアプリをElectronでデスクトップアプリにする

6342 ワード
Electron Vue.js Markdown Markdown テキストリンク

はじめに

前回、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...


> [email protected] install C:\Users\taka\.ghq\github.com\mono0423\p-mark-down-editor\node_modules\electron-chromedriver
> node ./download-chromedriver.js

+ [email protected]
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アプリ化を試してみる)ですので、そちらも試していきたいと思います。