Electron 開発をはじめる前に知っておきたかったこと 7 選

この記事は RevComm Advent Calendar 2022 の 12 日目の記事です。

はじめに
1. キルスイッチを用意する
2. パッケージに含まれる内容を確認する
3. Electron が機能を提供しているか確認する
4. キーボードショートカットを設定する
5. 署名・公証
6. ライセンス表記
7. アップデートに備える
おわりに

はじめに

Electron は、JavaScript、HTML、CSS などの Web 技術を使用して、クロスプラットフォームのデスクトップアプリケーションを構築するためのフレームワークです。内部的には Node.js と Chromium が使用されており、OS ネイティブな機能をユーザーに提供することができます。Electron は Slack、Visual Studio Code、Discord などの多くの人気アプリケーションで使用されています。

デスクトップアプリケーションの開発には、ブラウザ上でのみ動作する Web アプリケーションの開発とは異なる注意点があります。本記事では、筆者が業務で Electron 開発中に得た知見の中から、開発をはじめる前に知っておきたかったことをまとめています。

1. キルスイッチを用意する

「キルスイッチ」は古いアプリを使用しているユーザーに対してアップデートを促す、もしくは利用を停止させる仕組みのことです。PAGNI 法則のひとつとしても挙げられており、ユーザーに後から提供することは難しい一方で、将来的には確実に必要になる重要な機能です。

筆者のチームでは electron-updater を使って自動アップデートの仕組みを実装し、アップデートを検知してダイアログを表示、自動更新することを可能にしました。また、WebView にアプリケーションのバージョンを連携するようにし、WebView 内のコンテンツ上で警告を表示して利用を停止させることも可能にしています。

2. パッケージに含まれる内容を確認する

Electron ではソースコードを asar 形式でパッケージングします。asar 形式は元のファイルの情報をそのまま含むので、すべてを復元することができます。ビルドツールによっては初期設定のままだとソースコードだけでなく、リポジトリ内部のすべてファイルをパッケージに含むこともあるので注意が必要です。

機密情報やパスワードを書いたファイルなどが流出しないよう、これらをパッケージに含めないように気をつけてください。

3. Electron が機能を提供しているか確認する

提供されている機能以外を使用すると OS の仕様などを考慮する必要が発生し、修正難易度が高くなるので注意が必要です。

例えば、Node.js のプロセスから通信を行う場合に「Electron axios」などで検索すると結構な数の記事が出てきますが、落とし穴があります。ブラウザであれば、Basic 認証のプロンプトを出すことや OS のプロキシ設定の読み取りなどはブラウザがサポートしている機能なので自ら実装する必要はありません。しかし、外部ライブラリを使用し独自の実装を行った場合は、それらを追加で実装する必要があります。このケースに対して、Electron は net モジュールを提供しています。net モジュールは Chromium を介した通信を行い、認証や OS 設定の読み取りを実行してくれます。

ブラウザと OS が連携されるような機能を用いる場合は、一通り公式ドキュメントに目を通して機能が提供されていないか確認しておくべきです。

4. キーボードショートカットを設定する

Electron は Copy や Paste などの標準的なキーボードショートカットであっても、デフォルトの状態では追加されません。 menu モジュールを使用して明示的に追加する必要があります。

5. 署名・公証

署名は、開発者情報をアプリケーションに付与して開発元を明らかにするものです。

Windows では署名がない場合、セキュリティダイアログが表示されます。署名は Windows Authenticode に対応した証明書で行う必要があります。

macOS では署名することに加え、公証を受ける必要もあります。公証は、Apple がアプリケーションに対してセキュリティチェックを実施し、悪質なものでないかを確認することです。macOS 10.14.5 のリリース以降、署名済みアプリケーションは公証を受けなければ GateKeeper に引っ掛かり、ユーザーがインストールできないようになっています。

https://www.electronjs.org/ja/docs/latest/tutorial/code-signing https://developer.apple.com/jp/developer-id/

6. ライセンス表記

MIT や Apache Software License などオープンソースライセンスには頒布物に著作権表記を含めることが条件に含まれています。ソースコードが閲覧可能な場合はそこに含めればよいのですが、 asar やバイナリに変換して配布した場合は、ユーザーが閲覧可能な形で別途ライセンスを公開する必要があります。筆者のチームでは、アプリケーション内のユーザーが閲覧可能なディレクトリ以下に

LICENSE（yarn license にて作成）
LICENSE.electron.txt（node_modules/electron/dist からコピー）
LICENSES.chromium.html（node_modules/electron/dist からコピー）

の 3 点をコピーしています。使用した node_modules の他に、Electron と Chromium のライセンスも含める必要があることに注意してください。

7. アップデートに備える

Electron には version support policy が定められており、 Chromium が 4 週間毎にリリースされるのに合わせて 8 週間毎にリリースされることになっています。Microsoft Store に Chromium ベースのアプリケーションを公開する場合に最新から 2 以上のメジャーバージョンの遅れは許容されないなど、アップデートが必要になることがあります。

Electron を最大限に活用するために、初期の段階でテストやリリースを自動化するなど、積極的に投資していくことが望ましいです。