See how Capacitor fits into the entire Ionic Ecosystem ->
Capacitor is part of the 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からの移行を容易にしてください。

Cordova vs Capacitor
Article
capacitorcordovacomparison

Cordova vs Capacitor

For developers and teams evaluating new approaches to app development, this guide provides an overview of Capacitor and how it stacks up against Cordova as the preferred foundation for hybrid mobile apps.

Capacitor 2.0: Mobile apps & PWAs from one codebase
Webinar
capacitornativePWAs

Capacitor 2.0: Mobile apps & PWAs from one codebase

The next evolution in mobile development is here. Build stunning app experiences that run on any platform.

PhoneGap Build Migration Guide
Blog
cordovadevopsappflow

PhoneGap Build Migration Guide

Check out our new guide covering how to transfer your PhoneGap Build-based application to Appflow, a mobile DevOps service from the Ionic team that works across any Cordova, Capacitor, or Ionic app.

Thanks to Capacitor, I’ve fallen in love with mobile development again
Blog
capacitorcordovanative

Thanks to Capacitor, I’ve fallen in love with mobile development again

Thanks to Capacitor, I’ve fallen in love with mobile development again

The Modern Hybrid App Developer
Blog
capacitormobilenative

The Modern Hybrid App Developer

Modern hybrid app development is nothing like it used to be