Capacitorで愛されるアプリをiOSとAndroidに変換する

導入

愛すべき は、1分間でパラメータを使用してReactアプリを作成するAIアプリビルダーです。ブラウザでアプリを迅速に配信できますが、App StoreとGoogle Playにアプリを配置し、ホーム画面に表示したい場合はどうしますか?

このガイドでは、Lovableからエクスポートする全プロセスを歩みます: LovableからWebアプリをwrapする Capacitorビルド Capgo ビルダー Capacitorで__CAPGO_KEEP_0__ Live Updates Capgo Live Updates.

Capgoを使用 Cursor AIを通じて — AIは、ターミナルコマンドのほとんどを自動実行できます。

所要時間: 初回は約1–2時間、主にアカウント設定とクラウドビルドの待ち時間

最後まで、以下のことが実現します。

• クラウドからネイティブiOSおよびAndroidアプリを構築 — XcodeまたはAndroid Studioはメインパスでは必要ありません。
• 実機でアプリが動作する (TestFlight、直接インストール、またはPlay内テスト)
• カメラ機能が動作する — これはネイティブアプリのみが実現できる機能
• Live Updateが設定されている — UIおよびCSSの修正はストアのレビューなしで配信される

前提条件

公開に限り、コスト(のみ):

オプション (ローカルシミュレーターのみ):

両方をスキップできます。このガイドの主なパスでは、クラウドでビルドし、実機にインストールします。

愛されるアプリとフレームワークについての注意

code に触れる前に、 Lovable が生成するウェブアプリの種類は、モバイルラッピングに影響します.

長い間、Lovableのデフォルトは React + Viteのシングルページアプリケーション (SPA) です。2026年5月以降、ブランド新しいLovableアプリは TanStack Startをデフォルトで使用できます。サーバーサイドレンダリング (SSR) です。 SSRはWeb向けに素晴らしいですが、Capacitorは 静的ビルド —HTML、CSS、JavaScriptのフォルダと根にあります— index.html デバイス上のアプリに送信されます。

サーバーサイドレンダリングのアプリは、各リクエストごとにページをサーバーでレンダリングすることを期待します。電話の中にはサーバーはありませんので、Capacitorの場合、 電話の中にはサーバーはありませんので、__CAPGO_KEEP_0__の場合に.

静的、クライアントレンダリングの出力

• 何をするか： Capgoで愛される開発者向けアプリをモバイルに変換する 単一ページアプリケーション (SPA) または、SSRをスキップして静的 dist/ フォルダ。
• TanStack Start (SSR)で既にいる場合: 静的ビルドフォルダを生成するように設定するか、静的SPAを出力するように設定します。 index.html.
• 静的ビルドフォルダには、以下の要件があります。 Use 使用 静的エクスポート out/ — 出力は dist/.

あなたが使用するフレームワークに関係なく、Capacitorの webDir そのフォルダ内。Vite SPAの場合、そのフォルダは dist.

ステップ 1 — GitHub をエクスポートする

Capacitorは、codeをエディター内に保管し、GitHubに接続するまでにします。

1. ブラウザでLovableプロジェクトを開きます。
2. Click クリック アップグレード Git Git
3. をクリック GitHub__CAPGO_KEEP_0__
4. Lovableはリポジトリを作成し、自動でアプリをプッシュします。

✅ 成功: 訪問すると github.com/YOUR-USERNAME/your-app 表示されます。code。

ステップ 2 — カーソルとプロジェクトのクローンの設定

Capacitorをローカルで使用する前に、codeをローカルで使用するには、codeエディターが必要です。 Cursor__CAPGO_KEEP_0__

Cursorをダウンロードしてインストール

1. Visit cursor.sh あなたのOS用のバージョンをダウンロードしてください
2. Cursorのインストールウィザードに従ってCursorをインストールしてください
3. CursorがインストールされたらCursorを開いてください

CursorをAI開発用に設定してください

最適な体験を得るには、Cursorを設定する前に行ってください:

1. Cursorのプランを購入してください — Cursorには無料のレベルが用意されていますが、プロプラン（$20/月）は無制限のAI完了、ClaudeとGPT-4へのアクセス、コマンド実行を提供します
2. Cursorの設定を開いてください Macの場合 Command+, Windowsの場合 Ctrl+, カーソル設定

3. — AI機能が有効になっていることを確認してください: モデルを許可する

4. — 最も良い結果を得るには、ClaudeまたはGPT-4を選択してください: カーソルモデルを選択する

5. — カーソルを使用してコマンドを実行するようにしてください: カーソル設定

カーソル内でリポジトリをクローンする

1. カーソル内で Shift+Command+P (Mac) または Shift+Ctrl+P (Windows) を押してコマンドパレットを開く
2. 「clone」と入力し、「Git: Clone」を選択する リポジトリのURLを貼り付ける:
3. Paste your GitHub repository URL: https://github.com/YOUR-USERNAME/your-lovable-app.git
4. カーソル内でクローンする

5. カーソル内でプロジェクトを開く

Step 3 — Capgoを使用した依存関係のインストールとローカル実行

Method 1: Cursor AIを使用する (推奨)

1. Macの場合、または Command+K Windowsの場合 Ctrl+K 以下のコマンドを入力してください:
2. AIは自動的にOSを検出し、Node.jsをインストールし、

Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server

を実行し、開発サーバーを npm installHomebrewのインストール npm run dev.

Cursorのターミナルを開くには

__CAPGO_KEEP_0__ Shift+Command+T Windowsの場合 Shift+Ctrl+T Windowsの場合、次のようになります:

macOSの場合:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
cd your-lovable-app
npm install
npm run dev

Windowsの場合:

1. Capacitorを使用するアプリを開発するには、まず: 24 LTS Capacitorのインストーラーをダウンロードする nodejs.org
2. インストーラーを実行する
3. ターミナルを開いて次のコマンドを実行する

cd your-lovable-app
npm install
npm run dev

Lovableアプリは通常、 http://localhost:8080 または http://localhost:5173 — ターミナルが表示するアドレスを使用してください。

Press Ctrl + C を押して開発サーバーを停止してください。

✅ Success: ブラウザでアプリが開き、UIが正常に動作します。

Step 4 — 静的プロダクションビルドの準備

Capacitorでは、Capacitorは、ネイティブプラットフォームを追加する前に、プロダクションビルドが必要です。

__CAPGO_KEEP_0__ は、ネイティブプラットフォームを追加する前にプロダクションビルドが必要です。

React + Vite (ほとんどのLovableアプリ)

Press Command+K (マック) または Ctrl+K (Mac) または (Windows) と尋ねてください:

Configure vite.config for Capacitor mobile deployment with base './' and production build to dist

Method 2: 手動設定

確認 vite.config.ts リレーショナルベースを使用するので、ネイティブのWebView内でアセットがロードされる:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
  },
})

ビルドと検証:

npm run build

あなたは dist/ フォルダ index.html の

Lovable.devの静的エクスポート成功

レガシーナEXT.js Lovableプロジェクト

Add a static export script to package.json and configure next.config.js for mobile export with Capacitor

またはフォロー または for the full next.config setup してから利用 webDir: 'out' Capacitorの代わりに dist.

✅ Success: 静的ビルドフォルダが存在します ("dist/ or out/) with index.html.

Step 5 — Add Capacitor and Native Platforms

Step 5 — Add Capacitor and Native Platforms

Method 1: Cursor AI を使用 (推奨)

Press Command+K Press (Mac) or Ctrl+K (Windows) と尋ねます:

Install Capacitor CLI, initialize it for my app with webDir dist, and add iOS and Android platforms

AI はあなたの アプリ名 と バンドルID (例えば com.yourcompany.myapp).

方法 2: 手動インストール

npm install @capacitor/core @capacitor/cli
npx cap init

質問されたとき:

実際に所有しているパッケージIDを選択してください Bundle IDは世界的に一意です。逆引きスタイルのIDを使用して、最初から管理しているドメインに基づいてください。後で変更すると、すべてのファイルを置き換える必要があるためです。 ios/ と android/ と再構築。

npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Capacitor を設定

方法 1: カーソル AI を使用する (推奨)

カーソルに尋ねる:

Update capacitor.config.ts to use dist as webDir and set up for HTTPS

Capacitorを使用するように尋ねます。 out instead.

代わりに。

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
};

export default config;

方法 2: 手動設定

方法 1: カーソル AI を使用する (推奨)

ビルドとSyncする

Build the production web app and sync it with Capacitor platforms

Method 2: Manual Commands

npm run build
npx cap sync

プロジェクトは次のようになります。

your-lovable-app/
├── android/              ← native Android project
├── ios/                  ← native iOS project
├── dist/                 ← built web app (or out/ for Next.js)
├── src/                  ← your Lovable app code
├── capacitor.config.ts
└── package.json

CocoaPodsは必要ありません。 Capacitor 8はSwift Package Managerを自動的にiOS依存関係として使用します。

✅ Success: ios/ と android/ Step 6 — Capgoの機能を確認する Sync finished.

__CAPGO_KEEP_0__ Builderは、Gitリポジトリからコンパイルされるため、 .gitignore

Capgo ビルダーは、Git リポジトリからコンパイルするので ios/ と android/ folders appear and the terminal shows。リポジトリのルートで無視するのはよくある間違いです。

確認:

• ルート .gitignore 無視する node_modules と dist (クラウドが再構築 dist ウェブビルド中
• ios/ と android/ 自身は 無視され 成功:

✅ Success: git status 表示します。 ios/ そして android/ ステップ 7 — コミットとプッシュ

成功:

git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push

✅ Success: あなたのGitHubリポジトリは ios/ そして android/ folders.

Step 8 — CapgoでCapgoビルダーを使用してストア用バイナリをビルドする

__CAPGO_KEEP_0__ ビルダー Capgo ビルダー ステップ 7 — コミットとプッシュ

Capgo Builderの設定

npx @capgo/cli@latest login
npx @capgo/cli@latest init
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build init --platform android

1回の署名資格情報を保存してください。必要に応じて、署名資格情報を生成するための無料ツールを使用してください:

• iOS証明書生成ツール
• Androidキーストア生成ツール
• iOS UDID検索 — iPhoneを開発用ビルドに登録する

See 資格情報の管理 と WindowsからiOSをビルド.

クラウドビルドを要求

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.myapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.myapp --platform android --build-mode release

ビルドログはターミナルで流れます。App Store Connectが設定されている場合、iOSビルドは自動的にTestFlightにアップロードされます。

実機にインストールする:

• iOS: テストフライト（推奨）または、デバイスのUDIDを登録した開発用ビルド
• Android: Google Playの内部テストトラックまたは署名リリースAPK/AAB

✅ 成功: 署名ビルドが完了し、実機にインストールできます。

ステップ9 — オプション: XcodeまたはAndroid Studioでローカルにテストする

Macまたはエミュレータでのテストが必要な場合は、Macまたはエミュレータでのテストが必要な場合は、Cloud Build前に行うことができます。

iOS

iOS

Open the iOS project in Xcode

方法1: Cursor AIを使用する（推奨）

npx cap open ios

初回のXcode設定:

1. デバイスドロップダウンからシミュレータを選択してください (例: iPhone 15)
2. 実機の場合:自動署名を有効にし Apple Developerチームを選択してください ▶️ プレーヤーボタンをクリック — 最初のビルドには5-10分かかります
3. LovableアプリがiOSで動作する

Android

方法2:手動コマンドを使用する

Open the Android project in Android Studio

Android Studioを起動してLovableプロジェクトを開く

npx cap open android

Android Studio の初回設定:

1. 必要な SDK パッケージをインストールするように求められたらインストールする
2. デバイス マネージャーでエミュレータを作成 (例: Pixel 6、API 33+)
3. 緑の ▶️ Run ボタンをクリック — 最初のビルドには 5–15 分かかります

ローカルの IDE を使用して日常のデバッグを行う。必要に応じて Capgo ビルダー 署名されたリリースバイナリを取得する必要がある場合

✅ 成功: シミュレーターまたはエミュレータでアプリが開き、愛らしいコンテンツが表示されます。

ステップ 10 — Live Reload を有効化 (開発)

開発サーバーのローカルサーバーにnativeシェルを指すことで、繰り返しを高速化することができます。

Method 1: Cursor AI を使用する (推奨)

Cursor に伝える

Set up live reload for Capacitor development with my local IP address

Method 2: 手動設定

1. ローカル IP アドレスを探す

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

2. 更新 capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173',
    cleartext: true,
  },
};

export default config;

ポートを使用する 8080 または 3000 そのようなものが印刷される npm run dev 変更を適用する

3. ライブリロード有効

npx cap copy

✅ Appflow プラグインまたは codeの編集は、デバイスまたはエミュレータでホットリロードされます。

Step 11 — Native機能を追加: カメラ

A Capacitor plugin lets JavaScript call real device features. We’ll add the Camera plugin so users can snap a photo — something a browser tab cannot do reliably.

Method 1: Cursor AIを使用する (推奨)

Cursorに伝えます。

Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo

Method 2: 手動インストール

npm install @capacitor/camera
npx cap sync

iOS — ios/App/App/Info.plist デバイスに追加 <dict>:

<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>

Android — <manifest> 内部に追加する android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

import { Camera, CameraResultType } from '@capacitor/camera';

async function takePhoto() {
  const photo = await Camera.getPhoto({
    quality: 90,
    resultType: CameraResultType.Uri,
  });
  return photo.webPath;
}

プラグインの追加には 新しいネイティブのビルドが Capgo ビルダーを通して、デバイスで動作するようにする必要があります。

✅ Success: カメラ code がコンパイルされ npx cap sync エラーなしで完了しました。

Step 12 — Capgo Live Updates

アプリストアのレビューを通過するのが通常のnative変更です。 Capgo Live Updates __CAPGO_KEEP_0__ Live Updates

Capacitorを使用して愛される開発用アプリをモバイルに変換する レビュー待たずに修正を配信できるようにしてください。

npm install @capgo/capacitor-updater
npx cap sync

追加 capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
    },
  },
};

export default config;

アプリエントリで初期化してください (例えば src/main.tsx):

import { CapacitorUpdater } from '@capgo/capacitor-updater';

void CapacitorUpdater.notifyAppReady();

コミット、プッシュ、そして新しいCapgoビルダーを実行して、更新プログラムSDKをネイティブシェルに配置してください。

リリース後、Webバンドルをアップロードしてください:

npm run build
npx @capgo/cli@latest bundle upload --channel production

参照 Capgo Live Updatesドキュメントを参照してください。.

このアップロードを毎回実行するには、Lovableのボタンをクリックするたびに、以下の手順に従ってください。 公開 この手順に従ってLovableから__CAPGO_KEEP_0__ Live Updatesを自動化してください。 Automate Capgo Live Updates from Lovable with GitHub Actions.

✅ 成功: アップデートプラグインがインストールされています。 notifyAppReady() 起動時に実行されます。

ステップ 13 — ステータス バーのスペースを Live Update で修正

iPhone実機で、ヘッダーは表示されます。 under Modern Capacitor はエッジからエッジまで描画されるため、安全な領域のインセットを尊重する必要があります。 安全な領域のインセット: env(safe-area-inset-top), -bottom, -left, -right.

多くの Lovable アプリはすでに下部のインセットを処理していますが、固定のトップ パディング (例: ) を使用していますが、上部のインセットを使用していません。 pt-61. 確認

2. トップ ヘッダーを修正 viewport-fit=cover 3. index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

4. — 使い max() モバイルデバイスの notch を考慮した Web のパディングを維持して拡大するために

/* Before */
padding-top: 1.5rem;

/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));

Cursor または Lovable では

“モバイルでアプリのコンテンツはステータスバーの上に表示されます。各ページヘッダーの上部パディングに env(safe-area-inset-top) を追加します。既存のパディングを最小限に抑えながら max()”

3. OTA バンドルを適用して修正を配信する — これは純粋な CSS です、ネイティブのリビルドが必要ありません:

git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production

デバイス上でアプリを強制終了し、再度開き、約 15–30 秒待ち、再度開きます。ヘッダーはステータスバーの下に表示されるはず — ストアレビューなしで修正されました。

✅ 成功: ステータスバーをクリアするトップコンテンツは OTA バンドルが適用された後です。

より深いレイアウトの作業については @capgo/tailwind-capacitor と Capacitor エッジ・トゥ・エッジディスプレイ.

ステップ14—アプリの店舗リストを準備する

あなたのアプリは作成され、インストール可能で、即時更新が可能です。パブリックストアに公開するのはほとんど書類仕事です:

• アプリアイコン — iOS用は1024×1024px（透明度なし）、Google Play用は512×512px
• スクリーンショット — AppleはiPhone 6.9” (1320×2868px)スクリーンショットを要求します
• アプリ名、サブタイトル、説明、キーワード
• プライバシーポリシーURL — 両方のストアで必須、無料アプリでも
• 年齢制限 —コンソールごとのアンケート
• データ収集の披露 —AppleプライバシーナイュートレーションラベルとGoogleデータセーフティ

方法 1: カーソル AI を使用する (推奨)

Set up app icons and splash screens for my Capacitor app

方法 2: 手動設定

npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

「ライブ」になる前の残り:

1. Google Play のクローズドテスト (2023 年 11 月 13 日以降に作成された個人アカウント): 14 日間連続してテストを実施した後、生産アクセスに必要なのは少なくとも 12 人のテスターです。iOS には等価物がありません。
2. レビューに提出する —Apple ~3–5 日、Google ~3–7 日テスト要件が満たされた後

See our 初回アプリレビューガイド Capacitorのフルチェックリストを参照してください。

エラーの共通点（とその解決策）

• Could not find the web assets directory: ./dist — Run npm run build before npx cap add or npx cap syncSee our webDir in capacitor.config.ts for the full checklist.dist Vite、 out — Run before working on a new feature. You can also discuss the issue on GitHub or mention it in the issue tracker before working on a new feature. Alternatively, you can use other alternatives such as Appflow or Capwesome. For more information, please refer to the Appflow CTA Questions or Capwesome CTA Questions. If you need further assistance, please consult our Consulting FAQ Subtitle. You can also check out our Appflow Plugins Or page for more information.
• “このApp ID … は利用できません” — Bundle IDはグローバルに一意です。コントロールする逆ドメインIDを選択してください。
• iOSビルドが失敗する — Apple App Store Connectに登録されているネイティブプロジェクトのIDと一致するように、置換してください。 ios/ そして android/, コミット、再構築
• 起動時に白い画面が表示される — Vite設定で base: './' を設定し、再構築し、実行してください。 npx cap sync.
• ステータスバーの下のコンテンツ — ここに viewport-fit=cover そして env(safe-area-inset-top) パディング (ステップ 13).
• デバッグモードで署名された APK — Google Play はデバッグ ビルドを拒否します。リリース ビルドで署名されたキーストアを使用してください。
• デプロイが拒否されました — バージョンがすでに存在します。 — ネイティブ プロジェクトのバージョン/ビルド番号を増やして再構築してください。

Capgo ビルダーの問題については ネイティブ ビルドのトラブルシューティング と Live Updates のデバッグ.

結論

あなたは、クラウドで Mac を使用せずに、実際のカメラ機能とレイアウトの修正をオンエアで配信した Lovable のウェブアプリをネイティブの iOS と Android に変換しました。 それが難しい部分です。

次のステップ

• Capgo Live Updates — UI とコピーの修正は、ストアのレビューを待つ必要なく行う
• Capgo ビルダー — CI でリリースビルドを自動化する
• Capgo プラグインディレクトリ — バイオメトリクス、プッシュ通知、位置情報、など
• 関連ガイド Base44 をモバイルに · Bolt.new をモバイルに

無料の Capgo アカウントに登録して Live Updates とクラウドネイティブビルドを有効にする

リソース

• Capacitorを使用した愛らしき開発アプリをモバイルに変換する
• Capacitor ドキュメント
• Capgo ネイティブビルド
• Capgo — Capacitor アプリのためのライブアップデート
• WindowsからiOSをビルドする
• モバイル用のNext.js静的エクスポート

Capacitor を使用して、愛らしきアプリをiOSとAndroidに変換する

__CAPGO_KEEP_0__ を使用している場合 Capacitor を使用して、愛らしきアプリをiOSとAndroidに変換する __CAPGO_KEEP_0__ プラグインディレクトリと接続する Capgo プラグインディレクトリの製品ワークフロー Capgo プラグインディレクトリ Capacitor プラグインは Capgo によって提供されます。 Capgo による Capacitor プラグイン Capgo ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフロー Windows から iOS をビルド Mac を必要としないクラウド iOS ビルド