バージョン: v6

Ionic FrameworkでCapacitorを使う

Capacitorは、アプリを構築するためにIonic Frameworkを必要としません。しかし、開発者は、高品質のアプリを構築するために、Ionic UIコンポーネントの大規模なコレクションを参考にすることができます。

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

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

新しいIonicプロジェクトの場合、Capacitorはデフォルトで新しいIonicアプリにすでにインストールされています！あなたがしなければならないのは、新しいプロジェクトを開始することだけです。新しいIonicプロジェクトを作成するには、次のコマンドを実行します：

ionic start

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

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

ionic integrations enable 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

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

備考

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

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

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