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

導入

ラブレーブル ラブレーブルは、質問を提示して、1分以内に実行可能なReactアプリを作成するAIアプリビルダーです。ブラウザで速く配信することができますが、App StoreとGoogle Playにアプリを配信し、ホーム画面に表示したい場合はどうすればいいでしょうか?

このガイドでは、完全なパスを歩きます: Lovableからエクスポートし、ウェブアプリを__CAPGO_KEEP_0__でラップし、 Capacitorクラウドで署名されたiOSおよびAndroidバイナリをビルドする Capgo ビルダー __CAPGO_KEEP_0__ Live Updates Capgo Live Updates.

ターミナルコマンドを手動で入力するのを避けたい場合は、AIがほとんどのコマンドを実行してくれます。 約1-2時間 クラウドでビルドされたネイティブのiOSおよびAndroidアプリ

XcodeまたはAndroid Studioはメインパスでは必要ありません __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

• __CAPGO_KEEP_0__
• 実機で動作するアプリ (TestFlight、直接インストール、またはPlay 内部テスト)
• カメラ機能が動作する、ネイティブアプリしか実現できない機能
• Live Updatesが設定されているので、UIとCSSの修正はストアのレビューなしで配信される

前提条件

— クラウドビルドとライブアップデート

無料プランが利用可能; 製品スケール用の有料プラン

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

愛らしさとフレームワークについての注意

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

長い間、Lovable のデフォルトは React + Vite のシングルページアプリケーション (SPA) でした。 2026 年 5 月以降、Lovable の新しいアプリはデフォルトで TanStack Start を使用し、サーバーサイドレンダリング (SSR) をサポートします。SSR はウェブ向けに素晴らしいですが、__CAPGO_KEEP_0__ は静的ビルドをラップします。 静的ビルドとは、HTML、CSS、JavaScript のフォルダです。 Capacitor はこのフォルダをラップします。 Android エミュレータ このガイドの主なパスでは、クラウドでビルドし、実機にインストールするため、両方をスキップできます。 index.html __CAPGO_KEEP_0__

SSRアプリは、各リクエストごとにページをサーバーでレンダリングすることを期待しています。電話の中にはサーバーが存在しないため、Capacitorの場合にしたいのは 静的、クライアント側でレンダリングされた出力.

何をするか:

• 新しく始める: Loveableから 単一ページアプリケーション (SPA) を要求する または、SSRをスキップして静的フォルダを取得する dist/ TanStack Start (SSR)で既にいる場合:
• それをプリレンダリングまたは静的SPAの出力に設定する。唯一のハード要件は、静的ビルドフォルダを含む レガシィNext.js Loveableプロジェクト: index.html.
• Legacy Next.js Lovable projects: 使用 静的エクスポート — 出力先は out/ 代わりに dist/.

どのフレームワークを使っても、Capacitorの webDir をそのフォルダに指します。Vite SPAの場合、そのフォルダは dist.

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

ラブレーブルは、codeをエディター内に保管するまでは、GitHubに接続していません。

1. ブラウザでラブレーブルプロジェクトを開く
2. クリック アップグレード (右上)必要に応じて、次に開く Git 左側のメニュー
3. 選択 GitHub, Lovableを認可し、口座をリンクする
4. Lovableはリポジトリを作成し、自動でアプリをプッシュする

✅ 成功: 訪問 github.com/YOUR-USERNAME/your-app あなたのアプリのcodeを表示します。

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

あなたのcodeをローカルで操作する前に、codeエディターが必要になります。私たちは カーソル、あなたのターミナルコマンドを実行できるAIパワードエディター

カーソルをダウンロードしてインストールする

1. カーソル.sh あなたのOSのバージョンに合ったバージョンをダウンロードする カーソルをインストールするには、インストールウィザードに従う
2. カーソルがインストールされたら、カーソルを開く
3. カーソルを起動する

Cursorのカーソル設定を構成する

最良の体験を得るには、Cursorの設定を事前に構成してください。

1. Cursorのプランを購入する — 無料のレベルではあるが、プロプラン（$20/月）では、無制限のAIの完了、ClaudeとGPT-4へのアクセス、およびコマンドの実行が可能です。
2. Cursorの設定を開く Macの場合、または Command+, Windowsの場合、 Ctrl+, (Mac)または

3. Cursorの設定 AIモデルの有効化

4. __CAPGO_KEEP_0__を選択 __CAPGO_KEEP_0__を選択

5. __CAPGO_KEEP_0__を許可 __CAPGO_KEEP_0__を許可

__CAPGO_KEEP_0__で

1. __CAPGO_KEEP_0__で Shift+Command+P (Mac)または Shift+Ctrl+P (Windows)でコマンドパレットを開く
2. 「clone」と入力し Git: Cloneを選択
3. CapgoのGitHubリポジトリのURLを貼ります: https://github.com/YOUR-USERNAME/your-lovable-app.git
4. プロジェクトを保存するフォルダを選択してください

5. Cursorはプロジェクトをクローンして開きます

ステップ 3 — 依存関係をインストールしてローカルで実行

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

1. CursorのAIタブを開くには、 Command+K (Mac) Ctrl+K (Windows)
2. 以下のコマンドを入力してください:

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

AIは自動的にOSを検出し、Node.jsをインストールし、実行します npm install、開発サーバーを起動する npm run dev.

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

カーソルでターミナルを開くには Shift+Command+T （Mac）または 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 nodejs.orgからインストーラーをダウンロードする __CAPGO_KEEP_0__
2. インストーラーを実行します。
3. ターミナルを開いて実行してください:

cd your-lovable-app
npm install
npm run dev

Lovableアプリは通常 http://localhost:8080 または http://localhost:5173 Capacitorライブアップデートの代替手段は

— ターミナルが表示するアドレスを使用してください。 Ctrl + C を押してください。

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

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

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

React + Vite (most Lovable apps)

Method 1: Cursor AIを使用する (おすすめ)

Press Command+K (Mac) or Ctrl+K (Windows)と尋ねてください:

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

Method 2: 手動設定

Confirm vite.config.ts 相対的なベースを使用しているので、ネイティブのWebView内でアセットが読み込まれます:

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

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

Build and verify:

npm run build

Capacitorアプリケーションを正常にビルドして検証した場合、 dist/ フォルダが見つかります。 index.html その中には

Next.jsのレガシープロジェクト

あなたのリポジトリがNext.jsを使用している場合、Cursorに質問してください:

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

または Next.jsアプリをモバイルに変換する 詳細なセットアップの場合、次の手順に従ってください next.config 次に、__CAPGO_KEEP_0__を使用します webDir: 'out' in Capacitor instead of dist.

✅ 成功: 静的ビルドフォルダが存在します (dist/ または out/) with index.html.

Step 5 — Capacitor とネイティブプラットフォームを追加する

Capacitor は、実際のiOSおよびAndroidシェルでウェブアプリをラップします — リライトは必要ありません。

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

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

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

AI はアプリ名と バンドルID (例: __CAPGO_KEEP_0__ の初期化) と尋ねます。 アプリ名 com.yourcompany.myapp).

Method 2: 手動インストール

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

入力が求められます:

実際に所有するパッケージ ID を選択してください。 Bundle ID はグローバルに一意です。ドメインを管理するドメインに基づいて逆引き ID を使用してください。最初から変更するのではなく、後で変更すると、すべてのファイルを検索して置換する必要があります。 ios/ and android/ 再構築

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

Capacitor を設定

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

Cursor に尋ねてください:

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

Next.js の静的エクスポート用に、Cursor に尋ねてください out instead.

2. マニュアル設定

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;

ビルドとSync

1. Cursor AIを使用する方法 (推奨)

Cursorに伝える

Build the production web app and sync it with Capacitor platforms

2. マニュアルコマンド

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依存関係を自動的に管理します。

✅ 成功: ios/ そして android/ フォルダが表示され、ターミナルが表示されます。 Sync finished.

ステップ 6 — ご確認ください。 .gitignore

Capgo ビルダーは、Git リポジトリからコンパイルされるため、 ios/ そして android/ コミットする必要があります。。よくある間違いは、リポジトリのルートで無視することです。

確認:

• ルート .gitignore 無視 node_modules そして dist (クラウドがウェブビルド中でも再構築されます。 dist during web builds)
• ios/ と android/ 自身は ではない 無視される

✅ 成功 git status 表示 ios/ と android/ コミットし、プッシュ

成功

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

✅ あなたの__CAPGO_KEEP_0__リポジトリは Your GitHub repo shows the ios/ context android/ フォルダ。

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

Mac またはローカルの Xcode/Android Studio Pipelining が必要ありません。 Capgo ビルダー Capgo Builder は、iOS と Android のビルドをクラウドからコンパイル、署名、提出できます。

Set up 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 を開発用ビルドのために登録します。

参照 資格管理 と 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: TestFlight（推奨）または、デバイスのUDIDを登録した開発用ビルド
• Android: Google Playの内部テストトラックまたは署名済みリリースAPK/AAB

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

Step 9 — Optional: iOS と Android の開発環境で Capgo をテストする

If you have a Mac or want emulator testing before cloud builds:

For iOS

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

Open the iOS project in Xcode

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

npx cap open ios

初回の Xcode 設定:

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

Android用

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

Open the Android project in Android Studio

方法2：手動コマンド

npx cap open android

初めてのAndroid Studio設定：

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

ローカルのIDEを使用して日常のデバッグを行う。 Capgoビルダー Capacitorを使用してモバイルアプリに愛される開発者用アプリを変換する必要がある場合。

✅ Success: シミュレーターまたはエミュレータでアプリが開き、Lovableコンテンツが表示されます。

ステップ10—ライブリロードを有効にします (開発)

開発の速度を上げるには、ローカル開発サーバーへの指示をネイティブシェルにします。

方法1：Cursor AIを使用する (推奨)

Cursorに伝えます:

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

方法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

✅ 成功: Webアプリのcodeのホットリロードは、デバイスまたはエミュレータで実行されます。

ステップ11 — 付属の機能を追加: カメラ

JavaScriptは、実際のデバイス機能を呼び出すことができるCapacitorプラグインがあります。ユーザーは、信頼できないブラウザタブではできないように、カメラを追加して写真を撮ることができます。

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

カーソルに伝えます:

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

方法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 ビルダを通じて、デバイスで機能する前に

✅ 成功: カメラ code コンパイルと npx cap sync エラーなしで完了

Step 12 — Capgo Live Updates

すべてのネイティブの変更は通常、アプリストアのレビューを通過する。 Capgo Live Updates アプリのウェブ層（HTML、CSS、JS、画像）に変更をプッシュして、数分でオンエアになります。

初回リリースにアップデーターをインストール レビューの待ち時間を避けて、修正を配信する必要があるときに、いつでも配信できます。

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 Builderビルドを実行して、アップデーターSDKをネイティブシェルに配置します。

リリース後、ウェブバンドルをアップロード:

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

参照 Capgo Live Updatesドキュメント.

このアップロードを毎回誰かがクリックしたときに自動化するには Publish Lovableで LovableからCapgoのライブアップデートを自動化するにはGitHubアクションを使用する.

✅ 成功: __CAPGO_KEEP_0__のアップデートプラグインがインストールされ notifyAppReady() 起動時に実行される

ステップ13—ライブアップデートでヘッダーのスペースを修正する

実際のiPhoneで、ヘッダーは時計とバッテリーのステータスバーの下に表示される場合があります。 モダン__CAPGO_KEEP_0__は端から端まで描画されるので、安全なエリアのインセットを尊重する必要があります。 Capacitor __CAPGO_KEEP_1__: env(safe-area-inset-top), -bottom, -left, -right.

すでに多くのLovableアプリは、下部のインセットを処理していますが、固定のトップパディングを使用しています (例えば pt-6) など

1. 確認 viewport-fit=cover で index.html:

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

2. トップヘッダーの修正 — max() を使用して、ウェブのパディングを維持し、ノッチデバイスで拡大します:

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

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

In Cursor または Lovable では、以下の質問をします:

「モバイルで、ステータスバーの上にアプリのコンテンツが表示されます。各ページヘッダーのトップパディングに env(safe-area-inset-top) を追加してください。既存のパディングを最小限に抑えます。」 max()3. オーバー・ザ・エアで修正を配信

__CAPGO_KEEP_0__ — この 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 edge-to-edge display.

__CAPGO_KEEP_0__ エッジトゥーエッジディスプレイ

ステップ 14 — アプリのストアリストに準備する

• アプリは作成され、インストール可能になり、即時更新をプッシュできます。パブリック ストアにアプリを公開することは、ほとんどの場合、書類作成にすぎません: アプリアイコン — iOS の場合、1024×1024px (透明度なし)、Google Play の場合、512×512px
• スクリーンショット — iPhone 6.9“ (1320×2868px) のスクリーンショットが必要です
• アプリ名、サブタイトル、説明、キーワード
• プライバシーポリシーURL — 無料アプリでも両方のストアで必要
• 年齢制限 context: Solution page app examples section. Role: Short UI label or navigation item. Seen in: component solutions/SolutionAppExample.astro. Message key `solution_app_examples_rating` (Solution App Examples Rating).
• — 各コンソールのアンケート データ収集の披露

— Apple のプライバシー栄養ラベルと Google のデータセーフティ

Set up app icons and splash screens for my Capacitor app

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

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日テスト要件を満たした後

詳細は 初めてのアプリレビューのガイド をご覧ください。

よくあるエラー (とその修正方法)

• Could not find the web assets directory: ./dist — Run npm run build 前に npx cap add または npx cap sync. ご確認ください webDir に capacitor.config.ts マッチングするフレームワークの出力 (dist Viteの場合、 out Next.jsの静的エクスポートの場合)。
• “This App ID … is not available” — バンドルIDはグローバルに一意です。
• Apple App Store ConnectのIDと一致するように、ネイティブプロジェクトのIDを変更してください。 iOSビルドが失敗した後、バンドルIDを変更した ios/ — Apple App Store ConnectのIDと一致するように、ネイティブプロジェクトのIDを変更してください。 android/と
• 、コミット、再構築。 — セット base: './' Vite config に設定し、再構築し、実行 npx cap sync.
• ステータスバーの下のコンテンツ — 追加 viewport-fit=cover と env(safe-area-inset-top) パディング (ステップ 13)
• デバッグモードで署名された APK Google Play はデバッグ ビルドを拒否します。リリース ビルドで署名されたキーストアを使用してください。
• デプロイが拒否されました — バージョンがすでに存在します バージョン/ビルド番号を増やして、ネイティブ プロジェクトを再構築してください。

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

結論

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

次のステップ

• Capgo ライブアップデート — ストアのレビューを待たずにUIとコピーの修正を配信する
• Capgo ビルダー — アプリフローと比較して、Capgo Builderの機能を理解する
• Capgo Plugin Directory __CAPGO_KEEP_0__ プラグインディレクトリ
• — バイオメトリクス、プッシュ通知、位置情報、など モバイルにBase44を · モバイルにBolt.newを

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

リソース

• Lovableドキュメント
• Capacitorドキュメント
• Capgoネイティブビルド
• Capgo — Capacitorアプリ用のライブアップデート
• WindowsからiOSをビルド
• モバイル用のNext.js静的エクスポート

Convert Your Lovable App to iOS and Android with Capacitorから続けてください

Capacitorを使用している場合、Capgoを使用してデバッグアプリをモバイルに変換できます。 Convert Your Lovable App to iOS and Android with Capacitor native プラグインの作業を計画するには、Capacitorと接続する Capgo プラグインディレクトリ Capacitorの製品ワークフロー内でCapgo プラグインディレクトリに。 Capacitor プラグインは Capgo によって提供されます。 Capacitorの実装詳細については、Capacitor プラグインによって Capgo で管理されます。 Capgo 本機ビルド Capacitorの製品ワークフローにおけるCapgoネイティブビルドのために WindowsからiOSをビルド クラウドでiOSビルドを行うにはMacが必要ない。