See how Capacitor fits into the entire Ionic Ecosystem ->

Capacitorへのマイグレーション

Capacitorによるモダンな開発経験とCordovaとの99%の下位互換性

はじめ方
01

新しいブランチを作成します。

推奨ですが、必須ではありません。

cd my-app
git checkout -b cap-migration
02

Capacitorをインストール。

`config.xml` にあるCordovaアプリの名前とIDを使用してCapacitorアプリを作成します。

npm install @capacitor/cli @capacitor/core
npx cap init [name] [id]
03

Webアプリをビルドします。

コンパイルされたWebアセットは、 次のステップでCapacitorの各ネイティブプラットフォームにコピーされます。

# Most web apps
npm run build

# Ionic app
ionic build
04

ターゲットにするネイティブプラットフォームをインストール。

AppleAndroid

Capacitorネイティブプロジェクトは独自の最上位フォルダーに存在し、アプリの一部と見なされます (ソース管理にチェックインします)。 既存のCordovaプラグインは、各ネイティブプロジェクトに自動的にインストールされます。🎉

npx cap add android
npx cap add ios
05

スプラッシュスクリーンとアイコンの再作成。

`cordova-res` ツールを使用して、Cordovaプロジェクトの最上位の `resources` フォルダにある 既存のスプラッシュスクリーン/アイコン画像を再利用します。画像は各ネイティブプロジェクトにコピーされます。

npm install -g cordova-res

cordova-res ios --skip-config --copy
cordova-res android --skip-config --copy
06

既存のCordovaプラグインを監査。

Capacitorのすべてのコアプラグインとコミュニティプラグインを確認します。 カメラなど、Cordovaと同等のCapacitorプラグインに切り替えることができる場合があります。

不要なものを削除して、パフォーマンスを向上させ、アプリのサイズを小さくします。

Cordova Camera
Capacitor Camera
import { Camera } from '@ionic-native/camera/ngx';

constructor(private camera: Camera) {}

const photo = await this.camera.getPicture({
  quality: 100,
  destinationType: this.camera.DestinationType.FILE_URI,
  allowEdit: true,
  saveToPhotoAlbum: true
});
07

プロジェクトからCordovaを削除。

移行テストが成功したら、Cordovaをプロジェクトから削除できます。

# Remove a Cordova plugin
npm uninstall cordova-plugin-name
npx cap sync

# Delete Cordova folders and files
rm config.xml
rm -R platforms/
rm -R plugins/
08

Capacitorの旅を続けよう。

これは序章に過ぎません。CapacitorプロジェクトでのCordovaプラグインの使い方、 Capacitorの開発フロー、 自分自身のネイティブプラグインのつくり方を学びましょう.

# Install a Cordova plugin
npm install cordova-plugin-name
npx cap sync

# Create a custom plugin
npx @capacitor/cli plugin:generate

その他のリソース

これらのリソースを調べて、Capacitorの詳細を学び
Cordovaからの移行を容易にしてください。