See how Capacitor fits into the entire Ionic Ecosystem ->

WebアプリのCordovaからCapacitorへのマイグレーション

Cordovaを使用してWebアプリケーションを完全にCapacitorに移行するには、いくつかの手順が必要です。

これらの変更を適用する場合は、別のコードブランチで作業することをお勧めします。

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.jsonwebDirにおいて使用するように自動的に設定されたwwwフォルダーが実際に存在するようになります。

Platformsの追加

CapacitorのNativeプラットフォームは、その最上位フォルダにあります。Cordovaの場合は、platforms/ios もしくは platforms/android でした。

npx cap add ios
npx cap add android

プロジェクトのルートにあるandroidフォルダとiosフォルダの両方が作成されます。これらは完全に独立したNativeプロジェクトの成果物であり、アプリの一部と見なす必要があります(つまり、それらをソース管理にチェックインしたり、独自のIDEで編集したりするなど)。さらに、以前に npm installpackage.jsondependenciesの下にあります)でプロジェクトに追加された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 pluginscommunity plugins をすべて確認します。Cordovaと同等のCapacitorプラグインに切り替えることができます。

一部のプラグインは機能は完全には一致しませんが、必要な機能は実装されている場合があります。

Note: 既知の非互換プラグイン は自動的にスキップされます

Cordova Pluginの削除

CordovaプラグインをCapacitorプラグインに置き換えたあと(もしくは完全に削除することもできます)、プラグインをアンインストールし、 sync コマンドを実行してNativeプロジェクトからプラグインコードを削除します。

npm uninstall cordova-plugin-name
npx cap sync [android | ios]

Permissionsの設定

デフォルトでは、最新バージョンのCapacitorに要求された初期設定の権限が、iOSとAndroidの両方のデフォルトNativeプロジェクトに設定されます。ただし、 plugin.xml でマッピングすることによって、追加のアクセス権を手動で適用する必要がある場合があります。この設定は、iOSとAndroidでは必須です。各プラットフォームの設定方法については、 iOS および Android の設定ガイドを参照してください。

Cordova Plugin preferences

npx cap init が実行されると、コンデンサは config.xml のすべてのプリファレンスを読み込みます。これらを capacitor.config.json に移植します。手動で cordova.preferences に環境設定を追加することもできます。

{
  "cordova": {
    "preferences": {
      "DisableDeploy": "true",
      "CameraUsesGeolocation": "true"
    }
  }
}

Config.xml フィールドの追加

あなたは 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を設定するには?」と考えるべきです。

Scheme の設定

CordovaでIonicを使用すると、アプリはデフォルトで cordova-plugin-ionic-webview を使用し、iOSではコンテンツの提供に ionic:// schemeを使用します。CapacitorアプリはiOSのデフォルトスキームとして capacitor:// を使用しています。これはLocalStorageのようなオリジンバインドされたWeb APIを使用すると、起点が異なるためデータが失われることを意味します。これは、コンテンツの提供に使用するスキームを変更することで修正できます。

{
  "server": {
    "iosScheme": "ionic"
  }
}

Cordova の削除

すべてのマイグレーション変更が適用され、アプリケーションが正常に動作することをテストしたら、Cordovaをプロジェクトから削除できます。config.xmlを削除します。platforms フォルダと plugins フォルダも同様です。CordovaはCapacitorと一緒に動作するので、技術的に取り外す必要はないことに注意してください。実際、Cordovaプラグインの使用を継続する予定がある場合、または将来的に使用する可能性がある場合は、Cordovaアセットをそのまま使用できます。

次のステップ

これは、Capacitorの旅の始まりにすぎません。より学ぶには、Capacitorプロジェクトでの using Cordova pluginsか、より詳しくは development workflow をご覧ください。

Contributors

BackNext