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

Ionic で Capacitor を使う

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

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

Ionic プロジェクト新規作成

ionic start myApp tabs --capacitor
cd myApp

既存の Ionic プロジェクト

cd myApp
ionic integrations enable capacitor

Capacitor の初期化

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

npx cap init [appName] [appId]

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

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

Ionic アプリのビルド

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

ionic build

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

プラットフォームの追加

npx cap add ios
npx cap add android

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

IDE を開いて構築、実行、デプロイを行う

npx cap open ios
npx cap open android

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

アプリを Capacitor と同期する

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

npx cap copy

Cordova と Ionic Native Plugin を使う

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

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

Previous
<- インストール
Next
開発ワークフロー ->
Contribute ->