Ionic Reactで作ったSPAをCapacitorでElectron(デスクトップアプリ)にする
Capacitorを使うことで、iOSやandroid / デスクトップ向けのアプリを作ることができます。ということで、Ionic Reactで作ったアプリをMacのデスクトップアプリとしてビルドしてみました。 Capa […]
Capacitorを使うことで、iOSやandroid / デスクトップ向けのアプリを作ることができます。ということで、Ionic Reactで作ったアプリをMacのデスクトップアプリとしてビルドしてみました。
目次
Capacitorを有効化する
まずCapacitorをIonicプロジェクト側で有効化しておきます。すでに有効化されていても問題ないコマンドなので、不安ならとりあえず実行しておきましょう。
$ ionic integrations enable capacitorCapacitorで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 filesElectron側が読んでいるアプリのコードはどこにあるのか？
ざっとみた感想ですが、どうやら /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" />
<metapackage.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つ出来上がっているのがわかります。
ブックマークや限定記事（予定）など
WP Kyotoサポーター募集中
WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。
14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。