Ionic Reactで作ったSPAをCapacitorでElectron(デスクトップアプリ)にする

Capacitorを使うことで、iOSやandroid / デスクトップ向けのアプリを作ることができます。ということで、Ionic Reactで作ったアプリをMacのデスクトップアプリとしてビルドしてみました。 Capa […]

Capacitorを使うことで、iOSやandroid / デスクトップ向けのアプリを作ることができます。ということで、Ionic Reactで作ったアプリをMacのデスクトップアプリとしてビルドしてみました。

Capacitorを有効化する

まずCapacitorをIonicプロジェクト側で有効化しておきます。すでに有効化されていても問題ないコマンドなので、不安ならとりあえず実行しておきましょう。

$ ionic integrations enable capacitor

CapacitorでElectronを追加する

cap add コマンドで対応するプラットフォームを追加します。

$ npx cap add electron
✔ Installing NPM Dependencies in 50.97s
✔ add in 50.98s
✔ Copying web assets from build to electron/app in 74.63ms
✔ Copying capacitor.config.json in 1.42ms
✔ copy in 78.75ms
✔ update electron in 91.89μp

Electronを指定すると、 electron ディレクトリができました。

% tree electron -L 1
electron
├── app
├── capacitor.config.json
├── index.js
├── node_modules
├── package-lock.json
├── package.json
└── splash_assets

3 directories, 4 files

Electron側が読んでいるアプリのコードはどこにあるのか？

ざっとみた感想ですが、どうやら /buildにあるビルドされたアプリのコードを./electron/appにコピーしている様子です。

なのでアプリのコードを変更した場合は次の3コマンドを打つ必要がありそうです。

$ yarn run build // or ionic build
$ npx cap copy
$ npx cap open electron

一部ファイルの変更

Ionic ReactのSPAはそのままビルドするだけではElectronで動かない様子です。

なので2ファイルほど変更を入れます。

参考：https://github.com/ionic-team/ionic/issues/19767#issuecomment-571812776

`public/index.html`: Baseタグを相対パスに

baseタグを以下のように変更します。

% git diff public/index.html 
diff --git a/public/index.html b/public/index.html
index 25b753b..f2ab8ed 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,8 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Ionic App</title>
-
-    <base href="/" />
+    <base href="./" /> 
 
     <meta name="color-scheme" content="light dark" />
     <meta

`package.json`: homepageプロパティの追加

% git diff package.json
diff --git a/package.json b/package.json
index 0bca5d1..27c1f90 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "name": "ionic-react-wordpress",
   "version": "0.0.1",
   "private": true,
+  "homepage": "./",
   "dependencies": {
     "@capacitor/core": "2.0.1",
     "@ionic/react": "^5.0.7",

ローカルで実行する

あとはcap open electronを実行すればOKです。

$ ionic build
$ npx cap copy
$ npx cap open electron

うまく動けば、Ionic Reactで作ったアプリがデスクトップアプリとして動き出します。

ビルド・パッケージング

せっかくなのでパッケージにしてみます。

electron-packagerというCLIを使うのが簡単そうだったので、今回はこれを利用しました。

$ cd electron
$ npx electron-packager . sample --platform=darwin --arch=x64
$ tree ./sample-darwin-x64 -L 2
./sample-darwin-x64
├── LICENSE
├── LICENSES.chromium.html
├── sample.app
│   └── Contents
└── version

2 directories, 3 files

$ open ./sample-darwin-x64

最後のopenコマンドでディレクトリを開くと、デスクトップアプリケーションが1つ出来上がっているのがわかります。