See how Capacitor fits into the entire Ionic Ecosystem ->
Capacitor is part of the Ionic Ecosystem ->

Cordova to Capacitor Migration

A modern development experience and 99% backward-compatibility with Cordova.

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プラグインに 切り替えることができる場合があります。

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

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
});
import { Plugins } from '@capacitor/core';

const { Camera } = Plugins;

const photo = await Camera.getPhoto({
  quality: 100,
  resultType: CameraResultType.Uri,
  allowEditing: true,
  saveToGallery: 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の旅を続けよう。

これははじまりにすぎません。続いて、 Cordovaプラグインを Capacitorで使う方法と、Capacitorの 開発フロー や 自分自身の ネイティブプラグイン をつくったりしましょう。

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

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

The latest updates. Delivered monthly.

Capacitor is getting better every day. Sign up for a monthly email on the latest updates, releases, articles, and news!