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

Introduction

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

This guide walks through the full path: export from Lovable, wrap the web app with Capacitor、クラウドで署名済みのiOSとAndroidバイナリをビルドします。 Capgo Builder クラウドで署名済みのiOSとAndroidバイナリをビルドします。 Capgo Live Updates.

Native Build Native Build Live Updates

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

最終的には、以下のものが得られます:

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

前提条件

公開に公開する場合のみのコスト:

無料プランあり; 製品スケール用の有料プランあり

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

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

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

長い間、Lovableのデフォルトは React + Viteのシングルページアプリケーション（SPA）でした。2026年5月以降、Lovableアプリの新規作成では TanStack Start with server-side rendering (SSR) デフォルトでは、SSRを使用してください。 SSRはWeb向けに素晴らしいですが、Capacitorは静的ビルドをwrapします。 静的ビルド — その中にHTML、CSS、JavaScriptのフォルダが含まれるものが、デバイス上のアプリ内に配布されます。 index.html SSRアプリは、各リクエストごとにサーバーでページをレンダリングすることを想定しています。電話の中にはサーバーが存在しないため、__CAPGO_KEEP_0__では静的、クライアントレンダリングされた出力が必要です。

An SSR app expects a server to render pages on each request. There is no server inside a phone, so for Capacitor you want 新しく始める:.

Lovableから

• 単一ページアプリケーション (SPA) を要求する または、SSRをスキップして静的出力を取得する skip SSR so you get a static Lovableから静的出力を要求する dist/ フォルダ。
• TanStack Start (SSR)にすでに参加しています: 静的ビルドフォルダが含まれる静的SPAを事前にレンダリングまたは出力するように設定します。 index.html.
• Legacy Next.js Lovableプロジェクト: 使用 静的エクスポート — 出力先は out/ あなたが使用するフレームワークに関係なく、フォルダ dist/.

Step 1 — CapacitorからあなたのLovableアプリをエクスポートする webDir Lovableはあなたの__CAPGO_KEEP_0__をエディター内に保管するまで、__CAPGO_KEEP_1__に接続していません。 dist.

Step 1 — Export Your Lovable App to GitHub

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

1. ブラウザでLovableプロジェクトを開きます。
2. クリック アップグレード 必要に応じて右上の Git 左メニューの
3. 選択 GitHubLovableを認可し、自分のアカウントをリンクする
4. Lovableはリポジトリを作成し、アプリを自動でプッシュします。

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

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

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

カーソルのダウンロードとインストール

1. カーソルをダウンロードしてインストールするには カーソル.sh と、自分のオペレーティングシステムのバージョンをダウンロードしてください
2. インストールウィザードに従ってCursorをインストールしてください
3. Cursorをインストールした後は、Cursorを開いてください

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

最良の体験を得るには、Cursorを設定する前に始めてください:

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

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

4. 好みのモデルを選択する — クラウドまたはGPT-4を選択すると最良の結果が得られます:

5. コマンドの実行を許可する — カーソルがコマンドを実行するようにしてください:

Cursorでリポジトリをクローンする

1. Cursorで、 Shift+Command+P (Mac) または Shift+Ctrl+P を使用してコマンドパレットを開く
2. を入力し、を選択 Git: Clone
3. 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

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アプリは http://localhost:8080 または http://localhost:5173 Capacitorライブアップデートの代替

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

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

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

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

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

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

Mac の場合 Command+K Windows の場合 Ctrl+K と尋ねてください:

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

方法 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 その中のルートに

Legacy Next.js Lovable プロジェクト

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

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

または モバイル用にアプリを変換する フルセットアップの詳細はこちら next.config あなたのアプリを__CAPGO_KEEP_0__で実行するのではなく webDir: 'out' in Capacitor instead of dist.

✅ Success: 静的ビルドフォルダが存在します (dist/ または out/Step 5 — __CAPGO_KEEP_0__ とネイティブプラットフォームを追加する index.html.

Capacitor は、リライトなしで実際のiOSとAndroidシェルでWebアプリをラップします。

Capacitor wraps your web app in real iOS and Android shells — no rewrite needed.

Macの場合

Windowsの場合 Command+K AIはアプリ名を尋ねます Ctrl+K __CAPGO_KEEP_0__

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

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ と バンドル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: Cursor AI を使用する (推奨)

Cursor に尋ねる

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

Next.js の静的エクスポートの場合、Cursor に以下を尋ねる out 代わりに。

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

ビルドと同期

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

No CocoaPods needed. Capacitor iOSの依存関係を自動的にSwift Package Managerで8用います。

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

Step 6 — Check Your .gitignore

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

Confirm:

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

✅ 成功: git status 表示 ios/ と android/ コミット可能 (無視されません).

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 Pipelining が必要なくて済みます。 Capgo ビルダー __CAPGO_KEEP_0__ ビルダー

Capgo ビルダー

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

クラウドで iOS と Android のビルドをコンパイル、署名、提出できます。

• Capacitor をセットアップしてください
• Android Keystore Generator
• iOS UDID Finder — iPhoneを開発用ビルドに登録する

See Managing Credentials そして 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

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

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

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

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. ▶️ プレイボタンをクリック — 最初のビルドは 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. クリックして緑の▶️ Run ボタン — 最初のビルドには 5–15 分かかります

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

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

ステップ 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プラグインを提供します。ユーザーはカメラ機能を追加して写真を撮影できます—ブラウザのタブでは信頼できるようにすることはできません。

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 Android <dict>:

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

— 内側に追加する in <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;
}

— add to inside the top-level Capacitor Capgo Builder を通して、デバイスで動作する前に。

✅ Success: カメラ code がコンパイルされ、エラーなしで完了します。 npx cap sync ステップ 12 — __CAPGO_KEEP_0__ Live Updates を追加します。

Step 12 — Add Capgo Live Updates

__CAPGO_KEEP_0__ Live Updates Capgo Live Updates 最初のリリースでアップデーターをインストールしてください。

レビュー待ちにしながら、修正を配信する必要があるときに、いつでもアプリを更新できます。 Add to

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で __CAPGO_KEEP_0__ Live Updatesを__CAPGO_KEEP_1__ Actionsで自動化する 成功: Automate Capgo Live Updates from Lovable with GitHub Actions.

✅ ステップ 13 — Live Updateでステータス バー スペースを修正する Publish notifyAppReady() Automate __CAPGO_KEEP_0__ Live Updates from Lovable with __CAPGO_KEEP_1__ Actions

See __CAPGO_KEEP_0__ Live Updates docs

iPhoneで実際に表示される場合、ヘッダーは時計とバッテリーのステータスバーの下に表示されるかもしれません。Modern __CAPGO_KEEP_0__は端から端まで描画されるため、安全なエリアのインセットを尊重する必要があります。 下 the status bar (clock and battery). Modern Capacitor draws edge-to-edge, so your app must respect 1. 確認: env(safe-area-inset-top), -bottom, -left, -right.

中 pt-62. トップヘッダーの修正

— viewport-fit=cover 使用して、Webのパディングを維持し、ノッチ付きデバイスで拡大します: index.html:

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

CursorまたはLovableで尋ねてください: itemsCount max() items

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

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

pagePath

“モバイルでアプリのコンテンツは、画面上部のステータスバーの下に表示されます。各ページヘッダーの上部の余白に追加します。 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秒待ち、再度アプリを開きます。ヘッダーはステータスバーの下に表示されます — ストアレビューなしで修正されました。

✅ 成功: モバイルでアプリのコンテンツは、画面上部のステータスバーの下に表示されます。

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

Step 14 — Capacitor を使用したモバイル アプリに愛される開発者用アプリを変換する

アプリは作成され、インストール可能で、即時更新が可能です。 公開ストアにアプリを公開することはほとんど書類仕事です:

• アプリ アイコン — iOS では 1024×1024px (透明度なし)、Google Play では 512×512px
• スクリーンショット — Apple は 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 データセキュリティ

Method 1: Using Cursor AI (Recommended)

Set up app icons and splash screens for my Capacitor app

Method 2: Manual Setup

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

Capacitorの「live」までの残り

1. Google Play closed testing (2023年11月13日以降に作成された個人アカウント): 14日連続で少なくとも12人のテスターが存在する場合にのみ、生産環境へのアクセスが許可されます。iOSには同等の機能はありません。
2. レビューに提出 — Apple は 3–5 日、Google は 3–7 日でテスト要件が満たされた後。

See our 初回アプリレビュー ガイド Capacitorで使える開発アプリを愛らしく変換するには、Capacitorを使用して、開発アプリをモバイルアプリに変換するための完全なチェックリストを参照してください。

エラー (とその解決策)

• Could not find the web assets directory: ./dist — Run npm run build 前に npx cap add または npx cap sync… webDir … capacitor.config.ts …dist … out …
• … …
• … 〜Apple App Store ConnectのプロジェクトIDと一致する必要があります。Find-and-replaceを全体に適用してください。 ios/ と android/, コミット、再構築。
• 起動時に白画面が表示される 〜 base: './' Vite configに設定し、再構築し、実行してください。 npx cap sync.
• ステータスバーの下のコンテンツ 〜 viewport-fit=cover と env(safe-area-inset-top) パディングを追加する（ステップ13）。
• デバッグモードで署名されたAPK 〜Google Playはデバッグビルドを拒否します。自分のキーストアで署名されたリリースビルドを使用してください。
• __CAPGO_KEEP_0__ バージョンがすでに存在するため、デプロイが拒否されました

For Capgo Builder issues, see __CAPGO_KEEP_0__ ネイティブビルドのトラブルシューティング と.

ライブアップデートのデバッグ

結論

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

• Capgo Live Updates __CAPGO_KEEP_0__ ライブアップデート
• Capgo Builder — CI でリリースビルドを自動化
• Capgo プラグインディレクトリ — バイオメトリクス、プッシュ通知、位置情報、など
• 関連ガイド Base44 からモバイル · Bolt.new からモバイル

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

リソース

• Lovable ドキュメント
• Capacitor ドキュメント
• Capgo ネイティブビルド
• Capgo — Capacitor アプリのリアルタイム更新
• WindowsからiOSをビルドする
• Next.jsの静的エクスポートによるモバイル対応

Capacitorを用いてiOSおよびAndroidへのアプリの変換を続ける

Capacitorを利用している場合 Convert Your Lovable App to iOS and Android with Capacitor nativeプラグインの作業計画を立てるには、__CAPGO_KEEP_0__プラグインディレクトリと接続する Capgoプラグインディレクトリ Capgoプラグインディレクトリにおける製品ワークフロー Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Capgoプラグインの実装詳細 Capgo Native Buildsの製品ワークフローについて WindowsからiOSをビルドする MacがなくてもクラウドiOSビルドが可能