Capacitor を使って Lovable アプリを iOS と Android に変換する方法

はじめに

Lovable Lovable は、プロンプトから動作する React アプリを数分で生成する AI アプリビルダーです。ブラウザ上での高速なリリースは可能ですが、もし他のネイティブアプリのように、App Store や Google Play に公開してホーム画面に配置したい場合はどうすればよいでしょうか？

要約: the ページでは、 エクスポート、Capacitor、Macなしでのクラウドビルド、そしてLive Updateまで、全工程を1画面にまとめています。

このガイドでは、Lovableからのエクスポート、ウェブアプリを Capacitorでラップし、 Capgo Builder Native Build V2 Native Build V2 ビルド を使用してクラウド上でiOS/Androidの署名済みバイナリをビルド（Mac不要）、ネイティブ機能の追加、そして Capgo Live Updates.

を使用して、 Cursor を全編で使用しています。手動での入力が面倒な場合は、AIにほとんどのターミナルコマンドを実行させることも可能です。

所要時間: 初回は1〜2時間ほどかかります。主にアカウント設定とクラウドビルドの待ち時間です。

完了時には、以下の状態になります：

• クラウドからビルドされたiOS/Androidネイティブアプリ（XcodeやAndroid Studioは不要）
• 実機でのアプリ動作（TestFlight、直接インストール、またはPlay internal testing）
• ネイティブアプリならではのカメラ機能の実装
• ストア審査なしでUIやCSSの修正を配信できるLive Updatesの設定完了

前提条件

コスト (公開時のみ):

任意 (ローカルシミュレータのみ):

どちらもスキップ可能です。本ガイドのメイン手順では、クラウドでビルドを行い、これらを使わずに実機へインストールします。

Lovableとフレームワークに関する注意点

codeを触る前に、以下の点を知っておいてください： Lovableが生成するウェブアプリの種類によって、モバイルへのラップ方法が変わります。.

長らく、Lovableのデフォルトは React + Viteのシングルページアプリケーション (SPA)でした。2026年5月現在、最新のLovableアプリでは TanStack Startはデフォルトでサーバーサイドレンダリング (SSR) をサポートしています。 SSRはWebには最適ですが、Capacitor がラップするのは、 静的ビルド です。つまり、HTML、CSS、JavaScriptのフォルダで、 index.html がルートにあり、デバイス上のアプリ内に同梱されるものです。

SSRアプリは、リクエストごとにページをレンダリングするサーバーを必要とします。スマホの中にサーバーはないため、Capacitor では 静的なクライアントサイドレンダリングの出力.

手順:

• 最初からやり直す場合: Lovableに以下を依頼してください： シングルページアプリケーション (SPA) または、SSRをスキップして静的なビルドを取得するように指示します。 dist/ フォルダです。
• TanStack Start (SSR) を使用している場合: プリレンダリングまたは静的SPAとして出力するように設定してください。唯一の必須条件は、以下の内容を含む静的なビルドフォルダを用意することです。 index.html.
• 従来の Next.js Lovable プロジェクト: 使用するのは 静的エクスポート — 出力先は out/ ではなく dist/.

どのフレームワークを使用している場合でも、Capacitor の webDir そのフォルダを指定してください。Vite SPA の場合、そのフォルダは dist.

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

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

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

✅ 成功: アクセス中: github.com/YOUR-USERNAME/your-app アプリの code を表示しています。

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

code をローカルで扱うには、code エディタが必要です。おすすめは Cursorです。これはターミナルコマンドを自動実行できる AI 搭載エディタです。

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

1. こちらにアクセス: cursor.sh お使いのOS用のバージョンをダウンロードします
2. インストールウィザードに従ってCursorをインストールします
3. インストール後、Cursorを開きます

AI開発用にCursorを設定する

最適な環境で利用するために、開始前にCursorを設定しておきましょう：

1. Cursorプランを購入 — Cursorには無料プランもありますが、Proプラン（月額$20）ではAIによる補完が無制限になり、ClaudeやGPT-4へのアクセス、コマンド実行が可能になります
2. Cursorの設定を開くには、 次を押します Command+, (Mac) または Ctrl+, (Windows)

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

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

5. コマンド実行を許可 — Cursorがコマンドを実行できるようにします:

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

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

5. Cursor がプロジェクトを Clone して開きます

ステップ 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を実行し、次のコマンドでdevサーバーを起動します： 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 — ターミナルに表示されたアドレスを使用してください。

Press Ctrl + C を押すと、開発サーバーを停止して次に進めます。

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

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

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

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

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

次に Command+K (Mac) または Ctrl+K (Windows) を押して、以下のように指示してください:

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 のルートに作成されます。

レガシーな 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.js アプリをモバイルに変換する の完全な next.config 手順に従い、次に webDir: 'out' の代わりに Capacitor を使用してください dist.

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

ステップ 5 — Capacitor と Native Platforms の追加

Capacitor は、既存の Web アプリを書き換えることなく、本物の 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 が アプリ名 と bundle 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 の static export の場合、以下を使用するように指示してください: 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

CocoaPodsは不要です。 Capacitor 8では、iOSの依存関係にSwift Package Managerを自動的に使用します。

✅ 成功: ios/ と android/ フォルダが表示され、ターミナルに以下が表示されます： Sync finished.

Step 6 — Check Your .gitignore

Capgo BuilderはGitリポジトリからビルドするため、 ios/ と android/ コミットする必要があります。よくあるミスは、リポジトリのルートにあるこれらを無視してしまうことです。

確認:

• ルート .gitignore 無視します node_modules と dist （クラウドが再ビルドするのは dist ウェブビルド中）
• ios/ と android/ 自体は プッシュされません 無視されます

✅ 成功: git status が表示される ios/ と android/ コミット可能です（無視されていません）。

ステップ 7 — コミットとプッシュ

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

✅ 成功: GitHub リポジトリには次の ios/ と android/ フォルダが表示されます。

ステップ 8 — Capgo Builder でストア用バイナリをビルド

リリースに Mac やローカルの Xcode/Android Studio パイプラインは不要です。 Capgo Builder Native Build V2 Native Build V2 ビルド 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

署名情報は一度保存するだけです。生成にサポートが必要な場合は、以下の無料ツールをご利用ください：

• iOS 証明書ジェネレーター
• Android Keystore ジェネレーター
• 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

✅ 成功: 署名済みのビルドが完了し、実機にインストールできる状態であること。

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

Macをお持ちの場合、またはクラウドビルドの前にエミュレータでテストしたい場合:

iOSの場合

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

Open the iOS project in Xcode

方法 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. Device Managerでエミュレータを作成（例: Pixel 6, API 33以上）
3. 緑色の ▶️ Run ボタンをクリックしてください — 初回のビルドには 5〜15 分かかります

日常的なデバッグにはローカルの IDE を使用してください。また、 Capgo Builder Native Build V2 Native Build V2 ビルド 署名済みのリリース用バイナリが必要な場合は、

✅ 成功: シミュレーターまたはエミュレーターでアプリが起動し、Lovable のコンテンツが表示されます。

ステップ 10 — Live Reload を有効にする (開発用)

ネイティブシェルをローカルの開発サーバーに向けることで、イテレーションを高速化できます。

方法 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 — Native Feature の追加: カメラ

Capacitor プラグインを使用すると、JavaScript からデバイスのネイティブ機能にアクセスできます。今回は、ブラウザのタブでは確実に行えない「写真撮影」を実現するために、Camera プラグインを追加します。

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

Cursor への指示内容:

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

プラグインの追加には、 新しい Native Build が必要です デバイスで動作させる前に、Capgo Builderを通じて行います。

✅ 成功: Camera code のコンパイルが完了し、 npx cap sync エラーなく終了します。

ステップ 12 — Capgo Live Updates の追加

通常、ネイティブコードの変更は App Store の審査が必要です。 Capgo Live Updates アプリのウェブレイヤー（HTML, CSS, JS, 画像）への変更を、数分で OTA 送信できます。

最初のリリースでアップデーターをインストールしてください 修正プログラムを急ぎでリリースしたい時に、審査待ちで足止めを食らうことがなくなります。

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();

Commit、pushを行い、新しいCapgo Builderのビルドを実行して、SDKをネイティブシェルに組み込みます。

リリース後にWeb bundleをuploadするには：

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

詳細は Capgo Live Updates ドキュメント.

クリックするたびにこのuploadを自動化するには、 公開 Lovableで次のように設定してください： GitHub Actionsを使用して、LovableからCapgo Live Updatesを自動化する.

✅ 成功: Updaterプラグインがインストールされ、 notifyAppReady() 起動時に実行されるようにします。

ステップ 13 — Live Updateを使用してステータスバーの余白を修正する

実際のiPhoneでは、ヘッダーが の下に ステータスバー（時計やバッテリー）と重なることがあります。最新の Capacitor はエッジ・トゥ・エッジ表示になるため、アプリ側で セーフエリアのインセットを考慮する必要があります。: 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() 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の修正なので、Native Buildは不要です：

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 bundleの適用後、コンテンツがステータスバーに被らなくなります。

より詳細なレイアウトについては、こちらを参照してください： @capgo/tailwind-capacitor と Capacitor のedge-to-edge表示.

ステップ 14 — ストア掲載情報の準備

アプリのビルドとインストールが完了し、即時アップデートも可能です。公開ストアへのリリースは、主に以下の事務作業が中心となります：

• アプリのアイコン — iOS用 1024×1024px（透過不可）、Google Play用 512×512px
• スクリーンショット — Appleは iPhone 6.9インチ (1320×2868px) のスクリーンショットを必須としています
• アプリ名、サブタイトル、説明文、キーワード
• プライバシーポリシーのURL — 無料アプリであっても、両ストアで必須となります
• 年齢制限 — 各コンソールでのアンケート回答
• データ収集に関する開示事項 — Appleのプライバシー・栄養成分ラベルとGoogleのデータセーフティについて

方法 1: Cursor 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日以降に作成された個人アカウント): 本番環境へのアクセス前に、少なくとも12人のテスターによる14日間連続のテストが必要です。iOSには同様の要件はありません。
2. 審査へ提出 — Appleは約3〜5日、Googleはテスト要件を満たした後、約3〜7日です。

詳細は当社の 初回アプリ審査ガイド の完全なチェックリストをご覧ください。

よくあるエラーと解決策

• Could not find the web assets directory: ./dist — 実行 npm run build 前に npx cap add または npx cap sync. 確認してください webDir 内の capacitor.config.ts がフレームワークの出力と一致しているか (dist Vite の場合、 out Next.js の static export の場合)。
• 「この App ID … は利用できません」 — Bundle ID は世界中で一意である必要があります。自身が所有するリバースドメイン形式の ID を選択してください。
• Bundle ID の変更後に iOS のビルドが失敗する — ネイティブプロジェクトのIDは、Apple App Store Connectと一致している必要があります。一括置換を行い、 ios/ と android/コミット、再ビルドを行ってください。
• 起動時に画面が白くなる場合 — Viteの設定で base: './' を設定し、再ビルドして npx cap sync.
• ステータスバーとコンテンツの重なり — 次の viewport-fit=cover と env(safe-area-inset-top) パディングを追加してください（ステップ13）。
• デバッグモードで署名されたAPK — Google Playではデバッグビルドは拒否されます。キーストアで署名したリリースビルドを使用してください。
• デプロイが拒否されました — すでに同じバージョンが存在します — ネイティブプロジェクトのバージョン/ビルド番号を更新して再ビルドしてください。

Capgo Builderに関する問題については、以下を参照してください： Native Build トラブルシューティング と Live Updates のデバッグ.

まとめ

LovableのWebアプリをiOSとAndroidのネイティブアプリへ昇華させました。Macなしでクラウド上でビルドし、カメラ機能の実装や、OTAによるレイアウト修正まで完了。最も困難なプロセスはすでにクリアしています。

次のステップ

• Capgo Live Updates — ストアの審査を待たずに、UIや文言の修正を即座にリリース
• Capgo Builder Native Build V2 Native Build V2 ビルド — CIでのリリースビルドを自動化
• Capgo プラグインディレクトリ — 生体認証、プッシュ通知、位置情報など
• 関連記事: Base44をモバイル化 · Bolt.newをモバイル化

Capgo の無料アカウントを作成 して、Live Updatesとクラウドネイティブビルドを有効にしましょう。

リソース

• Lovable ドキュメント
• Capacitor ドキュメント
• Capgo Native Build
• Capgo — Capacitor アプリ向け Live Updates
• Windows から iOS をビルドする
• モバイル向けの Next.js static export

Capacitor で Lovable アプリを iOS と Android に変換する の続き

以下を使用している場合： Capacitor で Lovable アプリを iOS と Android に変換する ネイティブプラグインの作業を計画するには、それを以下と連携させる Capgo プラグインディレクトリ Capgo プラグインディレクトリでのプロダクトワークフロー向けに、 Capgo による Capacitor プラグイン Capgo による Capacitor プラグインの実装詳細については、 Capgo Native Build Capgo Native Builds のプロダクトワークフローに、 Windows から iOS をビルド Mac なしでクラウドから iOS ビルドを行うために。