Capacitorのワークフロー
Capacitorでの作業は、従来のWebアプリでの作業とは少し異なります。WebネイティブのCapacitorアプリケーションを作るには、以下のステップを踏む必要があります。
ウェブコードの構築
モバイルデバイス上でWebアプリをテストする準備ができたら、配布用のWebアプリをビルドする必要があります。 Create React App や Vite のようなツールを使用している場合、コマンドは npm build となります。一方 Angular のようなツールは ng build というコマンドを使用します。どのようなコマンドであれ、Capacitorで使用するためには、配布用のウェブコードをビルドする必要があります。
ウェブコードをCapacitorプロジェクトに同期させる
Web コードを配布用にビルドしたら、Web ネイティブの Capacitor アプリケーションに Web コードをプッシュする必要があります。これを行うには、Capacitor CLI を使ってウェブコードを「同期」させ、必要なネイティブ依存関係をインストール/更新します。
プロジェクトを同期させるには、以下を実行します。
npx cap sync
npx cap sync`を実行すると、すでにビルドされているWebバンドルがAndroidとiOSの両方のプロジェクトにコピーされ、Capacitorが使用するネイティブ依存関係も更新されます。
sync については ドキュメント を、その他については Capacitor CLI reference のドキュメントを参照してください。
"not being able to find the web assets directory?" というエラーが発生しましたか？ Capacitorの設定ファイルを更新して、適切な webDir を使用するようにしてください。
Capacitorアプリのテスト
Web バンドルとネイティブプロジェクトの同期が完了したら、今度はモバイルデバイス上でアプリケーションをテストしてみましょう。これを行うにはいくつかの方法がありますが、最も簡単な方法はCapacitorに組み込まれたCLIコマンドを使用することです。
iOS デバイスで Capacitor アプリのデバッグビルドを実行するには、次のようにします。
npx cap run ios
同様に、Android デバイスで Capacitor アプリのデバッグビルドを実行するには、以下を実行します。
npx cap run android
アプリケーションを繰り返しテストしたら、今度は他のモバイルデバイスに配布するための最終的なバイナリをコンパイルします。
また、iOS上でXcodeを使ってアプリを実行する、Android上でAndroid Studioを使ってアプリを実行する ことも可能です。どちらの方法も開発には有効です。どちらのオプションを選ぶか、試してみてください。
ネイティブIDEを開く
ネイティブプロジェクトをもっとコントロールしたい場合は、Capacitor CLIを使用してネイティブIDEを素早く開くことができます。
iOS Capacitor .xcworkspace プロジェクトをXcodeで開く ためには、以下のコマンドを実行します。
npx cap open ios
同様に、Android Capacitor プロジェクトを Android Studio で開く には、以下のように実行します。
npx cap open android
ネイティブプロジェクトを開くと、アプリケーションのネイティブランタイムを完全に制御することができます。 プラグインの作成、 カスタムネイティブコードの追加 、アプリケーションのコンパイル でリリースすることが可能です。
ネイティブバイナリのコンパイル
sync のあと、ターゲット・プラットフォームのIDEを開くことをお勧めします： iOSの場合はXcode、Androidの場合はAndroid Studioを開き、ネイティブアプリをコンパイルします。
また、ターミナルやCI環境でアプリをコンパイルするには、cap build command を使ってネイティブプロジェクトをビルドし、デバイスやエンドユーザーに配布できる署名済みのAAB、APK、またはIPAファイルを出力することもできます。
npx cap build android
また、これらのプロセスを自動化するために、Fastlane や Appflow のようなクラウドビルドツールを使用することをお勧めします。アプリケーションはそれぞれ異なりますが、Capacitorプロジェクトの一般的なリリースプロセスの例があります。 iOS と Android のパブリッシングガイドを読んで、Apple App StoreやGoogle Play Storeへのデプロイ方法の詳細を確認してください。
Capacitorのアップデート
Capacitorランタイムのアップデートは、npm installを実行するのと同じくらい簡単です。
npm i @capacitor/core @capacitor/ios @capacitor/android
npm i -D @capacitor/cli
Capacitorをアップデートする際、Core、Android、iOSのライブラリがすべて同じバージョンであることを確認したい。CapacitorのCore、Android、iOSのリリースはすべて同時にアップロードされます。つまり、すべてのライブラリを同時にインストールすれば問題ないのです。
Capacitor repo を購読することで、新しいリリースのお知らせを受け取ることができます。リポジトリインデックスの上部にある Watch -> Releases only をクリックしてください。