WebアプリのCordovaからCapacitorへのマイグレーション
Cordovaを使用してWebアプリケーションを完全にCapacitorに移行するには、いくつかの手順が必要です。
これらの変更を適用する場合は、別のコードブランチで作業することをお勧めします。
まず、プロジェクトをターミナルで開き、Webアプリ か Ionicアプリ の方法でCapacitorを追加します。
次に、config.xmlを開いて、widgetエレメントにあるidを見つけます。例えば、 io.ionic.myapp です。
<widget id="io.ionic.myapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">またあなたのアプリの Name を見つけます:
<name>MyApp</name>Capacitorのインストールの時に、あなたのアプリの情報を入力します:
npx cap init [appName] [appId]例えば、これは npx cap init MyApp io.ionic.myapp のようになります。これらの値は新しく作成される
capacitor.config.json に反映されます。
Nativeプラットフォームを追加する前に、Webプロジェクトを少なくとも1回構築する必要があります。
これにより、Capacitorが、capacitor.config.jsonのwebDirにおいて使用するように自動的に設定されたwwwフォルダーが実際に存在するようになります。
CapacitorのNativeプラットフォームは、その最上位フォルダにあります。Cordovaの場合は、platforms/ios もしくは
platforms/android でした。
npx cap add ios
npx cap add androidプロジェクトのルートにあるandroidフォルダとiosフォルダの両方が作成されます。これらは完全に独立したNativeプロジェクトの成果物であり、アプリの一部と見なす必要があります（つまり、それらをソース管理にチェックインしたり、独自のIDEで編集したりするなど）。さらに、以前に
npm install（package.jsonの
dependenciesの下にあります）でプロジェクトに追加されたCordovaプラグインは、Capacitorによってそれぞれの新しいNativeプロジェクトに自動的にインストールされます（incompatible onesは除きます）：
"dependencies": {
"@ionic-native/camera": "^5.3.0",
"@ionic-native/core": "^5.3.0",
"@ionic-native/file": "^5.3.0",
"cordova-android": "8.0.0",
"cordova-ios": "5.0.0",
"cordova-plugin-camera": "4.0.3",
"cordova-plugin-file": "6.0.1",
}
アイコンとスプラッシュ画像を以前に作成したことがある場合は、プロジェクトの最上位レベルのresourcesフォルダにあります。このガイドに従ってに従って、これらを各Nativeプロジェクトに移動します。
まず、 cordova-res をインストールください:
$ npm install -g cordova-res次に次のコマンドで画像を生成してNativeプロジェクトにコピーしてください:
$ cordova-res ios --skip-config --copy
$ cordova-res android --skip-config --copy
まず、既存のCordovaプラグインを監査します - 不要になったプラグインを削除できる場合があります。
次に、Capacitorの core plugins と community plugins をすべて確認します。Cordovaと同等のCapacitorプラグインに切り替えることができます。
一部のプラグインは機能は完全には一致しませんが、必要な機能は実装されている場合があります。
Note: 既知の非互換プラグイン は自動的にスキップされます
CordovaプラグインをCapacitorプラグインに置き換えたあと(もしくは完全に削除することもできます)、プラグインをアンインストールし、
sync コマンドを実行してNativeプロジェクトからプラグインコードを削除します。
npm uninstall cordova-plugin-name
npx cap sync [android | ios]
デフォルトでは、最新バージョンのCapacitorに要求された初期設定の権限が、iOSとAndroidの両方のデフォルトNativeプロジェクトに設定されます。ただし、
plugin.xml でマッピングすることによって、追加のアクセス権を手動で適用する必要がある場合があります。この設定は、iOSとAndroidでは必須です。各プラットフォームの設定方法については、
iOS および
Android の設定ガイドを参照してください。
npx cap init が実行されると、コンデンサは config.xml のすべてのプリファレンスを読み込みます。これらを
capacitor.config.json に移植します。手動で cordova.preferences に環境設定を追加することもできます。
{
"cordova": {
"preferences": {
"DisableDeploy": "true",
"CameraUsesGeolocation": "true"
}
}
}
あなたは config.xml の他の要素がCapacitorアプリではどのように動作するか気になるかもしれません。
Author要素はpackage.json で設定できます。ただし、Capacitorやアプリケーション内では使用されません:
<author email="email@test.com" href="http://ionicframework.com/">Ionic Framework Team</author>allow-intent値のほとんどは使用されませんが、Capacitorに構成可能な代替手段の設定があります。
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />iOS のedit-config 要素は configured in Info.plist を必要とします。
<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
<string>Used to take photos</string>
</edit-config>すべてのconfig.xmlの要素をカバーするのは不可能です。しかし、"CapacitorでXを設定するにはどうやったらいい？"に関する質問のほとんどは、オンラインで答えを探すときには「プラットフォームでXを設定するには?」と考えるべきです。
CordovaでIonicを使用すると、アプリはデフォルトで cordova-plugin-ionic-webview を使用し、iOSではコンテンツの提供に
ionic:// schemeを使用します。CapacitorアプリはiOSのデフォルトスキームとして capacitor:// を使用しています。これはLocalStorageのようなオリジンバインドされたWeb APIを使用すると、起点が異なるためデータが失われることを意味します。これは、コンテンツの提供に使用するスキームを変更することで修正できます。
{
"server": {
"iosScheme": "ionic"
}
}
すべてのマイグレーション変更が適用され、アプリケーションが正常に動作することをテストしたら、Cordovaをプロジェクトから削除できます。config.xmlを削除します。platforms フォルダと
plugins フォルダも同様です。CordovaはCapacitorと一緒に動作するので、技術的に取り外す必要はないことに注意してください。実際、Cordovaプラグインの使用を継続する予定がある場合、または将来的に使用する可能性がある場合は、Cordovaアセットをそのまま使用できます。
これは、Capacitorの旅の始まりにすぎません。より学ぶには、Capacitorプロジェクトでの using Cordova pluginsか、より詳しくは development workflow をご覧ください。
