メインコンテンツへスキップ

Capacitor アプリ開発におけるAIエージェントの活用法

Capacitor アプリ開発でAIエージェントを活用:Capacitor スキルをインストールし、Capgo MCPサーバーを接続して、プラグイン追加、デバッグ、ビルド、リリースをエージェントに任せましょう。

Capgo バナー: AIコーディングエージェントを使ってCapacitorアプリを構築・リリースするガイド

To use AI agents in Capacitor app development, give the agent two things it lacks by default: procedural knowledge of Capacitor’s native side, through installable スキル、ライブツール、を通じて MCPサーバー によるライブツール、そして実行可能なCLIです。CapgoのオープンソースCapacitorスキルとCapgo MCPサーバーを使えば、Claude Code、Codex、Cursorなどのエージェントが、適切なネイティブ設定でプラグインを追加し、iOS/Androidビルドをデバッグし、クラウドビルドをリクエストし、ライブアップデートをアップロードできます。

本ガイドでは、汎用エージェントがCapacitorで失敗する理由、数コマンドでスキルとMCPを設定する方法、アプリライフサイクル各段階のプロンプト、そして安全性を確保するガードレールについて説明します。

汎用エージェントがCapacitorで苦戦する理由

エージェントはWebcodeでは強力です。Capacitorプロジェクトには、毎年変化するもう半分の要素が加わります:

  • バージョンドリフト。 Capacitor 8 では Android の SDK レベルが変わり、新しい iOS プロジェクトでは Swift Package Manager がデフォルトになり、App Store へのアップロードには Xcode 26 が必要です。学習データには Capacitor 3〜8 のアドバイスが混在しています。
  • ファイルにまたがるネイティブ設定。 1つのプラグインで必要なものは、 Info.plist キー、entitlements、 AndroidManifest.xml 権限、Gradle の変更、そして cap syncAgent は JavaScript 部分しか対応しないことが多いです。
  • プラグイン選び。 多くのコミュニティプラグインはメンテナンスされていません。Agent は Capacitor 8 で動くものを選ぶのではなく、よく見かけたものを選んでしまいます。
  • 目に見えない失敗。 エラーはエディタではなく、Xcode、Logcat、CI ログに出ます。

これを解決するには、Agent が必要に応じて読み込めるコンテキストと、推測ではなく呼び出せるツールが必要です。

ツールキット:スキル、MCP、そして CLI

レイヤー エージェントに提供されるもの Capgo オプション
スキル 特定のタスク向けのステップバイステップ手順 Capacitor スキル (オープンソース、Cap-go/capgo-skills)
ホスト型 MCP アカウント操作(アプリ、チャネル、ロールアウト、デバイス、統計、ビルド)とドキュメント検索 https://api.capgo.app/mcp (OAuth または API キー)
CLI MCP ローカルファイルが必要な操作:バンドルアップロード、ネイティブビルドリクエスト bunx @capgo/cli@latest mcp
CLI シェルコマンドと同じアクション、レビューも容易 bunx @capgo/cli@latest ...

スキルをインストール

bunx skills add Cap-go/capgo-skills

インストーラーは対応するエージェントを検出し、各エージェントがスキルを探す所定の場所に配置します。このセットには、プラグインの選択、ベストプラクティス、Capacitor アプリおよびプラグインのメジャーアップグレード(v7からv8への移行を含む)、CocoaPodsからSPMへの移行、デバッグ、iOSおよびAndroidのログ、プッシュ通知、ディープリンク、セーフエリア、セキュリティスキャン、テスト、CI/CD、App Storeの事前チェック、CordovaおよびWebアプリの移行、Capgo ライブアップデート、Capgo ネイティブビルドが含まれます。 スキルページ すべてのスキルをリストアップします。

Claude Code では、プラグインマーケットプレイスも利用できます:

claude plugin marketplace add Cap-go/capgo-skills
claude plugin install capgo-cloud@capgo-skills

MCP サーバーに接続する

ホスト型サーバーはインストール不要です。Claude Code に追加し、プロンプトが表示されたら OAuth でサインインしてください:

claude mcp add --transport http capgo https://api.capgo.app/mcp

CLI サーバーは stdio 経由でローカルで動作し、Capgo のログインを使用するため、先にログインしてください:

bunx @capgo/cli@latest login
claude mcp add capgo -- bunx @capgo/cli@latest mcp

JSON 設定を使用するエディタ(Cursor、Windsurf、Claude Desktop)の場合は、以下のようになります:

{
  "mcpServers": {
    "capgo": {
      "command": "bunx",
      "args": ["@capgo/cli@latest", "mcp"]
    }
  }
}

CLI MCP は次のようなツールを提供します: capgo_upload_bundle, capgo_list_channels, capgo_update_channel, capgo_check_compatibility, capgo_request_build, capgo_doctorや capgo_get_stats。完全なリストは CLI MCP リファレンス、および MCP ページ いつどのサーバーを使うべきかを説明します。

Capacitor ライフサイクル全体でのエージェント活用

プロンプト内でスキル名を指定してください。これにより、エージェントは即興対応ではなく、適切な手順を読み込みます。

1. Web アプリを Capacitor アプリに変換する

Use the webapp-to-capacitor skill to add Capacitor 8 with iOS and Android
to this Vite + React app. Keep the existing build output folder.

インストール @capacitor/core と CLI を設定し、 webDirプラットフォームを追加し、最初の同期を実行します。既存の Cordova プロジェクトには、 cordova-to-capacitor。Next.js、Nuxt、または同様のフレームワークでは、 framework-to-capacitorを使用し、静的エクスポート設定を処理します。

2. 適切なプラグインでネイティブ機能を追加

Use the capacitor-plugins skill to add biometric login.
Pick a plugin that supports Capacitor 8, configure iOS and Android,
and show me the usage code.

このスキルは公式の @capacitor/* パッケージと Capgo プラグインディレクトリを把握しているため、エージェントはメンテナンスされているプラグインを選び、 Info.plist 使用目的の文字列、Android の権限、同期ステップを追加します。プルリクエストと同様に diff をレビューしてください。

3. 実際のログでデバッグ

Use the ios-android-logs skill to capture Logcat while I reproduce the crash
on the connected Android device, then use debugging-capacitor to find the cause.

ログスキルはエージェントに正確な adb Xcode コマンドを提供し、デバイスログをストリームしてフィルタできるようにします。これにより、ソースから推測するのではなく、実際のスタックトレースを読み取れます。

4. Capacitor をアップグレードし、SPM に移行

Use the capacitor-app-upgrade-v7-to-v8 skill to upgrade this app.
Stop and show me the plan before changing native files.

その後、iOS プロジェクトがまだ CocoaPods を使用している場合:

Use the cocoapods-to-spm skill to move the iOS project to Swift Package Manager.

まず計画を立ててから進めるのは、 ios/ または android/に関わる変更では良い習慣です。同じ作業の手動版については、 Capacitor 8 アップグレードガイド および SPM 移行ガイド.

5. セキュリティとストア公開の準備を確認

Use the capacitor-security skill to scan this project and fix high severity issues.
Then run the capacitor-apple-review-preflight skill before I submit.

事前チェックで、使用目的文字列の欠落、プライバシーマニフェストの不足、Sign in with Apple の要件、メタデータの問題といった一般的な拒否理由を検出します。

6. クラウドで iOS と Android をビルド

署名資格情報はエージェント経由ではなく、一度だけ自分で保存してください:

bunx @capgo/cli@latest build credentials save --platform ios \
  --certificate ./cert.p12 --p12-password "..." \
  --ios-provisioning-profile ./profile.mobileprovision \
  --apple-key ./AuthKey.p8 --apple-key-id "KEY_ID" \
  --apple-issuer-id "ISSUER_ID" --apple-team-id "TEAM_ID"

資格情報はローカルに保存されます ~/.capgo-credentials/credentials.json (または .capgo-credentials.json を使用して --local、git-ignore すべきもの)はビルドに送信され、ビルド完了後に Capgo から削除されます。その後、エージェントは自分で作業を進められます:

Use the capgo-native-builds skill to request an iOS release build from the
current working directory, then read the logs and fix any build error.

これは以下に対応します:

bunx @capgo/cli@latest build request com.example.app --platform ios --path .

理由は、 --path . 作業ツリーをアップロードすることで、エージェントは Windows や Linux から iOS のビルドエラーを試行錯誤して修正でき、推測の修正をコミットせずに済みます。詳細は Capgo のビルド。まず証明書が必要な場合は、 iOS証明書ジェネレーター が役立ちます。

7. ホットフィックスを live update としてリリースする

Use the capgo-live-updates skill to build the web app and upload it to the
beta channel. Check native compatibility first.

エージェントはビルドを実行し、次に:

bunx @capgo/cli@latest bundle upload --channel=beta

互換性チェックはネイティブ依存関係とデバイスにインストールされているものを比較するため、エージェントはストアビルドにないネイティブプラグインが必要なバンドルをプッシュしません。ベータでテストした後、本番環境にプロモートしてください。 Capgo のライブアップデートの仕組み.

エージェントの作業を安全に保つガードレール

  • ネイティブ変更の前に計画を立てる。 以下のものについては、計画と差分を要求してください ios/ と android/.
  • シークレットを会話から除外する。 ビルド認証情報と API キーは自分で管理し、認証情報ファイルは git-ignore に追加し、プロンプトにキーを貼り付けないでください。
  • チャネルをセーフティネットとして活用する。 エージェントにベータまたは内部チャネルへのアップロードをさせます。本番環境へのプロモートは自分で行います。
  • ロールバックに頼る。 Capgo は、新しいバンドルの起動に失敗した場合、デバイスが最後に正常に動作したバンドルにロールバックするため、不良なアップロードによる被害を最小限に抑えます。
  • レビュー可能なコマンドを優先する。 上記の CLI コマンドは、エージェントのログで読みやすいです。MCP ツールが何をしたか不明な場合は、エージェントに等価な CLI コマンドを表示させるようにしてください。
  • ストアへの提出は人間が行う。 エージェントはビルドやメタデータの準備はできますが、レビューへの提出やレビュアーへの回答は人間が行うべきです。

トラブルシューティング

エージェントがスキルを無視している。 プロンプトで明示的に指定し、そのエージェント用にインストールされていることを確認してください(再実行 bunx skills add Cap-go/capgo-skills).

MCP ツールが不足している。 CLI サーバーについては、 bunx @capgo/cli@latest login がエージェントが実行する同じ環境で成功したことを確認してください。サーバーを追加した後は、エージェントを再起動してください。

エージェントが古い Capacitor API を提案している。 Capacitor のバージョンを伝え、ホストされた MCP を使ってドキュメントを検索させましょう。 capgo_search_docs ツール。

Cloud build が署名で失敗しました。 認証情報が欠落しているか、provisioning profile が bundle ID と一致していません。認証情報を再保存して、build リクエストを再実行してください。

互換性がないため、upload が拒否されました。 bundle にネイティブの変更が必要です。まずストア向け build をリリースし、その後 live update を適用してください。

まとめ

AIエージェントは、推測に頼らなくなって初めて Capacitor で役立ちます。正しい手順に従うよう Capacitor スキルをインストールし、ドキュメント用の公開 Capgo MCP とアカウント操作用の CLI MCP を接続。さらに、ネイティブ変更、シークレット、本番チャネルにはガードレールを設けましょう。アプリ自体にAI機能を組み込む方法については、こちらをご覧ください: なぜ Capacitor はAIモバイルアプリに適しているのか.

Capacitor アプリ向けの Live Updates

Web レイヤーのバグが本番で発生したら、App Store の審査を何日も待たずに Capgo で修正を配信しましょう。ネイティブの変更は通常の審査フローに残したまま、ユーザーはバックグラウンドでアップデートを受け取れます。

最新のブログ記事

Capgoは、真にプロフェッショナルなモバイルアプリを作るために必要な最高のインサイトを提供します。