__CAPGO_KEEP_0__のロゴ']}
Capgo logo
チュートリアル

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

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

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

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

コンテンツマーケター
Base44からCapacitorに

導入

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

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

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

時間の必要な量: 最初のセットアップに 2-4 時間

システムの要件:

  • iOS のクラウド ビルド用: Windows、Mac、または Linux のどの OS でも Capgo ビルダー
  • Android のクラウド ビルド用: どの OS でも
  • ストレージ: ディレクトリとビルド アーティファクトの依存関係に 10GB の空きスペース
  • RAM: 8GB 以上

コスト:

  • Base44エクスポート: ビルダー プラン以上 ( GitHub エクスポートと ZIP ダウンロードの場合)
  • iOS App Store: 1 年あたり $99 (Apple Developer アカウント)
  • Android Play Store: 1 回の支払い $25 (Google Play Developer)
  • Cursor Pro: 1 か月あたり $20 (オプションですが、推奨)

必要なソフトウェア:

なぜBase44アプリをモバイルに変換する必要があるのですか?

  • 拡大した範囲:ユーザーが期待するネイティブアプリのアイコンで会う、ブラウザタブではありません
  • ネイティブ機能:カメラ、GPS、バイオメトリクス、オフラインストレージをCapacitor プラグインを通じて
  • アプリストア配布:Google PlayとApple App Storeに公開
  • 迅速な反復:Capgo Live UpdatesとCapgo Builderを組み合わせて、ウェブ層の修正を毎回ネイティブバイナリを再構築することなく実行

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

Base44は、プロジェクトに到達した後、code を一度だけエクスポートすることを許可します Builder plan or higher. You have two main options.

  1. Base44 エディターでアプリを開きます
  2. __CAPGO_KEEP_0__ GitHub __CAPGO_KEEP_0__
  3. 承認 Base44 ビルダー リポジトリを作成または接続する
  4. Base44 はアプリの code を GitHub に自動的に同期します (サポートされているプランでは両方向の同期)

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

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

  1. クリック Code 上部バーの「ファイルブラウザを開く」ボタンをクリック
  2. クリック プロジェクトを ZIP としてエクスポート code ビューの右上にあるボタンをクリック
  3. アーカイブをコンピューター上で展開

プロジェクトを開く

  1. カーソルで訪問 cursor.sh とインストールする
  2. Clone your GitHub repo (Git: Clone コマンドパレットから) または抽出された ZIP フォルダを開く ファイル > フォルダを開く

Cursor を開始する

Cursor の設定で、AI を有効にしてコマンドの実行を許可することで、最適な AI 助成ワークフローを実現できます。 Step 2: 開発環境の設定.

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

Cursor AI を使用する (推奨)

__CAPGO_KEEP_0__ Command+K (Mac) or Ctrl+K (Windows) and ask:

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',
  },
})

Test the Production Build

npm run build

Verify a dist/ folder exists with index.html と

bundled assets.

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

Cursor AIを使用する (推奨)

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 initialization for a Base44 app

__CAPGO_KEEP_0__ initialization for a Base44 app ios/ Commit the android/ と、folders to git. Capgo Builder compiles what is in those directories.

Step 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 __CAPGO_KEEP_0__ Live Updatesドキュメント Capgo Live Updates docs.

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

__CAPGO_KEEP_0__ SyncがBase44アプリ用に完了しました

npm run build
npx cap sync

Step 7: Capacitor Builderを使用してストア用のバイナリをビルドする (推奨)

__CAPGO_KEEP_0__ Builder Capgo Builder __CAPGO_KEEP_0__

CapgoのためのBase44アプリ用ビルダーの理由は何ですか？

  • Macは必要ありません。iOSはWindowsまたはLinuxからビルドできます。 — Base44 → __CAPGO_KEEP_0__ → Cursorのvibe-codingワークフローに合わせてください。
  • CLIがAIエージェントで実行できるように同じものを使用してください。 — fits vibe-coding workflows from Base44 → GitHub → Cursor
  • Live Updatesとペアしてください。UIとコピーをオンエアで修正できます。 __CAPGO_KEEP_0__ビルダーを設定してください。

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

Managing Credentials と WindowsからiOSをビルドするには __CAPGO_KEEP_0__.

Cloudflareのビルドをリクエスト

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更新を実行します:

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 Builder 提出前にビルドする。

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リダイレクトはWebView内で機能し、実機でログインテストを行う
  • デープリンクは、magic-linkまたは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/ To Git に登録する前に、Cloud Build を要求する
  • 実行 npx cap sync ローカルで実行するため、Web アセットがネイティブ プロジェクトにコピーされる
  • 新しい Capacitor プラグインでは、ネイティブ ビルドが必要

Export は Base44 で利用できない

GitHub のエクスポートと ZIP ダウンロードは、Builder プランまたは上のものが必要 Base44 ではアップグレードするか、__CAPGO_KEEP_0__ ビューからファイルを手動でコピーする. Upgrade in Base44 or copy files manually from the Code view on lower tiers.

Base44 で生成された React アプリをエクスポートし、__CAPGO_KEEP_0__ でラッピングし、ネイティブ iOS と Android バイナリを署名するための明確なパスを持ち、

Capacitor の Builder を使用する Capgo Builder —

次のステップ

無料のCapgoアカウントに登録 Live Updatesとクラウドネイティブビルドを有効にする。

リソース

Base44からネイティブモバイルアプリまでの開発を続けましょう。Capacitor

__CAPGO_KEEP_0__を使用している場合 Base44からネイティブモバイルアプリまでの開発を続けましょう。Capacitor ネイティブプラグインの作業計画を立てるには、__CAPGO_KEEP_0__プラグインディレクトリと接続する必要があります。 Capgoプラグインディレクトリ 製品ワークフローについての説明は、Capgo プラグインディレクトリで行います。 Capacitor プラグインは、Capgo によって提供されています。 実装の詳細についての説明は、Capacitor プラグインによって、Capgo によって提供されています。 Capgo ネイティブビルド 製品ワークフローについての説明は、Capgo ネイティブビルドで行います。 WindowsからiOSをビルドする MacがなくてもクラウドiOSビルドが可能です。

Capacitorアプリ用のリアルタイム更新

Capgoのバグが実際に生じた場合、Capgoを通じて修正を配信するのではなく、数日間待ってアプリストアの承認を待つ必要はありません。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通じて残ります。

Get Started Now

Latest from our Blog

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。

Capacitorアプリで2方向のコミュニケーション
開発 モバイル +1
2025年4月26日

Capacitorアプリで2方向のコミュニケーション

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

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

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

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

ブログからすべてを参照