mcpField
C
capacitor-app-creation

capacitor-app-creation

github.com/capawesome-team開発521.0k 回インストール1 週間前に更新
リポジトリ

capacitor-app-creation について

Capacitor アプリを一から作成する開発者向けのガイドです。Web フレームワークの選択、Capacitor の設定、ネイティブプラットフォームの追加から、ビルドや実行まで段階的に案内します。

主な機能

  1. 01アプリ作成の段階的なガイド
  2. 02Angular、React、Vue、素の構成に対応
  3. 03Capacitor の初期化と設定
  4. 04Android と iOS の追加
  5. 05ビルド、同期、実行の手順

活用シーン

  1. 01選んだ Web フレームワークで Capacitor アプリを開始
  2. 02既存の Web アプリにネイティブプラットフォームを追加
  3. 03設定や同期で起きる一般的な問題の調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/capawesome-team/skills --skill capacitor-app-creation

インストール後、Claude Code で/capacitor-app-creationを入力して読み込まれたか確認します。

詳細

Capacitor アプリの作成

プロジェクトのスキャフォールディング、プラットフォームのセットアップ、任意のインテグレーションを含め、Capacitor アプリをゼロから作成します。

前提条件

  1. Node.js 22+ がインストールされていること。node --version で確認してください。
  2. iOS の場合：Xcode 26.0+ がインストールされた macOS。Xcode Command Line Tools をインストールしてください：xcode-select --install。
  3. Android の場合：Android SDK（API 24+）を備えた Android Studio 2025.2.1+ がインストールされていること。

エージェントの動作

  • 手順を段階的に案内します。 ユーザーを一度に一つずつ手順に沿って案内します。関係のない複数の質問を一度に提示しないでください。
  • 一度に一つの判断を求めます。 手順でユーザーの入力が必要な場合は、その質問だけをして、回答を待ってから続けてください。
  • 選択肢を明確に提示します。 自由回答式ではなく、具体的な選択肢（例：「iOS プラットフォームを追加しますか？（はい／いいえ）」）を提示してください。

手順

ステップ 1：Ionic Framework の確認

アプリを作成する前に、ユーザーに次の質問をします。

UI コンポーネントとテーマ設定に Ionic Framework を使用しますか？（はい／いいえ）

ユーザーがはいと答えた場合は、このスキルを終了し、ionic-app-creation スキルに切り替えてください。いいえの場合は、ステップ 2 に進みます。

ステップ 2：Web アプリの作成

使用する Web フレームワークをユーザーに尋ねます。次の選択肢を提示してください。

  1. Angular
  2. React
  3. Vue
  4. なし（バニラ JS/TS または既存の Web アプリ）

選択に応じて、Web プロジェクトをスキャフォールディングします。

Angular
npm install -g @angular/cli
ng new my-app
cd my-app

Angular のデフォルトの Web アセットディレクトリは dist/my-app/browser です。実際のプロジェクト名に合わせてディレクトリ名を調整してください。

React
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

React（Vite）のデフォルトの Web アセットディレクトリは dist です。

Vue
npm create vite@latest my-app -- --template vue-ts
cd my-app
npm install

Vue（Vite）のデフォルトの Web アセットディレクトリは dist です。

なし（バニラまたは既存の Web アプリ）

ユーザーに既存の Web アプリがある場合は、次の要件を満たしていることを確認してください。

  1. プロジェクトのルートに package.json ファイルが存在する。
  2. ビルド出力ディレクトリ（例：dist、www、build）が存在する。
  3. ビルド出力ディレクトリのルートに index.html ファイルが存在する。
  4. index.html ファイルに <head> タグが含まれている（Capacitor プラグインの動作に必要です）。

ユーザーがバニラプロジェクトを希望する場合：

mkdir my-app && cd my-app
npm init -y
mkdir www

次に、www/index.html を作成します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My App</title>
</head>
<body>
  <h1>My App</h1>
</body>
</html>

Web アセットディレクトリは www です。

ステップ 3：Capacitor のインストール

プロジェクトのルートディレクトリに移動し、Capacitor のコアパッケージをインストールします。

npm install @capacitor/core
npm install -D @capacitor/cli
ステップ 4：Capacitor の初期化

アプリ名、アプリ ID、Web アセットディレクトリを指定して、Capacitor の初期化コマンドを実行します。

npx cap init <appName> <appID> --web-dir <webDir>
  • <appName>：アプリの表示名をユーザーに尋ねます（例："My App"）。
  • <appID>：逆ドメイン形式のアプリ ID をユーザーに尋ねます（例：com.example.myapp）。
  • <webDir>：ステップ 2 で決定した Web アセットディレクトリを使用します（例：dist、www、dist/my-app/browser）。

これにより、プロジェクトのルートに capacitor.config.ts ファイルが作成されます。

ステップ 5：Web アプリのビルド

ネイティブプラットフォームを追加する前に、出力ディレクトリが存在するよう Web アプリをビルドします。

Angular
ng build
React／Vue（Vite）
npm run build
バニラ

静的な www/ ディレクトリを使用する場合、ビルド手順は不要です。

ステップ 6：ネイティブプラットフォームの追加

追加するプラットフォームをユーザーに尋ねます。

どのプラットフォームを追加しますか？（android／ios／両方）

Android の追加
npm install @capacitor/android
npx cap add android

これにより、ネイティブ Android プロジェクトを含む android/ ディレクトリが作成されます。

iOS の追加
npm install @capacitor/ios
npx cap add ios

これにより、ネイティブ iOS プロジェクトを含む ios/ ディレクトリが作成されます。デフォルトでは、Capacitor 8 は iOS の依存関係管理に Swift Package Manager（SPM）を使用します。

ステップ 7：プロジェクトの同期

Web アセットとネイティブ依存関係を同期します。

npx cap sync

ビルド済みの Web アセットを各ネイティブプラットフォームのプロジェクトにコピーし、ネイティブ依存関係（Android の Gradle、iOS の SPM）をインストールします。

ステップ 8：アプリの実行

接続されたデバイスまたはエミュレーター／シミュレーターでアプリを実行します。

Android
npx cap run android

実行先のデバイス（エミュレーターまたは実機）の選択を求められます。

iOS
npx cap run ios

実行先のシミュレーターまたは実機の選択を求められます。

ステップ 9：作成後のオプション

アプリの実行後、ユーザーに次のように尋ねます。

OTA アップデート用にライブアップデートを設定しますか？（はい／いいえ）

はいの場合は、ライブアップデートの設定について capawesome-cloud スキルを参照するよう案内します。

次に、ユーザーに次のように尋ねます。

ネイティブビルドとアプリストアへの公開用に CI/CD を設定しますか？（はい／いいえ）

はいの場合は、CI/CD の設定について capawesome-cloud スキルを参照するよう案内します。

エラー処理

  • npx cap init が "already initialized" で失敗する：capacitor.config.ts または capacitor.config.json ファイルがすでに存在します。このプロジェクトはすでに Capacitor プロジェクトです。再初期化する場合は、既存の設定ファイルを削除してください。
  • npx cap add が "platform already exists" で失敗する：android/ または ios/ ディレクトリがすでに存在します。まずディレクトリを削除してから、npx cap add を再実行してください：rm -rf android または rm -rf ios。
  • npx cap sync が "could not find the web assets directory" で失敗する：Web アプリがまだビルドされていないか、capacitor.config.ts の webDir が存在しないディレクトリを指しています。まず Web アプリのビルドコマンド（例：npm run build、ng build）を実行してください。
  • iOS ビルドが "no such module" で失敗する：npx cap sync ios を実行し、SPM の依存関係が解決されていることを確認してください。
  • Android ビルドが SDK エラーで失敗する：Android SDK がインストールされていること、および ANDROID_HOME または ANDROID_SDK_ROOT 環境変数が設定されていることを確認してください。不足している SDK バージョンをインストールするには、Android Studio の SDK Manager を開いてください。
  • index.html に <head> タグがない：Capacitor プラグインは <head> タグにスクリプトを挿入します。Web アセットディレクトリ内の index.html に <head> 要素が含まれていることを確認してください。

関連スキル

  • ionic-app-creation — プレーンな Capacitor アプリではなく、UI コンポーネントとテーマを備えた新しい Ionic アプリを作成します。
  • capacitor-app-development — アプリ作成後の一般的な Capacitor アプリ開発ガイダンスです。
  • capacitor-angular — Capacitor アプリ向けの Angular 固有のパターンとベストプラクティスです。
  • capacitor-react — Capacitor アプリ向けの React 固有のパターンとベストプラクティスです。
  • capacitor-vue — Capacitor アプリ向けの Vue 固有のパターンとベストプラクティスです。
  • capacitor-plugins — アプリ作成後に Capacitor プラグインをインストールして設定します。
  • capawesome-cloud — アプリのライブアップデート、ネイティブビルド、CI/CD を設定します。

コメント

Markdown 対応