Ionic Meetup
#19 Tokyo

最新の情報を手に入れよう。2022/05/29(日)、東京開催。

Ionic Framework での Capacitor の使用

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

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

ionic start

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

アプリ名とバンドル 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

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

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

ionic build

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

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