Ionic Launch Event. September 28th 2021.

DocsプラグインCLI

Ionic Framework での Capacitor の使用

インストール

Capacitor は、新規または既存の Ionic アプリに直接インストールすることができます。

新規 Ionic プロジェクト

新規の Ionic アプリには、デフォルトで Capacitor がインストールされています。新規にプロジェクトを立ち上げるだけです。

ionic start

初めての Ionic/Capacitor アプリを作るためのチュートリアルをご希望の方は、 このチュートリアル をご覧ください。

既存の Ionic プロジェクト

アプリ名とバンドル ID で Capacitor をインストールして初期化します:

ionic integrations enable capacitor

Ionic Framework makes use of the APIs in the following plugins:

For the best user experience, you should make sure these plugins are installed even if you don’t import them in your app:

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

If your Ionic app uses Cordova, you will want to read the Migrating from Cordova to Capacitor guide as well.

プラットフォームの追加

Capacitor のインストールが完了したら、アプリにネイティブプラットフォームを追加します。

ionic capacitor add

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

ワークフロー

Ionic アプリの構築

Capacitor の JavaScript ライブラリはアプリにバンドルされていますので、Web アセットのビルドは Capacitor をインストールした後と変わりません。

ionic build

これにより、Capacitor がネイティブプロジェクトにコピーする Web アセットディレクトリが作成されます。これは、Capacitor の設定webDirで設定します。

Ionic CLI の Capacitor コマンド

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

詳しく Capacitor の開発ワークフローを学ぶ ›

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