逆引きElectron + Vue.js #Vue.js

bookmark-with-imageの開発で得たElectronとVue.jsを組み合わせてネイティブアプリを開発するノウハウを整理した。

electron-vueはVue CLI2ベースなので、Vue CLI3以降に対応したVue CLI Plugin Electron Builderを利用する。

以下の通り、Vue CLIで通常通りVue.jsプロジェクトを作成した後に、electron-builderプラグインを追加すればよい。

vue create {project name}
vue add electron-builder

以下の流れで、メインプロセスのロジックをまとめたServiceクラスを、remote.requireを利用してレンダラープロセスから呼び出す。

メインプロセスで実行する処理をServiceクラスとして実装する。（例：ConfigService.ts）
background.tsにて、アプリ起動時に各Serviceクラスのインスタンスを登録（RemoteServiceManager.tsを参照）しておく。（厳密には初回利用時にインスタンス生成すれば十分ではある。）
- メインプロセスとレンダラープロセスのコードはそれぞれでminifyされてクラス名が別になるため、デコレータ（RemoteService.ts）を使って、メインプロセス⇔レンダラープロセスで共有するService名を登録している。
レンダラープロセスから必要なServiceクラスのインスタンスをremote.require経由で取得して呼び出す。（RemoteServiceFactory.tsを参照）
- メインプロセス開発用ビルド electron:serve ではbackground.jsにトランスパイルされ、プロダクション用ビルド electron:build ではindex.jsにトランスパイルされるため、どちらにも対応できるように実装している。（参考）

SQLite3 + TypeORM を利用する。

ネイティブモジュールに依存しないPure JavaScript実装のデータベースとしてNeDBがあるが、開発が止まっておりElectron v6以降にも対応していないようである。（参考）
SQLite3はネイティブモジュールを扱う必要ありだが、対応する開発補助ツール（WindowsではA5:SQLなど）も多くあり、TypeORMでもサポートされている。
その他の候補としてはsql.jsがあるが未検証。

SQLite3は以下の手順でElectron用にビルドする必要がある。

  npm install --global --production windows-build-tools

  npm install sqlite3 --build-from-source --save --runtime=electron --target=6.1.7 --dist-url=https://atom.io/download/electron

※ targetには利用するElectronのバージョンを指定すること。

TypeORMのSQLite3Driverはレンダラープロセスではなくメインプロセスから呼び出す必要がある（参考1、参考2）ため、レンダラープロセスからメインプロセスの処理を呼び出すの方法で実装する。

public/icon.png に配置した元画像を、各プラットフォーム向けにリサイズして build ディレクトリに保存してくれる。
その他の方法としては、electron-builderのデフォルトアイコン画像パス（Windowsの場合は build/icon.ico or .png ）に画像を置くか、electron-builderの設定でパスを指定することもできる。

（参考）Font Awesomeを使ったアイコン画像を作るときには https://gauger.io/fonticon/ が便利である。