Capacitor で Base44 をネイティブモバイルアプリ化する

はじめに

Base44 is an AI-powered app builder that generates full React applications from prompts. You can ship a working product in the browser fast — but what if you want it on iOS and Android? In this tutorial, we show how to export your Base44 project and turn it into native mobile apps with Capacitor、その後、署名済みのストア用バイナリを配布する際に使う Capgo Builder | Native Build V2 | Native Build V2 ビルド — iOS開発にMacは不要です。

短く言うと: この Base44からiOS/Androidへの移行ページでは、エクスポート、Capacitor、Macなしのクラウドビルド、ライブアップデートまで、全体の流れを1画面でまとめています。

このガイドを読み終える頃には、Base44アプリがiOSとAndroid上でネイティブに動作し、カメラ、ストレージ、プッシュ通知などのデバイス機能にアクセスできるようになります。

前提条件と所要時間の目安

所要時間: 初回セットアップに2〜4時間

システム要件:

iOS クラウドビルド用: Capgo Builder があれば任意の OS (Windows、Mac、Linux)
Android クラウドビルド用: 任意の OS
ストレージ: 依存関係とビルド成果物用に 10GB の空き容量
RAM: 8GB 以上

コスト:

Base44 エクスポート: Builder プラン以上 (GitHub のエクスポートと ZIP ダウンロード用)
iOS App Store: 年額 $99 (Apple Developer Account)
Google Play ストア: 初回 $25 (Google Play Developer)
Cursor Pro: 月額 $20 (任意ですが推奨)

必要なソフトウェア:

Node.js 18以上
例えば、以下のような code エディタ： Cursor

Base44 アプリをモバイル化すべき理由とは？

リーチの拡大: ブラウザのタブではなく、ネイティブアプリのアイコンを期待するユーザーに届ける
ネイティブ機能: Capacitor プラグインによるカメラ、GPS、生体認証、オフラインストレージ
App Storeでの配信: Google PlayとApple App Storeで公開
イテレーションの高速化: Capgo Live UpdatesとCapgo Builderを組み合わせ、毎回ネイティブバイナリを再ビルドせずにWebレイヤーを修正できます

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

Base44では、code をエクスポートできます。有料プランに加入すると、 Builderプラン以上が必要です主に2つの方法があります。

オプションA: GitHub へエクスポート（推奨）

Base44エディタでアプリを開く
次をクリックします： GitHub トップバーのアイコン
承認する Base44 Builder リポジトリの作成または接続
Base44はアプリの code を GitHub へ自動的に同期します（対応プランでは双方向同期が可能）

詳細は Base44 GitHub 連携ドキュメントをご覧ください。

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

クリック Code 上部のバーからファイルブラウザを開く
クリック プロジェクトをZIPとしてエクスポート code ビューの右上に表示
アーカイブをローカルに展開

Cursorでプロジェクトを開く

こちらにアクセスして cursor.sh Cursorをインストールしてください
GitHub のリポジトリをクローン（Git: Clone コマンドパレットから実行）するか、解凍したZIPフォルダを ファイル > フォルダーを開く

Cursorを起動

AIを活用した最適なワークフローを実現するには、Cursorの設定で使用するモデルを有効にし、コマンドの実行を許可してください。同じ設定手順はこちらの Lovableアプリのモバイル化ガイド.

ステップ2: 開発環境のセットアップ

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

Cursor AIを使う（推奨）

を押して、 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) またはターミナルに表示されているポート。

ステップ 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: Base44 プロジェクトに Capacitor を追加する

Cursor AIを使う（推奨）

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

手動インストール

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

Base44 アプリへの Capacitor 初期化

フォルダをコミットしてください。 ios/ と android/ フォルダをgitに追加することを検討してください。Capgo Builderは、それらのディレクトリ内の内容をコンパイルします。

ステップ 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

早めに導入を検討しましょう。 @capgo/capacitor-updater そうすることで、リリース後にOTAアップデートが可能になります。詳細は Capgo Live Updatesのドキュメントをご覧ください。.

ステップ 6: ビルドと同期

Webアプリを変更するたびに：

npm run build
npx cap sync

Base44アプリのCapacitor syncが完了しました

ステップ 7: Capgo Builder でストア用バイナリをビルド (推奨)

シミュレーターでのテストは任意です。TestFlight、内部テスト、およびストアへの申請には、 Capgo Builder | Native Build V2 | Native Build V2 ビルド クラウド上でネイティブバイナリのコンパイルと署名を行います。

Base44 アプリで Capgo Builder を使う理由

iOSビルドにMacは不要 — WindowsやLinuxからビルド可能
AIエージェントと同じ CLI を実行できます — Base44 → GitHub → Cursor というvibe-codingのワークフローに最適
Live Updatesとの連携 — UIや文言はOTAで修正。プラグインや権限の変更時のみNative Buildが必要

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

署名資格情報は一度の登録でOK。詳細はこちら認証情報の管理と 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へ自動的にuploadできます。

OTAアップデート用のWeb bundleをアップロードします：

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 | Native Build V2 | Native Build V2 ビルド 署名済みのリリース用バイナリが必要な場合です。

ステップ 9: ネイティブ機能の追加

デバイスの機能を使ってBase44アプリを強化しましょう：

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

CursorにShare、Camera、PushをReactコンポーネントに組み込むよう依頼しましょう。プラグインを追加したら、ストア申請前に新しい Capgo Builder | Native Build V2 | Native Build V2 ビルド buildを実行してください。

Base44 Capacitor アプリに追加されたNative機能

ステップ 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であること
WebView内で認証リダイレクトが機能すること（実機でログインをテストしてください）
マジックリンクやOAuthフローを使う場合は、ディープリンクが設定されていること

将来Base44のバックエンドから移行する場合は、以下を置き換える計画を立ててください： base44.entities.* および関連するSDK呼び出しを独自のAPIに — ReactのUIレイヤーは通常そのまま引き継げます。

よくある問題のトラブルシューティング

起動時のホワイトスクリーン

確認 base: './' Vite設定で指定されている
実行 npm run build および、〜を確認します dist/index.html 相対パスでアセットを読み込んでいること
実行 npx cap sync Webビルドのたびに

Capgo Builder のビルドエラー

コミット ios/ と android/ クラウドビルドをリクエストする前にgitへ
実行 npx cap sync ローカルで実行し、Webアセットをnativeプロジェクトにコピーします
新しいCapacitorプラグインには、新しいNative Buildが必要です

Base44ではエクスポートできません

GitHubのエクスポートとZIPダウンロードには、 Builderプラン以上が必要です。Base44でアップグレードするか、下位プランの場合はCodeビューから手動でファイルをコピーしてください。

まとめ

Base44のAI生成Reactアプリをエクスポートし、Capacitorでラップすれば、署名済みのiOS/Androidバイナリへの明確なパスを Capgo Builder | Native Build V2 | Native Build V2 ビルド を通じて — ローカルのXcode環境を維持することなく — 手に入れられます。

次のステップ

Capgo Live Updates: ストア審査を待たずに、UIや文言の修正を配信できます
Capgo Builder | Native Build V2 | Native Build V2 ビルドCIでのリリースビルドを自動化
プッシュ通知： @capacitor/push-notifications そして Capgo Builder で再ビルド
関連ガイド: Lovableからモバイルへ · Bolt.newからモバイルへ

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

リソース

Capacitor で Base44 から Native Mobile Apps へと進めよう

使用している場合 Capacitor で Base44 をネイティブモバイルアプリ化する ネイティブプラグインの作業を計画するには、次と連携してください： Capgo プラグインディレクトリ Capgo プラグインディレクトリのプロダクトワークフローについては、 Capgo による Capacitor プラグイン Capgo による Capacitor プラグインの実装詳細については、 Capgo Native Build Capgo Native Builds のプロダクトワークフロー、および WindowsからiOSをビルドする Mac なしでクラウド iOS ビルドを行うために。