Ionic Launch Event. September 28th 2021.

DocsプラグインCLI

Capacitor ワークフロー

Capacitor のワークフローには、いくつかの一貫したタスクが含まれます:

Web アプリの開発・構築

Capacitor は、ウェブアプリを各プラットフォーム用の Native バイナリに変換します。したがって、作業の大部分はモバイルに特化したウェブアプリの開発と構築となります。

あなたが Native プラットフォームと対話する場合、Capacitor の API(Cameraなど)を使用するか、または既存の Cordova プラグインと Capacitor のCordova Compatibilityを用いることになります。

Web アプリをネイティブデバイスにデプロイするには、まず、Web アセットを出力ディレクトリにビルドする必要があります。正確なコマンドは、お使いの JavaScript フレームワークのドキュメントを参照してください。ほとんどの場合、npm run buildとなります。

プロジェクトの同期

以下のような場合に、Web アプリとネイティブプロジェクトを同期させることがあります。

  • Web アセットをネイティブプロジェクトにコピーする場合
  • ネイティブ IDE でプロジェクトを実行する前
  • 新しい Capacitor プラグインをインストールした後
  • プロジェクトを clone した後
  • ネイティブプロジェクトを Capacitor 用に設定または再設定するとき
  • Gradle や CocoaPods などを使ってネイティブの依存関係をインストールするとき

プロジェクトを同期するには、以下を実行します:

npx cap sync

Web アセットのディレクトリが見つからないというエラーが出る場合は、Capacitor configurationwebDir を設定する必要があるかもしれません。

sync について詳しく学ぶ ›

プロジェクトの実行

プロジェクトをネイティブデバイスにデプロイするには、ユースケースに応じていくつかの方法があります。最も一般的なのは、コマンドラインで npx cap run を使う方法です。

iOS でのアプリの実行を学ぶ ›

Android でのアプリの実行を学ぶ ›

プロジェクトをビルドする

npm run buildで Web アセットをビルドし、npx cap syncでネイティブプロジェクトにコピーしたら、ネイティブバイナリをビルドする準備が整います。

Capacitor には “build” コマンドはありません。 sync の後は、ネイティブアプリをビルドするために、ターゲットプラットフォームの IDE を開くことをお勧めします。

コマンドラインや CI 環境でアプリをビルドするには、ターゲットプラットフォームのツールを使うことが推奨されます。Android には Gradle、iOS には xcodebuild があります。 Fastlaneのようなサードパーティのツールを使うと、より簡単に構築できるでしょう。Appflowを使えば、クラウドビルドなども可能です。

Capacitor のリリースプロセスについては、 iOSAndroid のパブリッシングガイドをご覧ください。

Native IDE を開く

以下のような状況では、Native IDE(Xcode や Android Studio など)でプロジェクトを開きたい場合があります:

  • ネイティブデバイス上で IDE を使ってプロジェクトを実行したい場合
  • ネイティブの Java/Kotlin や Swift/Objective-C のコードをデバッグしたいとき
  • アプリのネイティブ側で作業したいとき
  • App Store 用のリリースビルドをコンパイルするとき

Xcode でのアプリの開き方を学ぶ ›

Android Studio でのアプリの開き方を学ぶ ›

Capacitor のアップデート

Capacitor の Core と CLI をアップデートするには、以下の手順で行います:

npm install @capacitor/cli
npm install @capacitor/core

使用しているプラットフォームの一部または全部をアップデートするには、以下のようにします:

npm install @capacitor/ios
npm install @capacitor/android

Capacitor repoを購読すると、新しいリリースの通知を受けることができます。リポジトリのインデックスの上部にある Watch -> Releases only をクリックします。

Hooks

Need to tie into the capacitor cli command events? Check out the hooks here.

Previous
<- Ionic フレームワークとの連携
Next
プラグインを使う ->
Contribute ->