以下のようなモチベーションで、自作アプリを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のアプリを作成しました
コンポーネントは、 v-onsをionに置換するだけでだいたい動いてしまうミラクルが起きました
もちろんv-modelの使い方やレイアウトは崩れるので、微調整をしました
CordovaからCapacitorに移植するときにやったこと
アイコンとスプラッシュスクリーン
cordova-resこれはCordovaを使っていたときと同様ですね
AdMob
@capacitor-community/admob
capacitorのコミュニティの中でプラグインがあるのはいいですね
ここまではかなり簡単だったのですが…
公開に向けてやったこと
iOS
Push通知を切る
アプリをdistributeしたあと、以下のエラーで自動的にリジェクトされました
TMS-90078: Missing Push Notification Entitlement
Push通知が有効になっていないときに発生するエラーでした
私が作成しているアプリではPush通知を利用していないため、以下を参考にPush通知を無効にしました
Android
アプリのバージョン
android/app/build.gradle
- versionCode
- versionName
を編集しました
パーミッションの削除
カメラやマイクなどは使用していないので、使用しない権限は削除しました
android/app/src/main/AndroidManifest.xmlnode_modules/@capacitor/android/capacitor/src/main/AndroidManifest.xml
node_modules以下は再度インストールすると戻ってしまうけど仕方なし…
さらに不要な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.javanode_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/CapacitorFirebaseMessagingService.java
ダークモードにならない
- MainActivity.java
ここを参考に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は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となっていました
