Cordova を使用して Web アプリケーションを完全に Capacitor に移行するには、いくつかの手順が必要です。
Note これらの変更を適用する場合は、別のコードブランチで作業することをお勧めします。
まず、プロジェクトをターミナルで開き、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
フォルダにあります。cordova-res
ルールを使って、生成したアイコンとスプラッシュ画像を各 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="https://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 を設定するにはどうやったらいい?”に関する質問のほとんどは、オンラインで答えを探すときには「[プラットフォーム] (iOS/Android)で 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 をご覧ください。