逆引きElectron + 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

参考：https://qiita.com/jay-es/items/910db55f93c0c4c00727

レンダラープロセスからメインプロセスの処理を呼び出す

※ remoteモジュールは非推奨となっており、Electron v10からデフォルトでは無効化されるとのこと。以下の方法はipcRendererを利用した方法に変更予定。

以下の流れで、メインプロセスのロジックをまとめた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用にビルドする必要がある。

• ビルドツール（node-gypなど）をインストールする。Windowsではwindows-build-toolsを使うと簡単。（参考）

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

• Electron用にSQLite3をビルドする。

  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）ため、レンダラープロセスからメインプロセスの処理を呼び出すの方法で実装する。

アイコン画像を設定する

Vue CLI Plugin Electron Builderのドキュメントで紹介されているelectron-icon-builderを利用する。

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

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

ファイル選択ダイアログを実装する

https://qiita.com/unhurried/items/b622726851d22e36dccb を参照