メインコンテンツにジャンプ
Capgoロゴ
チュートリアル

Capacitorを使用したBase44からネイティブモバイルアプリへの変換

CapacitorとCapgo Builderを使用してBase44プロジェクトをエクスポートし、ネイティブモバイルアプリに変換する方法を学びます。2026年の完全なステップバイステップガイド。

記事のクレジット

マーティン・ドナディュー

著者

バレリア

レビュー

ジョーダン

編集者

Capacitorを使用したBase44からネイティブモバイルアプリへの変換

Introduction

Base44 Base44は、パラメータからフル機能のReactアプリケーションを生成するAIパワードアプリビルダーです。ブラウザで動作するワークイングプロダクトを迅速に展開できますが、iOSとAndroidに展開したい場合はどうしますか? このチュートリアルでは、Base44プロジェクトをエクスポートし、ネイティブモバイルアプリに変換する方法を紹介します。 Capacitor、次に署名済みストアバイナリを配信します。 Capgo Builder — iOS用にはMacが必要ありません。

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

Prerequisites & Time Estimate

Time Required: 最初のセットアップに 2-4 時間かかります。

System Requirements:

  • For iOS cloud builds: Capgo (iOS)のクラウドビルド
  • For Android cloud builds: __CAPGO_KEEP_0__ (Android)のクラウドビルド
  • Storage: Capgo Builder / native cloud build product page
  • : __CAPGO_KEEP_0__ストレージ: 依存関係とビルドアーティファクト用の10GBの無料スペース

RAM:

  • : 8GBの最小: Builder plan or higher (for GitHub export and ZIP download)
  • : __CAPGO_KEEP_0__エクスポートとZIPダウンロードのためのビルダー計画以上のものが必要です: ¥8,910/年 (Apple Developer Account)
  • Android Play Store: ¥2,250の1回払い (Google Play Developer)
  • Cursor Pro: ¥2,400/月 (オプションですが推奨)

必要なソフトウェア:

  • Node.js 18+
  • Capgoで使用する code エディター Cursor

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

  • 拡大したアクセス: ユーザーが期待するネイティブアプリのアイコンに会えるように、ブラウザタブではなく
  • Native features: Camera, GPS, biometrics, and offline storage through Capacitor plugins
  • App Store distribution: Google PlayとApple App Storeへの配布
  • Faster iteration: Pair Capgo Live Updates with Capgo Builder for web-layer fixes without rebuilding native binaries every time

Step 1: Export Your Base44 Project

Base44 lets you export code once you are on the Option A: Export to Capacitor (Recommended)Base44エディターでアプリを開きます

  1. : カメラ、GPS、バイオメトリクス、オフラインストレージを通じてCapacitorプラグイン
  2. クリック GitHub 上部バーの
  3. 承認 Base44 Builder とアプリケーションを保存するリポジトリを作成または接続する
  4. Base44は、codeとGitHubを自動的に同期します (サポートされているプランの場合、2方向の同期)

詳細は GitHub Base44のドキュメントを参照してください。

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

  1. クリック Code __CAPGO_KEEP_0__
  2. クリック プロジェクトをZIPファイルとしてエクスポート code
  3. コンピューター上のアーカイブを展開

Cursorでプロジェクトを開く

  1. cursor.sh Cursorをインストールする __CAPGO_KEEP_0__ リポジトリをクローンする (コマンドパレットから) または抽出されたZIPフォルダを開く
  2. Clone your GitHub repo (Git: Clone 右上の__CAPGO_KEEP_0__ビュー ファイル > フォルダを開く

カーソルを始める

最適なAIアシストワークフローを実現するには、カーソル設定で好みのモデルを有効にしてコマンド実行を許可する必要があります。これは、 愛すべきモバイルガイド.

ステップ 2: 開発環境を設定する

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

Mac の場合 Command+K Windows の場合 Ctrl+K Enter キーを押して、

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

手動設定

cd your-base44-project
npm install
npm run dev

ローカルに実行中の Base44 アプリ

Capgoで作成したBase44アプリは http://localhost:5173 (Vite) またはターミナルに表示されているポートで

ステップ 3: 製品用ビルドを準備する

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

Capgoでモバイル用に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 ビルド出力

Step 4: Capgo における Capacitor を Base44 プロジェクトに追加する

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

Capacitor の初期化 (Base44 アプリ)

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

Step 5: Configure 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 docs.

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

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

npm run build
npx cap sync

Capacitor sync complete for a Base44 app

シミュレータのテストは任意です。テストフライト、内部テスト、ストアの投稿には Capgo Builder クラウドでネイティブバイナリをコンパイルおよび署名するには

Why Capgo Builder for Base44 apps?

  • Mac は必要ありません。iOS をビルドするには Windows または Linux を使用できます。 同じ Capgo が AI エージェントが実行できるように
  • Same CLI your AI agent can run — fits vibe-coding workflows from Base44 → GitHub → Cursor
  • ライブアップデートとペア 〜UIを修正し、オンエアでコピーして、プラグインまたはパーミッションが変更された場合のみネイティブを再構築

Set up 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

署名資格情報を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にアップロードできます。

オンデマンドアップデート用にウェブパッケージをアップロード:

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 ビルダー 署名されたリリースバイナリが必要な場合は:

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

Base44アプリにデバイス機能を追加して強化する:

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

CursorにShare、Camera、またはPushをReactコンポーネントにワイヤする。プラグインを追加した後、新しい Capgo ビルダー ストアへの提出前にビルドする:

Native features added to a Base44 Capacitor app

ステップ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リダイレクトはWebView内で機能します (実機でログインテストを行ってください)
  • magic-linkまたはOAuthフローを使用している場合にのみ、デープリンクが設定されている

Base44のバックエンドから後で移行する場合、__CAPGO_KEEP_0__の呼び出しと関連する__CAPGO_KEEP_1__を置き換える計画を立てる必要があります — React UIレイヤーは通常、引き継がれます。 base44.entities.* and related SDK calls with your own API — the React UI layer typically carries over.

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

確認

  • Viteの設定ファイルで設定されている base: './' is set in Vite config
  • 実行 npm run build そして dist/index.html 相対パスを使用してロードされるアセットが正常に動作していることを確認
  • 実行 npx cap sync ウェブビルドごとに

エラーが Capgo ビルダー内に発生

  • コミット ios/ そして android/ クラウドビルドを要求する前に
  • ローカルに実行 npx cap sync ウェブアセットがネイティブプロジェクトにコピーされるように
  • 新しい Capacitor プラグインではネイティブビルドが必要

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

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

結論

Base44 の AI 生成された React アプリをエクスポートし、Capacitor でラップし、署名済みの iOS と Android バイナリへの明確なパスを持ちます。 Capgo ビルダー を通じて—

ローカル Xcode ファームを維持することなく

Sign up for a free Capgo account Live Updatesとクラウドネイティブビルドを有効化してください。

リソース

Capacitor を使ってBase44からネイティブモバイルアプリに進みましょう

Base44を使用している場合 Base44からネイティブモバイルアプリにCapacitorを使用 __CAPGO_KEEP_0__を使用してネイティブプラグインの作業計画を立てる場合、__CAPGO_KEEP_0__ プラグインディレクトリと接続してください Capgo プラグインディレクトリ Capgo プラグインディレクトリの製品ワークフロー Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Capgo ネイティブビルド for the product workflow in Capgo Native Builds, and WindowsからiOSをビルド MacがなくてもクラウドiOSビルド

Live updates for Capacitor apps

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

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

今すぐ始めましょう。

最新のブログから

Capgo gives you the best insights you need to create a truly professional mobile app.

2-Way Communication in Capacitor Apps
開発 モバイル +1
2025年4月26日

2-Way Communication in Capacitor Apps

OTA更新の5つの一般的なミスを避ける
開発 セキュリティ +1
2025年4月13日

5つのOTA更新ミスを避ける

モバイルアプリのライブ更新のための5つのセキュリティベストプラクティス
開発 モバイル +1
2025年1月14日

モバイルアプリのライブ更新のための5つのセキュリティベストプラクティス

Capgoのブログからすべてを参照