メインコンテンツまでスキップ
Version: v4

IonicフレームワークでCapacitorを使用する

Capacitorは、Ionic CLIを使用して、新規または既存のIonicアプリに直接すばやくインストールできます。

新しいIonicプロジェクトにCapacitorをインストールする

新しいIonicプロジェクトでは、Capacitorはすでにデフォルトで新しいIonicアプリにインストールされています! 新しいプロジェクトを立ち上げるだけです。新しいIonicプロジェクトを作成するには、以下のコマンドを実行します。

ionic start

CapacitorベースのIonicアプリを初めて構築するためのチュートリアルが必要な場合は、Ionic Frameworkチームによる このチュートリアル をチェックしてください。

既存のIonicプロジェクトへのCapacitorのインストール

Capacitorが有効になっていない既存のIonicプロジェクトがある場合、以下のコマンドを実行することでCapacitorを有効にすることができます。

ionic integrations enable capacitor

Capacitorプラグインの依存関係のインストール

Ionic Frameworkは、以下のCapacitorプラグインのAPIを利用します。

最高のユーザーエクスペリエンスを得るために、アプリにインポートしない場合でも、これらのプラグインがインストールされていることを確認する必要があります。これらのプラグインをインストールするには、プロジェクトのルートで以下のコマンドを実行してください。

npm i @capacitor/app @capacitor/haptics @capacitor/keyboard @capacitor/status-bar

プラットフォームの追加

Capacitorのインストールとプラグインのインストールが完了したら、アプリにモバイルプラットフォームを追加します。

ionic capacitor add android
ionic capacitor add ios

これで、プロジェクトのルートにネイティブプラットフォーム用の新しいディレクトリが作成されます。このディレクトリはネイティブプロジェクトであり、ソースアーティファクトとみなされるべきものです。 ネイティブプロジェクトマネジメント について詳しくはこちら。

info

IonicアプリでCordovaを使用している場合、CordovaからCapacitorへの移行の方法についてもご案内しています。

Ionic CLI Capacitor Commands

Ionic CLIには、Capacitor CLIをラップして便利に使える様々なハイレベルコマンドがあります。以下のそれぞれのドキュメントを参照してください。また、各コマンドの後に--helpフラグを使用することで、ヘルプ出力も可能です。

Ionic CLIの詳細、およびCapacitorとの併用方法については、ドキュメントこちらを参照してください。