Skip to main content

Lovableな雰囲気でモバイルアプリを開発

Lovableな雰囲気の開発を実際のモバイルアプリに変える

Lovableは、デモ後、ネイティブシェル、署名、ストアビルド、ポストローンチ修正など、リスクが生じる部分で、アイデアをスクリーンに表示することができます。Capgoは、実際のユーザーに耐えるAIで作成されたアプリにモバイルリリースシステムを提供します。

マーティンから人間のサポートを受ける

1つのGitリポジトリ
LovableからWebアプリのソース
iOS + Android
ネイティブターゲットとCapacitor
OTAチャンネル
ポストローンチのアップデートパス

愛されるプロジェクト

AIが助けた質問と視覚的な編集で、ウェブアプリを迅速に設計して繰り返します。

エクスポートして包み

Capacitorモバイルシェル

GitHubにエクスポートし、Capacitorを追加し、ウェブアプリを製品ソースとして保持します。

ビルドして更新

Capgoリリースループ

ネイティブバイナリをビルドし、ストアで安全なウェブ更新を公開し、リリース後も改善を続けます。

問題

アイデアを実現するには、Vibe codingが必要です。ただし、モバイルにはリリースシステムが必要です。

プロトタイプはブラウザで止まる

愛されるプロジェクトはまだウェブアプリです。ユーザーはインストール可能なアプリ、アイコン、パーミッション、オフライン動作、ディープリンク、ネイティブシェルが必要です。

ネイティブリリースの作業は、ビジュアル化されない

AIはスクリーンを迅速に生成できますが、iOSの署名、Androidのキーストア、App Store Connect、ネイティブプロジェクト、ストアのアップロードには正しいパイプラインが必要です

ストアビルド後、繰り返し作業が遅くなる

最初のバイナリはただの始まりです。オンボーディングの調整、価格のコピーの変更、またはバグの修正は、また一回の完全なアプリレビューを待つ必要はありません

例のスタック

実際に、Lovableがアプリをエクスポートした後は何が起こるか

Lovableでは、プロトタイプを作成することから始めます

Lovableは、ネイティブ作業が始まる前にウェブエクスペリエンスを迅速に作成することに最も適しています: フローの作成、スクリーンの作成、コピーの作成、Supabaseのワイヤリング、そしてプロダクトの繰り返し作業

ウェブアプリをネイティブシェルに変換する

GitHubは真実の源となり、Capacitorはウェブの出力をネイティブのiOSとAndroidプロジェクトにラップし、アプリのアイデンティティ、アイコン、スプラッシュスクリーン、パーミッションを含みます

一度リリースし、繰り返し作業

Capgoは署名されたバイナリを生成し、ストアの承認後もUIの修正、コピーの変更、オンボーディングの調整、資産の更新が可能です

具体的な例

実用的なコマンドパス

Lovableのプロジェクトは、生成されたWebアプリをGitHubにエクスポートし、静的ビルドに適合するようにし、Capacitorでラッピングし、Capgoを使用してビルドおよび更新します。

# From the GitHub repo exported by Lovable
npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
npx cap init "Your Lovable App" "com.company.app"
npx cap add ios
npx cap add android

# Build web output, sync native projects, and ship updates
npm run build
npx cap sync
npx @capgo/cli@latest init
npx @capgo/cli@latest bundle upload --channel production

# When you need a signed binary
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build request --platform ios

LovableのAIプロンプト

Lovable内でモバイルリリース設定を開始

Webアプリが動作する後、Lovableに貼り付けてください。エージェントに、MCPのオンボーディングパスを使用してCapacitorとCapgoを準備するように指示します。

LovableのAIプロンプト

I want this Lovable project to become a Capacitor mobile app using Capgo from the start.

Set up the project so an AI agent can use Capgo's MCP release tools through install-mcp:

1. Install the Capgo CLI MCP server for the active AI client. For Codex, run:
   - npx @capgo/cli@latest login
   - npx install-mcp 'npx @capgo/cli@latest mcp' --client codex
   Replace codex with cursor, claude-code, gemini-cli, or windsurf if that is the client this project uses.
2. Read Capgo's public MCP metadata when tool details are needed:
   - https://capgo.app/.well-known/mcp/server-card.json
   - https://capgo.app/.well-known/agent-skills/capgo-cli-mcp/SKILL.md
3. Add a short docs/agent-mobile-release.md file that tells the agent to use the Capgo CLI MCP server as a local stdio server, not a remote HTTP endpoint.
4. Add Capacitor for iOS and Android using the package manager already used by this project.
5. Configure capacitor.config.ts with:
   - appName: the current Lovable app name
   - appId: a production-style bundle ID I can edit later, such as com.company.app
   - webDir: the production build output folder
   - plugins.CapacitorUpdater.defaultChannel: production
6. Install and configure @capgo/capacitor-updater.
7. Add package scripts for:
   - building the web app
   - syncing Capacitor
   - uploading a production Capgo bundle
   - starting Capgo Builder setup for iOS
   - requesting an iOS cloud build
8. Create a first production channel plan:
   - production for users
   - preview for stakeholder review
   - staging for internal testing
9. Keep normal docs and README commands copy-pasteable with npm/npx unless this project already uses another package manager. Keep the Capgo MCP install command exactly as shown above.
10. Do not fake native signing credentials. Leave clear TODOs for the Capgo API key, Apple team details, and bundle ID.
11. After making changes, summarize exactly what changed and what command I should run next.

ソリューション

AI WebアプリからモバイルリリースまでのCapgoパス

買い手はきれいなデモが欲しくありません。顧客がインストール、更新、信頼できるアプリを利用できるようにしたいです。Capgoはリリース層を提供し、Lovableは所有を試みません。

生成されたアプリをGitに保持する

GitHub から Export することで、アプリは実際の真実のソース、レビュー可能な変更、CI または Builder へのパスを持つようにします。

モバイル用に作成

Capacitor の静的出力、 webDir、App ID、アイコン、スプラッシュ画面、パーミッション、ネイティブプロジェクトを設定

Capgo でビルド

Capgo Builder を使用して、iOS と Android の署名済みビルドを作成することができます。プロジェクトをネイティブツールマラソンに変える必要はありません。

ライブアップデートで継続してリリース

Capgo チャンネルを使用して、生産、ステージング、プレビューの変更を実行して、Web の修正とアセットをインストールされたバイナリの後で動作させることができます。

リリースパス

AI で作成されたアプリ用の実用的リリースパス

目標は、リリース後に使用できるモバイル リリース ループを作成することです。

1

アプリをエクスポート

Lovable を GitHub に接続し、プロジェクトをクローンし、生産用の Web ビルドがローカルで動作することを確認する

2

nativeシェルを作成

Capacitorを追加し、appのアイデンティティを設定、実機で初回の同期を実行し、コア画面を検証します。

3

ビルドと署名

署名済みバイナリ用にCapgoビルダーを使用し、ランダムなノートブックやスクリーンショットからシークレットを除外します。

4

リリースと反復

バイナリを一度だけ公開し、UI、コピー、CSS、アセット、安全なJavaScript変更用にCapgoライブアップデートを使用します。

ユーザー信号

顧客ポイントは簡単です: Lovableはプロトタイプを作成可能にしましたが、Capgoはそれが製品のように感じさせました。リリースループは、最初のストアビルド後もアプリを存続させるものです。

Lovableからモバイルへの共通フィードバック

Capacitorで作成されたアプリ

テンプレートと学習製品は、自然なモバイル候補です。

作成と学習アプリは、パッケージング、署名、更新をきれいに管理することで、ウェブスタイルのフローをストア用に準備できることを示しています。

アプリタイプ
ウェブからモバイル
ストアカテゴリ
イベント、教育、教育
ソース
パブリックストアデータセット
招待カードデザインアプリアイコン

イベント

招待カードデザイン

テンプレートドライバーデザインフローは、レスポンシブウェブから自然にモバイルにマップします。

20.0M インストール 4.6 評価
Google Play リストを表示
無限の日本語アプリ アイコン

教育

無限の日本

小さなレッスンとオンボーディングの改善が積み重なる集中学習アプリ。

1.8M インストール 4.6 評価
Google Play リストを表示
StudySmarter - 学校 & 大学アプリ アイコン

教育

StudySmarter - 学校 & 大学

アプリパッケージング後もウェブ製品の改善が続く学習フローアプリ。

6.5Mのインストール 4.8の評価
Google Playのリストを表示

ユーザーがインストールできるアプリにプロトタイプを変換する

Lovableを使用してスピードを向上させ、Capacitorを使用してネイティブシェル、Capgoを使用してビルド、ライブアップデート、リリース管理

マーティンから人間のサポートを受ける