Ionic で Capacitor を使う

Ionic プロジェクトに Capacitor をインストール

Ionic プロジェクトに Capacitor をインストールするのはとても簡単です (1.0-4.x+).

ionic start myApp tabs --capacitor
cd myApp

cd myApp
ionic integrations enable capacitor

Note: npx は、グローバルインストールを回避するためにローカルバイナリ/スクリプトを実行する、npm5 以降で使用可能な新しいユーティリティです。

npx cap init [appName] [appId]

appNameはアプリケーションの名前で、appId はアプリケーションのドメイン識別子です(ex:vcom.example.app)。

Note: 初期構成後にこれらのプロパティーを変更するには、NativeIDE を使用します。

Native プラットフォームを追加する前に、少なくとも 1 回は Ionic プロジェクトをビルドする必要があります。

ionic build

これにより、 www フォルダをの Capacitor の webDir として使用するための automatically configured が capacitor.config.json に書き込まれます。

npx cap add ios
npx cap add android

プロジェクトのルートに android フォルダと ios フォルダの両方が作成されます。これらは完全に独立した Native プロジェクトであり、Ionic アプリのソースコードの一部と考えるべきです(つまり、それらをソース制御にチェックインし、独自の IDE で編集するなどです。)。

npx cap open ios
npx cap open android

Native の iOS と Android プロジェクトは、それぞれの標準 IDE(それぞれ Xcode と Android Studio)で開きます。IDE を使用して、アプリケーションを実行およびデプロイします。

ビルド（例えば ionic build ）を実行して Web ディレクトリ(デフォルト: www )を変更するたびに、これらの変更を Native プロジェクトにコピーする必要があります:

npx cap copy

Cordova と Ionic Native プラグインは Capacitor をサポートしています。詳しくは Cordova Plugins ガイドをご覧ください。

すぐに Ionic アプリで Capacitor を使い始めたいですか？このガイドをご覧ください。.