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

Base44 to Native Mobile Apps with Capacitor

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

著者

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

ライター

ヴァレリア

レビュアー

ジョーダン

エディター

Base44 to Native Mobile Apps with Capacitor

導入

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

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

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

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

システム要件:

  • iOS クラウド ビルドの場合: Windows、Mac、または Linux のいずれかで Capgo ビルダーがインストールされている
  • Android クラウド ビルドの場合: どの OS
  • ストレージ10GBの依存関係とビルドアーティファクト用の空き領域
  • RAMRAM

Costs:

  • Base44エクスポート: Builder プランまたは上位 ( GitHub のエクスポートと ZIP ダウンロードのために )
  • iOS App Store: $99/年 (Apple Developerアカウント)
  • Android Play Store: $25/回 (Google Play Developer)
  • カーソル・プロ: $20/月 (オプションですが、推奨)

必要なソフトウェア:

  • Node.js 18+
  • A code editor such as Cursor

Base44アプリをモバイルに変換する理由は何ですか?

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

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

Base44では、Builderプランまたは上位のプランにアップグレードした後、codeを一度にエクスポートできます 拡大されたアクセス. 2つの主なオプションがあります。

  1. Base44 エディターでアプリを開きます
  2. 上部バーの GitHub コンテキスト: Capgo ソリューションズ マーケティング ページ。役割: ショート UI ラベルまたはナビゲーション アイテム。Capgo の製品/ブランドと開発者用語を完全に保存してください。
  3. アイコン 認可 Base44 ビルダー
  4. Base44はアプリを自動的にcodeとGitHubに同期します（サポートされるプランでは両方向の同期）

See 参照してください: Base44 GitHub インテグレーション ドキュメント 詳しくはこちら。

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

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

プロジェクトを開く

  1. ここを訪問 カーソル.シーエイチ とインストールするCursor
  2. あなたのGitHubリポジトリをクローンする(Git: Clone コマンドパレットから) または抽出されたZIPフォルダを開く ファイル>フォルダを開く

Cursorを開始する

最適なAIアシストワークフローを実現するには、Cursorの設定で好みのモデルを有効にして、コマンド実行を許可する 私たちの.

モバイルに愛される

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

Press Command+K (マック) または 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 は静的ウェブアセットが必要です。Base44 React アプリは通常、Vite を使用し、出力先を dist/.

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

Viteをモバイル用に設定

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

Ask Cursor: vite.config.ts manually:

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を追加する

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 の Base44 アプリの Capacitor 初期化

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

フォルダをコミットする。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アップデートを実行できます。See Capgo Live Updates ドキュメント.

ステップ 6: ビルドと Sync

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

npm run build
npx cap sync

Capacitor のSync完了

ステップ 7: __CAPGO_KEEP_0__ ビルダー (推奨) でストア用バイナリをビルド Capgo ビルダー シミュレーターテストは任意です。TestFlight、内部テスト、ストアの提出用に使用するには

Capgo ビルダー

  • iOS用のMacは必要ありません。 — Windows or Linux から iOS を構築
  • — AI エージェントが実行できる CLI — Base44 から GitHub までの vibe-coding ワークフローに合致
  • — Live Update と組み合わせる — 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 回保存。詳しくは — Managing Credentials — — 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 でローカルにテストする

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

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

XcodeはBase44 Capacitorプロジェクトを開いています。

ステップ 9: ネイティブ機能を追加する Capgo ビルダー ステップ 9: ネイティブ機能を追加する

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

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

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

ステップ 8: オプション — Xcode または Android Studio でローカルにテストする 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のバックエンドから後で移行する場合、後で置き換える計画を立ててください。 base44.entities.* Capacitorの関連SDKコールをあなたのAPIと組み合わせてください。— React UI層は通常引き継がれます。

ステップ10: 生産用に最適化する

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

  • 確認 base: './' Vite設定で設定されている
  • 実行 npm run build コンテキスト:Capgoマーケティングウェブサイト。ロール:長いマーケティングまたは法的文章。ページ/エリア:page alternatives/codepush.astro。Capgo製品/ブランドと開発者用語を完全に保持する。 dist/index.html コンテキスト:Capgoマーケティングウェブサイト。ロール:長いマーケティングまたは法的文章。ページ/エリア:page alternatives/expo.astro、page alternatives/voltbuilder.astro。Capgo製品/ブランドと開発者用語を完全に保持する。
  • 実行 npx cap sync コンテキスト:Capgoマーケティングウェブサイト。ロール:長いマーケティングまたは法的文章。ページ/エリア:page alternatives/expo.astro、page alternatives/median.astro、page alternatives/voltbuilder.astro。Capgo製品/ブランドと開発者用語を完全に保持する。

ビルドエラーはCapgoビルダーで発生しました。

  • Commit ios/ and android/ コミットする
  • Run npx cap sync ローカルで実行
  • New Capacitor plugins require a fresh native build

ローカルで実行すると、ウェブアセットはネイティブプロジェクトにコピーされます。

New GitHub plugins require a fresh native build 新しい__CAPGO_KEEP_0__ プラグインは、ネイティブビルドを再度実行する必要があります。Base44でアップグレードするか、下位の階層のCodeビューからファイルを手動でコピーする。

Conclusion

Capacitor export and ZIP download require the CapgoエクスポートとZIPダウンロードは、Builderプランまたはそれ以上のものが必要です。 Builder plan or higher

次のステップ

and rebuild with Capgo Builder ライブアップデートとクラウドネイティブビルドを有効にする。

リソース

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

Base44からネイティブモバイルアプリに進むには__CAPGO_KEEP_0__ Base44からネイティブモバイルアプリに進むにはCapacitor Base44からネイティブモバイルアプリに進むには__CAPGO_KEEP_0__ Base44からネイティブモバイルアプリに進むにはCapgo Base44からネイティブモバイルアプリに進むにはCapgo Capacitor プラグインは Capgo Capgo による Capacitor プラグイン Capgo ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフロー Windows から iOS をビルドする Mac を必要としないクラウド iOS ビルド

Live updates for Capacitor apps

Web層のバグが生じた場合、Capacitorアプリの修正をCapgoで配信し、数日間待つ必要のないアプリストアの承認プロセスを利用する。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通じて実施される。

マーティンによる人間のサポート

はじめましょう

最新のニュース

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

2方向の通信機能を備えたCapacitorアプリ
開発 モバイル +1
2025年4月26日

2方向の通信機能を備えたCapacitorアプリ

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

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

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

5 Mobile App Live Update Security Best Practices

Capgoブログのすべて