Skip to main content

モバイルアプリ開発の楽しい世界へ

モバイルアプリを実現する楽しい世界へ

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

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

愛されるプロジェクト

AIアシストされたプロンプトとビジュアルエディットでウェブアプリを迅速に設計してイテレート

エクスポートしてラッピング

Capacitorモバイルシェル

Export to GitHub, add Capacitor, and keep the web app as the product source.

ビルドアップデート

Capgoリリースループ

リリース後、ネイティブバイナリをビルド、ストアセーフなウェブアップデートを公開し、改善を続ける

問題

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

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

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

ネイティブリリースの作業はVibe coding で消されるわけではない

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

ストアのビルド後、イテレーションは遅くなる

最初のバイナリはただの始まり。オンボーディングの調整、価格のコピーの変更、またはバグの修正は、また別のフルアプリレビューを待つ必要はなくてはならない

例のスタック

Lovable がアプリをエクスポートした後の実際の流れ

Lovable で製品をプロトタイプする

Lovable はウェブエクスペリエンスを迅速に作成することに最適: フロー、スクリーン、コピー、Supabase のワイヤリング、そしてネイティブワークが始まる前に製品のイテレーション

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

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

一度リリースし、繰り返し改善

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 はリリース層を提供する。

__CAPGO_KEEP_0__ を保持してください。

Lovable から GitHub にエクスポートして、アプリが実際のソース、レビュー可能な変更、CI または Builder へのパスを持つようにしてください。

モバイル用に準備する

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

Capgo でビルド

Capgo Builder を使用して、ネイティブ ツールのマラソンにプロジェクトを変えずに、署名済みの iOS と Android ビルドを作成

ライブ アップデートで継続して発送

Capgo チャンネルを使用して、生産、ステージング、プレビューの変更を実行して、ウェブの修正とアセットがインストールされたバイナリ後に動作するようにしてください。

リリース パス

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

目標は別のチュートリアルのみのプロジェクトではありません。リリース後も使用できるモバイルリリースループです。

1

アプリをエクスポート

GitHubにLovableを接続し、プロジェクトをクローンし、ローカルでプロダクションウェブビルドが正常に動作することを確認してください。

2

ネイティブシェルを作成

Capacitorを追加し、アプリのアイデンティティを設定し、初回の同期を実行し、実機でコアスクリーンを検証してください。

3

ビルドと署名

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

4

リリースと反復

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

ユーザー信号

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

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

Apps built with Capacitor

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

__CAPGO_KEEP_0__で作成された学習アプリは、パッケージング、署名、更新をきれいに管理することで、ウェブスタイルのフローをストア用のモバイルエクスペリエンスに変えることができます。

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

イベント

招待状メーカー カード デザイン

テンプレート駆動の設計フローは、自然にレスポンシブウェブからモバイルまでマップします。

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

教育

無限の日本語

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

180万のインストール 4.6の評価
Google Playのリストを表示
StudySmarter - 学校&uniアプリアイコン

教育

StudySmarter - 学校 & 大学

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

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

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

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