A one day, single-track online event celebrating the future of cross-platform app development

DocsプラグインCLI

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

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

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

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 install package.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フォルダにあります。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 pluginscommunity plugins をすべて確認します。Cordova と同等の Capacitor プラグインに切り替えることができます。

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

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

Cordova Plugin の削除

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

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

Permissions の設定

If the plugin declared the permissions or usage descriptions in the plugin.xml, Capacitor will automatically add them to your AndroidManifest.xml and Info.plist. However, you may need to apply additional permissions or usage descriptions manually by mapping between plugin.xml and required settings on iOS and Android. Consult the iOS and Android configuration guides for info on how to configure each platform.

Cordova Plugin preferences

When npx cap init is run, Capacitor reads all the preferences in config.xml and port them to capacitor.config.json or capacitor.config.ts file. You can manually add more preferences to the cordova.preferences object too.

{
  "cordova": {
    "preferences": {
      "DisableDeploy": "true",
      "CameraUsesGeolocation": "true"
    }
  }
}
const config: CapacitorConfig = {
  cordova: {
    preferences: {
      DisableDeploy: 'false',
      CameraUsesGeolocation: 'true',
    },
  },
};

Additional Config.xml Fields

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

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 をご覧ください。

Previous
<- マイグレーション戦略
Next
Cordova/Ionic Native プラグイン ->
Contribute ->