Ionic5にCapacitorとElectronを導入し、デスクトップアプリとしてビルドする手順

3675 ワード
Electron Capacitor ionic ionic テキストリンク

Ionicプロジェクトの作成

Ionicプロジェクトを新規作成します。
作成時の選択項目は適当な物を選んでおきます。

$ ionic start my-project

プロジェクトのルートディレクトリに移動しておきます。

$ cd my-project

Capacitorのインストール

$ npm install --save @capacitor/cli @capacitor/core

Electronのインストール

$ npm install ngx-electron electron
$ npm install electron-packager --save-dev

アプリの初期設定

例としてアプリ名はexample、アプリIDはcom.example.appとします。

$ npx cap init example com.example.app

src/index.htmlの修正

後々、Electronアプリを起動した際にコンソールエラーが出てしまうので、src/index.htmlのbaseタグを下記のように修正します(スラッシュの前にドットを付ける)。

src/index.html
<base href="./" />

Electronアプリの起動

  1. Ionicプロジェクトをbuildします。
  2. CapacitorにElectronをプラットフォームとして追加します。
  3. buildした中身(/www配下)をCapacitorにコピーします。
  4. Electronアプリとして起動できます。
$ ionic build
$ npx cap add electron
$ npx cap copy
$ npx cap open electron

2回目以降のbuild時は、2.の手順「npx cap add electron」は省いてよいです。

Electronアプリのbuild

package.jsonの編集

package.jsonに下記を追記します。
アプリ名はExampleとします。

package.json
"scripts": {
 //中略
"electron:mac": "electron-packager ./electron Example --overwrite --platform=darwin --arch=x64 --prune=true --out=release-builds",
"electron:win": "electron-packager ./electron Example --overwrite --asar=true --platform=win32 --arch=ia32 --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName='Example Electron App'"
}

buildコマンド

下記コマンドを打つと、それぞれmac版とwin版のデスクトップアプリとして、/release-builds配下にアプリがbuildされます。

$ npm run electron:mac
$ npm run electron:win
配列ツールクラスArraysと集合ツールクラスCollectionsの一般的な方法
MAVENコンパイルパッケージ時報「…記号が見つからない」の処理方法まとめ