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

導入

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

このガイドでは、Lovableからエクスポートし、 Capacitorクラウドで署名済みiOSおよびAndroidバイナリをビルドする Capgo ビルダー (Macが必要ない)、実際のネイティブ機能を追加し、オンデマンドでレイアウトを修正する Capgo ライブアップデート.

「Cursor」を使用しています—AIは、ターミナルコマンドを手動で入力するのを避ける場合は、ほとんどのコマンドを実行できます。 必要な時間: 約1–2時間で初めて、主にアカウント設定とクラウドビルドの待機

最終的に、次のことが実現します: クラウドからネイティブのiOSおよびAndroidアプリを構築—XcodeまたはAndroid Studioはメインパスではありません

We use

• Cursor
• __CAPGO_KEEP_0__
• 実機で動作するアプリ (TestFlight、直接インストール、またはPlay 内部テスト)
• ネイティブアプリしか実現できないカメラ機能

UIとCSSの修正がストアのレビューなしで配信されるLive Updates

公開に限り発生するコスト

Optional (local simulator only):

両方をスキップできます。このガイドの主なパスでは、クラウドでビルドし、実機にインストールしますが、エミュレータは必要ありません。

フレームワークと愛すべきものについての注意

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

長い間、Lovableのデフォルトは React + Viteのシングルページアプリケーション (SPA) でした。2026年5月以降、新しいLovableアプリは TanStack Startをサーバーサイドレンダリング (SSR) で使用することをデフォルトとしています。 SSRはウェブでは素晴らしいですが、Capacitorは 静的ビルドをラップします。 つまり、HTML、CSS、JavaScriptのフォルダです。 index.html __CAPGO_KEEP_0__

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

何をするか：

• 新しく始める： Lovableから 単一ページアプリケーション (SPA) を要求する または、SSRをスキップして静的SPAを取得するように求める dist/ 既存のTanStack Start (SSR) を使用している場合：
• 静的SPAを事前にレンダリングしたり、静的SPAを出力するように設定する。唯一の厳密な要件は、静的ビルドフォルダが含まれていることです。 Next.js Lovableの古いプロジェクト： index.html.
• __CAPGO_KEEP_0__ Use static export — out/ instead of dist/.

Whatever framework you use, point Capacitor’s webDir at that folder. For a Vite SPA, that folder is dist.

Step 1 — Export Your Lovable App to GitHub

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

1. Open your Lovable project in the browser
2. Click Upgrade (top-right) if needed, then open Git 左側のメニュー
3. 選択 GitHubLovableを認可し、口座をリンク
4. Lovableはアプリを自動でリポジトリを作成し、プッシュ

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

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

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

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

1. Visit cursor.sh とあなたのOSのバージョンに合ったバージョンをダウンロードしてください。
2. Cursor をインストールする
3. インストールウィザードに従ってCursorをインストールしてください。

Configure Cursor for AI Development

AI開発用にカーソルを設定する

1. Buy a Cursor Plan — カーソルは無料のレベルを提供していますが、プロプラン（$20/月）は、無制限のAI完了、ClaudeとGPT-4へのアクセス、コマンド実行を提供します
2. Open Cursor Settings by pressing Command+, (Mac) or Ctrl+, (Windows)

3. Enable AI Models — AI機能が有効になっていることを確認してください

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

5. コマンドの実行を許可 — カーソルを使用してコマンドを実行するには、カーソルを有効にします:

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

1. カーソルで、 Shift+Command+P (Mac)または Shift+Ctrl+P (Windows)を押してコマンドパレットを開きます
2. 「clone」と入力し、「Git: Clone」を選択してください cursor
3. リポジトリのURLをGitHubに貼り付けてください。 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 __CAPGO_KEEP_0__ __CAPGO_KEEP_0__
2. __CAPGO_KEEP_0__を実行してください
3. Open terminal and run:

cd your-lovable-app
npm install
npm run dev

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

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

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

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

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

React + Vite (最も愛されるアプリ)

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

クリック Command+K (Mac) または Ctrl+K (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 のルートにあります

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.

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

Capacitor は、実際のiOSとAndroidシェルでウェブアプリをラップします — 再構築は必要ありません。

Method 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 com.yourcompany.myapp).

Method 2: 手動インストール

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

When prompted:

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

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に__CAPGO_KEEP_0__を使用するように指示してください out __CAPGO_KEEP_0__

Method 2: Manual Configuration

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/ and android/ フォルダが表示され、ターミナルに表示されます Sync finished.

Step 6 — チェック .gitignore

Capgo ビルダーは、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/ フォルダ。

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

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

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

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

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

— iOS証明書を生成する 資格情報の管理 と 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: Xcode または Android Studio でローカルにテストする

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

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: カーソル 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ビルダー 署名リリースバイナリが必要なときは。

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

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

ローカル開発サーバーへのnativeシェルの指示によって、開発の反復を高速化します。

方法 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 __CAPGO_KEEP_0__が表示されます。

3. 変更を適用する:

npx cap copy

✅ 成功: codeのWebエディターの変更は、デバイスまたはシミュレータで即時反映されます。

ステップ 11 — ネイティブ機能を追加する:

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.

カメラ プラグインは、JavaScript が実機の機能を呼び出すことを可能にします。ユーザーはカメラ機能を使用して写真を撮影できます。ブラウザのタブでは、信頼できる写真撮影はできません。

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

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

Cursor に伝えます:

npm install @capacitor/camera
npx cap sync

方法 2: 手動インストール — ios/App/App/Info.plist inside the top-level <dict>:

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

Android — <manifest> in 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;
}

Adding a plugin requires a fresh native build through Capgo Builder before it works on devices.

✅ Success: Camera code compiles and npx cap sync finishes without errors.

ステップ 12 — Capgo ライブ更新を追加する

通常、ネイティブの変更はアプリストアのレビューを通過する必要があります。 Capgo ライブ更新 __CAPGO_KEEP_0__ ライブ更新は、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 ビルダー ビルドを実行して、アップデーター SDK がネイティブシェルにインストールされるようにする

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

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

詳細はこちら Capgo ライブ更新のドキュメント.

✅ Success: アップデート プラグインがインストールされ、起動時に実行されます。 notifyAppReady() Step 13 — ステータス バーのスペースをライブ アップデートで修正する

実際のiPhoneで、ヘッダーは時計とバッテリーのステータス バー下に表示されます。

モダン__CAPGO_KEEP_0__はエッジをエッジまで描画するので、アプリはセーフ エリア インセットを尊重する必要があります。 多くのLovableアプリは下のインセットをすでに処理していますが、固定のトップ パディング (例えば、) を使用し、上のインセットを使用していません。 the status bar (clock and battery). Modern Capacitor draws edge-to-edge, so your app must respect in: env(safe-area-inset-top), -bottom, -left, -right.

Many Lovable apps already handle the bottom inset but use fixed top padding (like pt-6) without the top inset.

1. Confirm viewport-fit=cover in index.html:

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

2. ヘッダーを修正する — max() web のパディングを維持し、 notch デバイスで拡大する:

/* 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()を追加し、既存のパディングを最小限に抑える

3. オーバー・ザ・エアで修正を配信する —

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

純粋な CSS、ネイティブの再構築が必要ない:

✅ デバイスでアプリを強制終了し、再度開き、約 15–30 秒待ち、再度開き。ヘッダーはステータスバーの下に位置する — 修正がストアのレビューなしで実行される。 成功:オーバー・ザ・エアのバンドルが適用された後、ヘッダーはステータスバーをクリアする。

より深いレイアウト作業については @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 人のテスターがアクセスできるようになる
2. iOS は同等のものを持っていない — Apple ~3–5 days, Google ~3–7 days after testing requirements are met.

See our 初心者向けアプリレビューガイド for the full checklist.

よくあるエラー (とその解決方法)

• 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 for Next.js の静的エクスポート用。
• “この App ID … は利用できません” — Bundle ID はグローバルに一意です。コントロールする逆ドメイン ID を選択してください。
• iOS ビルドが Bundle ID を変更した後で失敗する — 自然のプロジェクトの ID は Apple App Store Connect と一致する必要があります。Find-and-replace で全体に適用してください。 ios/ 、コミット、再構築。 android/起動時に白い画面が表示される
• — Set Vite の設定で、再構築し、実行してください。 base: './' ステータスバーの下のコンテンツ npx cap sync.
• — Add __CAPGO_KEEP_0__ viewport-fit=cover そして env(safe-area-inset-top) パディング（ステップ13）。
• デバッグモードで署名されたAPK — Google Playはデバッグビルドを拒否します。リリースビルドで自分のキーストアで署名してください。
• デプロイが拒否されました — バージョンがすでに存在します — ネイティブプロジェクトのバージョン/ビルド番号を上げて再構築してください。

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

結論

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

次のステップ

• Capgo Live Updates — アプリ内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_KEEP_0__ プラグイン ディレクトリと接続する Capgo プラグイン ディレクトリ 製品ワークフローについての Capgo プラグインディレクトリ Capacitor プラグインは Capgo によって提供されます。 実装詳細についての Capacitor プラグインは Capgo によって提供されます。 Capgo ネイティブビルド 製品ワークフローについての Capgo ネイティブビルド、 WindowsからiOSをビルドする MacがなくてもクラウドiOSビルドが可能です。