Electron プラットフォームガイド

Electron は Web テクノロジー（HTML、CSS、および JS）を使用してクロスプラットフォームのデスクトップアプリケーションを構築するフレームワークです。

システム要件

Linux

Python バージョン 2.7.x。CentOS 6.x などのディストリビューションは引き続き Python 2.6.x を使用しているため、Python のバージョンを確認することをお勧めします。

Mac

TLS 1.2 をサポートするPython バージョン 2.7.x。
macOS の IDE であるXcode には、macOS のネイティブコードのコード署名とコンパイルに必要なソフトウェア開発ツールがバンドルされています。バージョン 8.2.1 以上。
RedHat ビルドサポート
- 利用可能な macOS パッケージマネージャーの 1 つであるHomebrew は、追加のツールと依存関係のインストールに使用されます。Homebrew は RPM パッケージの依存関係をインストールするために必要です。 Brew のインストール手順
- 複数の Linux ディストリビューションの標準パッケージマネージャーであるRPM は、Linux RPM パッケージの作成に使用されるツールです。このツールをインストールするには、次の Homebrew コマンドを使用します
```
brew install rpm
```

Windows

Python バージョン 2.7.10 以上。
Windows 7 ユーザー向けのPowerShellは、アプリケーションの署名の場合、バージョン 3.0 以上である必要があります。
Windows のデバッグツールは、デバッグ機能を強化するためのツールキットです。Windows SDK 10.0.15063.468と一緒にインストールすることをお勧めします。

クイックスタート

プロジェクトの作成

npm i -g cordova
cordova create sampleApp
cd sampleApp
cordova platform add electron

注意: バージョン 9.x より前の Cordova CLI を使用している場合は、プラットフォームの名前が必要なコマンドに electron ではなく cordova-electron の引数を使用する必要があります。例:

cordova platform add cordova-electron
cordova run cordova-electron

プロジェクトのプレビュー

Electron アプリケーションをプレビューするためにビルドする必要はありません。ビルドプロセスは低速になる可能性があるため、プレビュー時にビルドプロセスを無効にするために --nobuild フラグを渡すことをお勧めします。

cordova run electron --nobuild

プロジェクトのビルド

デバッグビルド

cordova build electron
cordova build electron --debug

リリースビルド

cordova build electron --release

アプリケーションのウィンドウオプションのカスタマイズ

Electron には BrowserWindow を操作するための多くのオプションが用意されています。このセクションでは、いくつかの基本オプションを構成する方法について説明します。オプションの全リストについては、Electron ドキュメント - BrowserWindow オプションを参照してください。

Cordova プロジェクトで作業する場合、プロジェクトのルートディレクトリ内に Electron 設定ファイルを作成し、config.xml ファイルの優先オプション ElectronSettingsFilePath でその相対パスを設定することをお勧めします。

config.xml の例:

<platform name="electron">
    <preference name="ElectronSettingsFilePath" value="res/electron/settings.json" />
</platform>

このファイルで BrowserWindow オプションをオーバーライドまたは設定するには、オプションを browserWindow プロパティに追加します。

res/electron/settings.json の例:

{
    "browserWindow": { ... }
}

ウィンドウのデフォルトサイズを設定する方法:

デフォルトでは、width は 800 に設定され、height は 600 に設定されます。これは、width と height プロパティを設定することでオーバーライドできます。

例:

{
    "browserWindow": {
        "width": 1024,
        "height": 768
    }
}

ウィンドウのサイズ変更を無効にする方法:

resizable フラグプロパティを設定すると、ユーザーがアプリケーションウィンドウのサイズを変更できなくなります。

例:

{
    "browserWindow": {
        "resizable": false
    }
}

ウィンドウをフルスクリーンにする方法:

fullscreen フラグプロパティを使用すると、アプリケーションをフルスクリーンで起動するように強制できます。

例:

{
    "browserWindow": {
        "fullscreen": true
    }
}

Node.js と Electron の API をサポートする方法:

nodeIntegration フラグプロパティを true に設定します。Node.js および Electron がすでに使用しているのと同じ名前のシンボルを挿入する一般的なライブラリをサポートするために、このプロパティフラグはデフォルトで false に設定されています。

詳細については、Electron ドキュメントの「Electron で jQuery/RequireJS/Meteor/AngularJS を使用できない」を参照してください: https://electron.dokyumento.jp/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron。

例:

{
    "browserWindow": {
        "webPreferences": {
            "nodeIntegration": false
        }
    }
}

Electron のメインプロセスのカスタマイズ:

Electron の主要プロセスのカスタマイズが Electron の構成設定の範囲を超えて必要になった場合、{PROJECT_ROOT_DIR}/platform/electron/platform_www/にある cdv-electron-main.js ファイルに直接変更を追加できます。これは、アプリケーションの main プロセスです。

❗ただし、cordova-electron のアップグレード手順では古いプラットフォームが削除されてから新しいバージョンが追加されるため、このファイルを編集することはお勧めしません。

DevTools:

--release と --debug フラグは、DevTools の表示を制御します。DevTools は デバッグビルド (フラグなし または --debug 付き) でデフォルトで表示されます。DevTools を非表示にする場合は、アプリケーションのビルドまたは実行時に --release フラグを渡します。

注意: DevTools はデバッグビルドで手動で閉じたり開いたりできます。

ビルド構成:

デフォルトのビルド構成:

追加の構成なしでデフォルトでは、cordova build electron によってコマンドをトリガーするホストオペレーティングシステム (OS) のデフォルトのパッケージがビルドされます。以下に、各 OS のデフォルトパッケのリストを示します。

Linux

パッケージ	アーキテクチャ
tar.gz	x64

Mac

パッケージ	アーキテクチャ
dmg	x64
zip	x64

Windows

パッケージ	アーキテクチャ
nsis	x64

ビルド構成のカスタマイズ:

何らかの理由でビルド構成をカスタマイズする場合、変更はプロジェクトのルートディレクトリ (例: {PROJECT_ROOT_DIR}/build.json) にある build.json ファイル内に配置されます。このファイルには、すべてのプラットフォーム (Android、Electron、iOS、Windows) のすべてのビルド構成が含まれています。

構成構造の例:

{
    "electron": {}
}

Electron フレームワークはクロスプラットフォームアプリケーションを作成するためのものなので、OS ビルドごとに複数の構成が必要です。build.json ファイルの electron ノードには、各 OS のビルド構成を分離する 3 つのプロパティが含まれています。

各プラットフォームの構成構造の例:

{
    "electron": {
        "linux": {},
        "mac": {},
        "windows": {}
    }
}

各 OS ノードには、どのパッケージを生成するか、および署名する方法を識別するために使用されるプロパティが含まれています。

OS プロパティ:

package は、生成されるパッケージフォーマットの配列です。
arch は、各パッケージがビルドされるアーキテクチャの配列です。
signing は署名情報を格納するオブジェクトです。詳細については、署名構成を参照してください。

未定義のすべてのプロパティは、デフォルト値に戻ります。

`package` の追加

package プロパティは、出力するパッケージの配列リストです。プロパティが定義されている場合、追加されない限り、デフォルトのパッケージは使用されません。パッケージの順序は重要ではありません。

以下の構成例では、macOS 用の tar.gz、dmg 、zip パッケージが生成されます。

{
    "electron": {
        "mac": {
            "package": [
                "dmg",
                "tar.gz",
                "zip"
            ]
        }
    }
}

オペレーティングシステムごとの使用可能なパッケージ

パッケージタイプ	Linux	macOS	Windows
デフォルト	-	`dmg` `zip`	-
dmg	-	✅	-
mas	-	✅	-
mas-dev	-	✅	-
pkg	-	✅	-
7z	✅	✅	✅
zip	✅	✅	✅
tar.xz	✅	✅	✅
tar.lz	✅	✅	✅
tar.gz	✅	✅	✅
tar.bz2	✅	✅	✅
dir	✅	✅	✅
nsis	-	-	✅
nsis-web	-	-	✅
portable	-	-	✅
appx	-	-	✅ ^[1]
msi	-	-	✅
AppImage	✅	-	-
snap	✅	-	-
deb	✅	-	-
rpm	✅	-	-
freebsd	✅	-	-
pacman	✅	-	-
p5p	✅	-	-
apk	✅	-	-

[1] Windows 10 のみで AppX パッケージをビルドできます。

パッケージの `arch` の設定

arch プロパティは、各パッケージがビルドされるアーキテクチャの配列リストです。プロパティが定義されている場合、追加されない限り、デフォルトのアーキテクチャは使用されません。

❗ すべてのアーキテクチャがすべてのオペレーティングシステムで利用できるわけではありません。Electron リリースを確認して、有効な組み合わせを特定してください。たとえば、macOS（ダーウィン）は x64 のみサポートしています。

利用可能なアーキテクチャ

ia32
x64
armv7l
arm64

上記の例では、x64 dmg パッケージが生成されます。

{
    "electron": {
        "mac": {
            "package": [ "dmg" ],
            "arch": [ "x64" ]
        }
    }
}

マルチプラットフォームのビルドサポート

❗ すべてのプラットフォームがこの機能をサポートしているわけではありません。また、制限がある場合があります。

単一のオペレーティングシステム上で複数のプラットフォームをビルドすることはできますが、制限があります。ビルダのオペレーティングシステム（ホスト OS）が、ビルド中のプラットフォームと一致することが推奨されます。

次のマトリックスは、各ホスト OS と、それらがアプリケーションをビルドできるプラットフォームを示しています。

ホスト ^[1]	Linux	Mac	Windows
Linux	✅		❗ ^[2]
Mac ^[3]	✅	✅	❗ ^[2]
Windows			✅

制限事項

[1] アプリにネイティブの依存関係がある場合は、ターゲットのプラットフォームでのみコンパイルできます。
[2] Linux と macOS は、Windows ストア用の Windows Appx パッケージをビルドできません。
[3] rpm を除くすべての必須システム依存関係は、オンデマンドで自動的にダウンロードされます。RPM は brew（macOS Sierra 10.12 以降）でインストールできます。

次の例では、すべての OS に対してマルチプラットフォームのビルドを有効にし、デフォルトのビルド構成を使用します。

{
    "electron": {
        "linux": {},
        "mac": {},
        "windows": {}
    }
}

署名構成

macOS 署名

3 種類の署名ターゲットがあります。（debug、release、および store）。各セクションには次のプロパティがあります。

key	description
entitlements	エンタイトルメントファイルへの文字列パス値。
entitlementsInherit	セキュリティ設定を継承するエンタイトルメントファイルへの文字列パス値。
identity	証明書の名前の文字列値。
requirements	要件ファイルの文字列パス値。 ❗ これは `mas`（ストア）署名構成では使用できません。
provisioningProfile	プロビジョニングプロファイルの文字列パス値。

構成の例

{
    "electron": {
        "mac": {
            "package": [
                "dmg",
                "mas",
                "mas-dev"
            ],
            "signing": {
                "release": {
                    "identity": "APACHE CORDOVA (TEAMID)",
                    "provisioningProfile": "release.mobileprovision"
                }
            }
        }
    }
}

macOS 署名では、署名情報の使用方法にいくつかの例外があります。デフォルトでは、mas と mas-dev を除くすべてのパッケージは、debug と release 署名構成を使用します。

上記の構成例を使用して、例外をより理解するためのユースケースについて説明します。

ユースケース 1

cordova build electron --debug

上記のコマンドは

debug 署名構成を使用して dmg ビルドと mas-dev ビルドを生成します。
mas ターゲットパッケージを無視します。

ユースケース 2

cordova build electron --release

上記のコマンドは

release 構成を使用して dmg ビルドを生成します。
store 構成を使用して mas ビルドを生成します。
mas-dev ターゲットパッケージは無視してください。

Windows 署名

署名情報は 2 つのタイプで構成されます。(debug、release) 各セクションには次のプロパティがあります。

key	description
certificateFile	証明書ファイルのパス文字列。
certificatePassword	証明書ファイルのパスワードの文字列表現。代替手段: パスワードは環境変数 `CSC_KEY_PASSWORD` に設定できます。
certificateSubjectName	署名証明書の件名の文字列表現。 ❗ EV コード署名に必須で、Windows が必要です。
certificateSha1	署名証明書の SHA1 ハッシュの文字列表現。 ❗ Windows が必要です。
signingHashAlgorithms	使用する署名アルゴリズムのコレクション。(`sha1`、`sha256`) ❗ AppX ビルドは `sha256` のみをサポートします。
additionalCertificateFile	追加証明書ファイルへのパス文字列。

構成の例

{
    "electron": {
        "windows": {
            "package": [ "nsis" ],
            "signing": {
                "release": {
                    "certificateFile": "path_to_files",
                    "certificatePassword": "password"
                }
            }
        }
    }
}

Linux 署名

Linux ビルドには署名要件はありません。

プラグイン

すべてのブラウザーベースのプラグインは Electron プラットフォームで使用できます。

プラグインを追加すると、プラグインが electron と browser の両方のプラットフォームをサポートしている場合、electron 部分が使用されます。プラグインに electron がないが browser 実装が含まれている場合、browser 実装にフォールバックします。

Electron は内部的に Web ビューとして Chromium (Chrome) を使用しています。プラグインには、それぞれ異なる各ブラウザー用に書かれた条件がある場合があります。この場合、意図した動作に影響を与える可能性があります。Electron はブラウザーがサポートしていない機能をサポートする場合があるため、これらのプラグインは electron プラットフォーム向けに更新する必要がある可能性があります。

Electron プラットフォーム ガイド