Base44からネイティブモバイルアプリにCapacitor

導入

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__は、パラメーターからフルレアクトアプリケーションを生成するAIパワードアプリビルダーです。ブラウザで機能する製品を迅速に配信できますが、iOSとAndroidに配信したい場合はどうすればいいでしょうか。このチュートリアルでは、Base44プロジェクトをエクスポートし、__CAPGO_KEEP_0__でNativeモバイルアプリに変換する方法を紹介します。 Capacitor, そして署名済みのストアバイナリを配信する Capgo ビルダー — iOS に対しては Mac が必要ありません。

このガイドの終わりまでに、Base44 アプリは iOS と Android でネイティブに実行され、カメラ、ストレージ、プッシュ通知などのデバイス機能にアクセスできます。

前提条件 & 時間の見積もり

初回設定の場合、時間が必要です: 2-4 時間

システム要件:

iOS クラウドビルドの場合: Capgo ビルダーを搭載した任意の OS (Windows、Mac、または Linux)
Android クラウドビルドの場合: 任意の OS
Storage: 10GBの無料スペースが依存関係とビルドアーティファクト用に提供されます
RAM: 8GBの最小

Costs:

Base44 export: Builder プランまたは上位 ( GitHub エクスポートと ZIP ダウンロードの場合)
iOS App Store: 1 年間 $99 (Apple Developer アカウント)
Android Play Store: 1 回 $25 (Google Play Developer)
Cursor Pro¥200/月 (推奨のオプション)

必要なソフトウェア:

Node.js 18+
code エディターのいずれかカーソル

Base44 アプリをモバイルに変換する理由

拡大した範囲: モバイルアプリのネイティブなアイコンでユーザーに会う、ブラウザのタブではありません
ネイティブ機能: カメラ、GPS、バイオメトリクス、オフラインストレージを Capacitor プラグインで利用
アプリストア配信: Google Play と Apple App Store で配信
高速化の反復: Capgo Live UpdatesとCapgo Builderを組み合わせて、ウェブ層の修正を行うことができます。毎回ネイティブバイナリを再構築する必要はありません。

ステップ 1: Base44 プロジェクトをエクスポートする

Base44では、Builder プランまたは上位のプランに切り替えると、codeを1度だけエクスポートすることができます。 2つの主なオプションがあります。オプション A: __CAPGO_KEEP_0__にエクスポートする (推奨)

Option A: Export to GitHub (Recommended)

上部バーの__CAPGO_KEEP_0__アイコンをクリックします。
アプリケーションにアクセス許可を求めます。 Option B: Export to GitHub You can also export your project directly to __CAPGO_KEEP_0__
Step 2: __CAPGO_KEEP_0__ Setup Base44 Builder とアプリケーションリポジトリを作成または接続する
Base44はアプリケーションcodeをGitHubに自動でsyncします(サポートされているプランでは両方向sync)

詳細は Base44GitHub統合ドキュメントを参照してください。

オプションB: ZIPファイルとしてダウンロード

クリック Code を上部バーでファイルブラウザを開く
クリック プロジェクトをZIPファイルとしてエクスポート 右上隅のcodeビュー
コンピューター上でアーカイブを展開してください

Cursorプロジェクトを開いてください

Visit cursor.sh Cursorをインストールしてください
Clone your GitHub repo (Git: Clone コマンドパレットから）またはZIPファイルを展開して ファイル>フォルダを開く

Cursorを起動してください

AIアシストされたワークフローを最適化するには、Cursor設定で好みのモデルを有効にしてコマンド実行を許可してください。設定方法は、愛すべきモバイルガイド.

Step 2: 開発環境を設定する

Base44は標準のReactプロジェクトをエクスポートします。依存関係をインストールし、開発サーバーが正常に動作することを確認してください。

Cursor AIを使用する (推奨)

Press Command+K (Mac) または Ctrl+K (Windows) と尋ねてください:

Install Node.js if needed, install project dependencies, and start the dev server

手動設定

cd your-base44-project
npm install
npm run dev

Base44アプリがローカルに実行されている

Base44アプリが正常にロードされるべきは http://localhost:5173 (Vite) またはターミナルに表示されているポート

Step 3: 製品ビルドを準備する

Capacitorは静的Webアセットが必要です。Base44 Reactアプリは通常、Viteを使用し、出力先を dist/.

モバイル用にViteを設定

Cursorを尋ねて:

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

または手動で vite.config.ts 手動で:

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 Base44ビルド出力

ステップ4: __CAPGO_KEEP_0__をBase44プロジェクトに追加する

Step 4: Add Capacitor to Your Base44 Project

マニュアルインストール

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

Step 4: __CAPGO_KEEP_0__をBase44プロジェクトに追加する

npm install -D @capacitor/cli
npm install @capacitor/core @capacitor/ios @capacitor/android

npx cap init "Your Base44 App" com.yourcompany.yourapp --web-dir dist
npx cap add ios
npx cap add android

Capacitor の初期化 (Base44 アプリ用)

Commit する ios/ と android/ フォルダを git に追加する。 Capgo ビルダーは、そのディレクトリ内のものをコンパイルする。

ステップ 5: Capacitor の設定

更新 capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Base44 App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
}

export default config

早期に追加して、リリース後は OTA の更新を実行できるようにすることを検討する。 @capgo/capacitor-updater See Capgo Live Updates ドキュメント.

ステップ 6: ビルドと Sync

ウェブアプリを変更するたびに:

npm run build
npx cap sync

Capacitor の Sync が完了しました (Base44 アプリ用)

Step 7: Capgo でビルド用のストア用バイナリを作成してください (推奨)

シミュレータのテストは任意です。テストフライト、内部テスト、ストアの提出には Capgo ビルダー __CAPGO_KEEP_0__ ビルダーを使用して、クラウドでネイティブバイナリをコンパイルして署名してください。

Capgo ビルダーはBase44アプリのためになぜ必要なのか?

Macは必要ありません。iOS用に — WindowsまたはLinuxからビルドしてください
CLI はあなたのAIエージェントが実行できるようにする — Base44 → GitHub → カーソルまでのvibeコーディングワークフローに合致
__CAPGO_KEEP_0__ ビルダーとライブアップデートを組み合わせてください — UIを修正し、オンエアでコピーしてください。プラグインまたはパーミッションが変更された場合にのみネイティブを再構築してください

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度保存してください。詳しくは資格情報の管理と WindowsからiOSをビルドする.

クラウドビルドを要求する

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.yourapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.yourapp --platform android --build-mode release

ビルドログはターミナルで流れます。App Store Connectが設定されている場合、iOSビルドは自動的にTestFlightにアップロードできます。

OTA更新用にWebバンドルをアップロードする:

npx @capgo/cli@latest bundle upload --channel production

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

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

npx cap open ios      # Xcode + iOS Simulator
npx cap open android  # Android Studio + emulator

XcodeがBase44 Capacitor プロジェクトを開く

ローカルIDEを使用して日常のデバッグを行う。使用 Capgo Builder 署名リリースバイナリが必要な場合。

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

Base44アプリをデバイス機能で強化する

npm install @capacitor/share @capacitor/camera @capacitor/push-notifications
npx cap sync

CursorにShare、Camera、またはPushをReactコンポーネントにワイヤーするように求める。プラグインを追加した後、店舗提出前に新しい Capgoビルダー 店舗提出前にビルドする

Base44 Capacitor アプリに追加されたネイティブ機能

ステップ 10: 製品化の最適化

アプリアイコンとスプラッシュスクリーン

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

Base44バックエンドの考慮事項

エクスポートされたBase44アプリは、Base44のホストされたバックエンドに呼び出しを行うことができ、SDK。通常はCapacitorで機能しますが、次の条件を満たしている限り:

APIの呼び出しはHTTPSを使用する
ウェブビュー内でAuthリダイレクトが動作する (実機でテストログイン)
マジックリンクまたはOAuthフローを使用する場合、デープリンクが設定されている

Base44のバックエンドから後で移行する場合、__CAPGO_KEEP_0__関数と関連する__CAPGO_KEEP_1__関数を置き換える計画を立てる base44.entities.* and related SDK calls with your own API — the React UI layer typically carries over.

一般的な問題のトラブルシューティング

起動時に白い画面が表示される

確認 base: './' Viteの設定ファイルで設定されている
実行 npm run build と確認して dist/index.html 相対パスのファイルをロードする
実行 npx cap sync ウェブビルド後

Capgo ビルダーのエラー

コミット ios/ そして android/ Gitにコミットする前にクラウドビルドを要求する
ローカルに実行 npx cap sync __CAPGO_KEEP_0__ プラグインの新規追加には、ネイティブプロジェクトの最新ビルドが必要
New Capacitor plugins require a fresh native build

__CAPGO_KEEP_0__ エクスポートとZIPダウンロードはBuilderプラン以上で利用可能

Base44でアップグレードするか、Builderプラン未満の層ではGitHubビューからファイルを手動でコピーする __CAPGO_KEEP_0__Code

Conclusion

Capacitorを使用してBase44 AI生成のReactアプリをエクスポートし、Capacitorでラップし、iOSおよびAndroidバイナリの署名済みバージョンへの明確なパスを持ちます。 Capgoビルダー — Xcodeローカルファームを維持することなく署名済みiOSおよびAndroidバイナリまでのパスを持ちます。

Next Steps

Capgoライブアップデート：ストアレビュー待たずにUIとコピー修正を配信する
Capgoビルダー：CIでリリースビルドを自動化する
Push Notifications：追加 @capacitor/push-notifications Capgoビルダーで再構築する
関連ガイド: モバイルに愛される · Bolt.newをモバイルに

無料のCapgoアカウントに登録してください __CAPGO_KEEP_0__を使用してLive Updatesとクラウドネイティブビルドを有効にします。

リソース

Base44からネイティブモバイルアプリまで、Capacitorで進み続けます。

あなたが使用している場合 Capacitorでネイティブモバイルアプリを作成する __CAPGO_KEEP_0__と連携して Capgo プラグインディレクトリ Capgo プラグインディレクトリ内での製品ワークフロー Capacitor Plugins by Capgo Capgoで実装されたCapacitor プラグイン Capgo プラグイン __CAPGO_KEEP_1__で実装されたCapgo プラグインの実装詳細 __CAPGO_KEEP_0__ ネイティブビルド __CAPGO_KEEP_0__ ネイティブビルド内での製品ワークフロー

CapacitorでNativeモバイルアプリに変換する

導入

前提条件 &amp; 時間の見積もり