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

導入

Lovable は、質問に答えて1分以内に実行可能なReactアプリを作成するAIアプリビルダーです。ブラウザで速く配信できますが、App StoreとGoogle Playにアプリを配信したい場合はどうしたらいいでしょうか。

このガイドでは、Lovableからエクスポートすることから始め、Webアプリを Capacitorでラップし、クラウドで署名済みのiOSとAndroidバイナリをビルドし、オーバー・ザ・エアで修正を配信するまでの全プロセスを歩みます。 Capgo Builder (no Mac が必要ありません), 本格的なネイティブ機能を追加し、オンエアでレイアウトの修正を行う Capgo Live Updates.

私たちは Cursor を使用しています — AI は、テレミナルコマンドを手動で入力するのを避けたい場合は、ほとんどのコマンドを実行できます。

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

最終的には、

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

前提条件

公開に限り発行する場合のコスト

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

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

フレームワークと愛すべきもの

まずcodeに触れる前に知っておくべきことは __CAPGO_KEEP_0__が生成するウェブアプリの種類は、モバイルラッピングに影響する.

長い間、LovableのデフォルトはReact + Viteのシングルページアプリケーション(SPA)だった 2026年5月以降、LovableアプリはデフォルトでTanStack Startを使用してサーバーサイドレンダリング(SSR)をサポートするSSRはウェブ上で素晴らしい機能ですが、__CAPGO_KEEP_0__は静的ビルド 静的ビルドとは、HTML、CSS、JavaScriptのファイルとrootに配置されたファイルのフォルダ このフォルダは、デバイス上でアプリケーションを実行する際に、Capacitor内に含まれる SSRアプリは、各リクエストごとにページをサーバーでレンダリングすることを期待している 電話の中にはサーバーが存在しないため、__CAPGO_KEEP_0__ではサーバーレスアプリケーションを望む index.html TanStack Startを使用してサーバーサイドレンダリング(SSR)をサポートする

An SSR app expects a server to render pages on each request. There is no server inside a phone, so for Capacitor you want 静的、クライアント側レンダリング出力.

What to do:

• 新規作成: Lovable から静的サイトジェネレータの 単一ページアプリケーション (SPA) または、SSR をスキップして静的サイトジェネレータの dist/ フォルダ。
• TanStack Start (SSR) から既に始まっている: 静的サイトジェネレータのプリレンダリングまたは静的 SPA の出力に設定します。唯一のハード要件は、静的ビルドフォルダを含むことです。 index.html.
• Legacy Next.js Lovable プロジェクト: を使用 静的エクスポート — 出力はこのフォルダに out/ 代わりに dist/.

Capacitorのフォルダを指します。Vite SPAの場合、そのフォルダは webDir ステップ 1 — __CAPGO_KEEP_0__にアプリをエクスポートする dist.

GitHubを編集するLovableがアプリを保持するのは、__CAPGO_KEEP_1__に接続するまでです。

Lovable keeps your code in its editor until you connect GitHub.

1. ブラウザで
2. クリック アップグレード (右上)必要に応じて、次に Git 左メニューの
3. Choose GitHub, authorize Lovable, and link your account
4. Lovable creates a repository and pushes your app automatically

✅ Success: Visiting github.com/YOUR-USERNAME/your-app shows your app’s code.

__CAPGO_KEEP_0__

codeをローカルで使用する前に、codeエディターが必要になります。 Cursor、AIパワーで動作するエディターです。

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

1. Visit cursor.sh で、自分のOS用のバージョンをダウンロード
2. Cursorをインストールするには、インストールウィザードに従ってください
3. Cursorを起動

AI開発用にCursorを設定することは、最良の体験を得るための重要なステップです。

Cursorを設定する前に、最良の体験を得るために

1. Cursor プランを購入する — Cursor は無料のレベルを提供していますが、プロプラン ($20/月) は、無制限の AI 完了、Claude と GPT-4 のアクセス、およびコマンド実行を提供します。
2. Cursor 設定を開く 「 Command+, 」を押す Ctrl+, 「

3. Cursor 設定 AI モデルを有効にする

4. モデルを許可する 好みのモデルを選択する — 最良の結果を得るには、Claude または GPT-4 を選択してください:

5. コマンドの実行を許可 — カーソルでコマンドを実行するように有効化:

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

1. カーソルで、 Shift+Command+P (Mac) または Shift+Ctrl+P (Windows) を押してコマンドパレットを開く
2. 「clone」と入力し、「Git: Clone」を選択 リポジトリのURLを入力してください: __CAPGO_KEEP_0__
3. Paste your GitHub repository URL: https://github.com/YOUR-USERNAME/your-lovable-app.git
4. リポジトリのURLを__CAPGO_KEEP_0__に置き換えてください

5. __CAPGO_KEEP_1__

__CAPGO_KEEP_3__

__CAPGO_KEEP_4__

1. __CAPGO_KEEP_5__ Command+K __CAPGO_KEEP_6__ Ctrl+K __CAPGO_KEEP_7__
2. __CAPGO_KEEP_8__

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

__CAPGO_KEEP_9__ npm install__CAPGO_KEEP_10__ npm run dev.

Method 2: 手動インストール

Cursorでターミナルを開くには、 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. の 24 LTS からインストーラーをダウンロードします。 nodejs.org
2. インストーラーを実行します。
3. ターミナルを開いて実行します:

cd your-lovable-app
npm install
npm run dev

Lovable apps typically run on http://localhost:8080 または http://localhost:5173 — use whatever address your terminal prints.

Ctrl+C Ctrl + C を押して、開発サーバーを停止してください。開発サーバーを停止する準備ができたら続けることができます。

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

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

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

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

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: Manual Configuration

Confirm vite.config.ts relative baseを使用しているので、native 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

Capgoプロジェクトの dist/ フォルダが見つかります。 index.html Lovable.devの静的エクスポート成功

__CAPGO_KEEP_0__

あなたのリポジトリが 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 セットアップの詳細はこちら webDir: 'out' in Capacitor instead of dist.

✅ __CAPGO_KEEP_0__ を使用してください。__CAPGO_KEEP_0__ を使用するのではなく 成功:dist/ 静的ビルドフォルダが存在します ( out/または index.html.

Step 5 — Add Capacitor and Native Platforms

ステップ 5 — Capacitor とネイティブプラットフォームを追加する。Capacitor は、実際の iOS と Android のシェルであなたのウェブアプリをラップします — 再構築は必要ありません。

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

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

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

AIはアプリ名と bundle ID (例えば、__CAPGO_KEEP_0__初期化 Method 2: 手動インストール 入力が求められます: com.yourcompany.myapp).

__CAPGO_KEEP_0__は置き換えられます。

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

__CAPGO_KEEP_0__は置き換えられます。

実際に所有している Package 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 を設定する

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

Cursor に質問してください:

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

Next.js の静的エクスポートの場合、Cursor に使用するように指示してください。 out 代わりに

Method 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;

Build and Sync

Method 1: Using Cursor AI (Recommended)

Tell Cursor:

Build the production web app and sync it with Capacitor platforms

Method 2: Manual Commands

npm run build
npx cap sync

Your project now looks like:

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

No CocoaPods needed. Capacitor 8 uses Swift Package Manager for iOS dependencies automatically.

✅ Success: ios/ と android/ フォルダが表示され、ターミナルが表示 Sync finished.

Step 6 — Check Your .gitignore

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

確認:

• ルート .gitignore 無視する node_modules と dist (クラウドで再構築される dist ウェブビルドの際に
• ios/ 自身もまた android/ ]} not 無視されない

✅ Success: git status 表示 ios/ かつ android/ Success: __CAPGO_KEEP_0__ リポジトリは、

Step 7 — コミットとプッシュ

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

✅ Success: GitHub リポジトリには ios/ かつ android/ フォルダが表示されます。

Step 8 — Capgo ビルダーでストア用バイナリをビルド

MacやローカルのXcode/Android Studioパイプラインが必要なくても、配信が可能です。 Capgo Builder iOSおよびAndroidのビルドをクラウドからコンパイル、署名、提出できます。

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 資格情報の管理 and WindowsからiOSをビルド.

__CAPGO_KEEP_0__のクラウドビルドをリクエスト

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

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

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

Macを持っている場合や、クラウドビルド前にエミュレーターテストをしたい場合は

For iOS

Method 1: Using Cursor AI (Recommended)

Open the iOS project in Xcode

Method 2: Manual Command

npx cap open ios

初回のXcode設定:

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

iOS向け

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

Open the Android project in Android Studio

Method 2: 手動コマンド

npx cap open android

Android Studioの初回設定:

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

ローカルのIDEを使用して、日常のデバッグに使用します。必要な場合にのみ、 Capgo ビルダー 署名されたリリースバイナリを必要とする場合に使用します。

✅ 成功: Appはシミュレーターまたはエミュレーターで表示され、愛されるコンテンツが表示されます。

Step 10 — Live Reloadを有効にします (開発用)

ローカル開発サーバーにアクセスすることで、ネイティブシェルを高速化します。

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. Apply changes:

npx cap copy

✅ Success: ウェブのcodeに、デバイスまたはシミュレータで編集した内容が即時反映されます。

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

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

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 top-levelの内部に <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 Builderを通じてデバイスで動作するようにする必要があります。

✅ 成功 カメラcodeのコンパイルとエラーなしの終了 npx cap sync ステップ12 — __CAPGO_KEEP_0__ Live Updatesの追加

Step 12 — Add Capgo Live Updates

__CAPGO_KEEP_0__ Live Updatesの追加には、__CAPGO_KEEP_0__ Builderを通じてデバイスで動作するようにする必要があります。 Capgo ライブ更新 __CAPGO_KEEP_0__ ライブ更新では、Web層（HTML、CSS、JS、画像）に変更を数分でオンエアで反映できます。

__CAPGO_KEEP_0__ アップデーターを最初のリリースにインストール __CAPGO_KEEP_0__ アップデーターをインストールすると、修正をリリースする必要があるときにレビューを待つ必要がなくなります。

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;

__CAPGO_KEEP_0__ アプリエントリで初期化する (例えば、 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_KEEP_0__ ライブ更新ドキュメントを参照 Capgo ライブ更新の成功.

✅ アップデーター プラグインがインストールされました。 __CAPGO_KEEP_0__ notifyAppReady() 起動時に実行される。

ステップ 13 — ライブ更新でステータス バー スペースを修正する

実際のiPhoneで、ヘッダーは時計とバッテリーのステータス バー下に表示される場合があります。モダンな__CAPGO_KEEP_0__は、画面全体に表示されるため、安全な領域のインセットを尊重する必要があります。 多くのLovableアプリは、下部のインセットをすでに処理していますが、固定のトップ パディング (例: ) を使用し、上部のインセットを使用していません。 the status bar (clock and battery). Modern Capacitor draws edge-to-edge, so your app must respect に: env(safe-area-inset-top), -bottom, -left, -right.

2. トップ ヘッダーを修正 pt-6— 上部のインセットを使用

On a real iPhone, your header may sit under the status bar (clock and battery). Modern __CAPGO_KEEP_0__ draws edge-to-edge, so your app must respect safe area insets Many Lovable apps already handle the bottom inset but use fixed top padding (like ) without the top inset. viewport-fit=cover 1. Confirm in 2. Fix top headers — use index.html:

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

Step 13 — Fix Status Bar Spacing with a Live Update runs on startup. max() 端末の notch デバイスで Web の余白を維持し、拡大する:

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

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

Cursor または Lovable では、以下のように尋ねます:

“The app content runs under the status bar at the top on mobile. Add env(safe-area-inset-top) モバイルでアプリのコンテンツは、画面の上部のステータスバーの下に実行されます。 max()各ページヘッダーの上部余白に追加するには、

, 既存の余白を最小限に抑えながら、

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

3. OTA バンドルが適用された後、端末のステータスバーをクリアするコンテンツが表示されます。

✅ — この修正は、ネイティブのビルドが必要ない純粋な CSS です: 端末を強制終了し、再起動し、約 15–30 秒待ち、再度アプリを開きます。ヘッダーはステータスバーの下に表示されます — ストアのレビューなしで修正されました。

成功: @capgo/tailwind-capacitor と Capacitor エッジからエッジまでのディスプレイ.

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

アプリは作成され、インストール可能になり、即時更新をプッシュできます。 公開用のストアにアプリを公開することは、ほとんど書類仕事です。

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

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

Set up app icons and splash screens for my Capacitor app

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

詳細はこちら 初回アプリケーションレビュー ガイド フルチェックリストの詳細はこちら。

一般的なエラー (とその解決方法)

• Could not find the web assets directory: ./dist — Run npm run build 最初に npx cap add または npx cap sync. ご確認ください webDir アプリケーション ID がフレームワークの出力と一致していることを確認してください ( capacitor.config.ts Vite の場合、dist Next.js の静的エクスポートの場合、 out “このアプリ ID … は利用できません”
• __CAPGO_KEEP_0__ — グローバルに一意のBundle IDを選択してください。逆ドメインIDを選択します。
• iOSビルドがBundle IDを変更した後で失敗する — Apple App Store ConnectのNativeプロジェクトのIDと一致するIDを設定してください。Find-and-replaceを実行してください。 ios/ 、コミット、ビルドを実行してください。 android/起動時に白い画面が表示される
• — Vite configに設定してください。 再構築、実行してください。 base: './' ステータスバーの下のコンテンツ npx cap sync.
• — Add padding (Step 13)。 viewport-fit=cover padding (Step 13)。 env(safe-area-inset-top) — Add
• デバッグモードで署名されたAPK — Google Playはデバッグビルドを拒否します。リリースビルドで自分のキーストアで署名してください。
• デプロイが拒否されました — バージョンがすでに存在します — ネイティブプロジェクトのバージョン/ビルド番号を上げてリビルドしてください。

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

結論

ウェブアプリをネイティブiOSとAndroidに変換しました。クラウドでMacを必要とせずに、実際のカメラ機能とレイアウトの修正をオンエアで配信しました。その難しい部分は終わりました。

次のステップ

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

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

リソース

• 愛されるドキュメント
• Capacitor ドキュメント
• Capgo ネイティブ ビルド
• Capgo — Capacitor アプリのリアルタイム更新
• WindowsからiOSのビルド
• モバイル向けのNext.js静的エクスポート

CapacitorでiOSとAndroidへのアプリの変換を続ける

__CAPGO_KEEP_0__を使用している場合 CapacitorでiOSとAndroidへのアプリの変換 __CAPGO_KEEP_0__と接続して Capgo プラグイン ディレクトリ Capgo プラグイン ディレクトリの製品ワークフロー Capacitor プラグイン — Capgo 実装詳細については Capacitor プラグインの Capgo を参照してください。 Capgo ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフローについては WindowsからiOSをビルドする MacがなくてもクラウドiOSビルドが可能です。