tmegos blog

Web developer

Onsen UI x CordovaなアプリをIonic x Capacitorに移植したときにやったこと

OnsenUI Cordova Ionic Capacitor

以下のようなモチベーションで、自作アプリをIonicで書き換えてみることにしました

  • Vue.jsでもTypeScriptが使いたい
    • 2から3に上げたい
  • Onsen UIの更新が止まっていそう…？
  • ダークモードに対応させたい
- before after
Vue.js 2.6.11 3.0.0-0
UI Framework Onsen UI 2.10.10 Ionic 5.4.0

Onsen UIからIonicに移植するときにやったこと

Vue.jsの場合です

組み替えるのではなく、Ionicでアプリを新規作成してからコンポーネントを置き換える作業を行いました
クイックスタートにある方法でblankのアプリを作成しました

ionicframework.com

コンポーネントは、 v-onsをionに置換するだけでだいたい動いてしまうミラクルが起きました
もちろんv-modelの使い方やレイアウトは崩れるので、微調整をしました

CordovaからCapacitorに移植するときにやったこと

アイコンとスプラッシュスクリーン

  • cordova-res これはCordovaを使っていたときと同様ですね

capacitorjs.com

AdMob

  • @capacitor-community/admob

capacitorのコミュニティの中でプラグインがあるのはいいですね

capacitorjs.com

ここまではかなり簡単だったのですが…

公開に向けてやったこと

iOS

Push通知を切る

アプリをdistributeしたあと、以下のエラーで自動的にリジェクトされました

TMS-90078: Missing Push Notification Entitlement

Push通知が有効になっていないときに発生するエラーでした
私が作成しているアプリではPush通知を利用していないため、以下を参考にPush通知を無効にしました

capacitorjs.com

Android

アプリのバージョン

android/app/build.gradle

  • versionCode
  • versionName

を編集しました

パーミッションの削除

カメラやマイクなどは使用していないので、使用しない権限は削除しました

  • android/app/src/main/AndroidManifest.xml
  • node_modules/@capacitor/android/capacitor/src/main/AndroidManifest.xml

node_modules以下は再度インストールすると戻ってしまうけど仕方なし…

stackoverflow.com

さらに不要なPermissionを削除

アプリをアップロードすると、以下の権限を要求していることがわかりました

com.google.android.c2dm.permission.RECEIVE

かなり無理矢理ですが、capacitor-androidの

  • node_modules/@capacitor/android/capacitor/build.gradle

から、 com.google.firebase:firebase-messaging を dependencies から削除しました

合わせて、 com.google.firebase.* のimportをコメントアウトしました

  • node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/plugin/PushNotifications.java
  • node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/CapacitorFirebaseMessagingService.java

ダークモードにならない

- MainActivity.java

forum.ionicframework.com

ここを参考にonResumeに設定を書き換える処理を追加しました
ただしsetForceDarkはsdk 29からなので、条件式自体を

android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.Q

で囲むようにしました

縦固定

  • android/app/src/main/AndroidManifest.xml

activity に android:screenOrientation="portrait" を追加

感想

IonicとCapacitorを使って、Webアプリをアプリ化するのがとても簡単だと感じました
一方で、実際に公開するとなると、いくつか必要な手順があるので大変でした
Capacitorの特性を理解すれば、かなり使いやすいものだと思います

よかった点

  • スマホアプリ化がとても楽
    Cordovaだとビルドが通るまでが大変な印象でしたが、ビルドが一発で通ったのが驚きでした
  • Cordovaのプラグインをそのまま使える

うーんと思った点

  • アプリ固有の設定はアプリ個別で行う必要がある
  • 使わないパーミッションまで有効になっている

Cordovaはconfig.xmlに書かれたバージョン番号やパーミッションを元にiOSやAndroidのプロジェクトを作成していましたが、 CapacitorはiOSやAndroidのプロジェクトを作成したのち、それぞれのプロジェクトで必要があれば設定を変える必要があります
Capacitorはカメラやマイク、Push通知など一通り揃っているので、「パーミッションを設定しないから動かない！」ということにはなりにくいと思います。そのかわり、アプリによっては知らずのうちに不要なパーミッションを要求する可能性があるので注意が必要だと思います

  • Firebase使ってないので依存関係から削除したい…

おまけ

iPadで縦固定にしたかった

ので、portrait以外を削除してみたのですが、以下のエラーが発生しました

ITMS-90683: Missing Purpose String in Info.plist

iPad Multitasking support requires these orientations: 'UIInterfaceOrientationPortrait,UIInterfaceOrientationPortraitUpsideDown,UIInterfaceOrientationLandscapeLeft,UIInterfaceOrientationLandscapeRight'. Found 'UIInterfaceOrientationPortrait' in bundle

iPadではportrait固定ができないようですね

iOSでも使わない権限のメッセージは消したかった

カメラやマイクにアクセスするときのメッセージがあり、使わないので消したところdistribute後に以下のエラーが発生しました

ITMS-90683: Missing Purpose String in Info.plist

iOSでは権限が必要になったタイミングでメッセージが表示されます
Capacitorのライブラリではマイクやカメラにアクセスするようなコードがあるにも関わらず、メッセージが無いことでエラーになったようです
消したメッセージを元に戻してdistributeし直しました

iOSでバンドルサイズが大きい？

archiveしたあとのサイズが、

  • Cordova: 32.4MB
  • Capacitor: 372.8MB

と、かなり巨大になっていました
これはIssueにあるとおり実際のipaのファイルサイズとは異なるため、一概に増えたとは言えないようです
※ CordovaでビルドしたときとXCodeのバージョンが異なります
※ リリース後、App Storeで確認すると18.4MB → 21MBとなっていました

github.com