Capacitorで__CAPGO_KEEP_1__プロジェクトを変換して、Capacitorでネイティブモバイルアプリを生成

Introduction

Bolt.new は革新的なAIパワード開発プラットフォームで、React、Vue、Svelte、など多くのフレームワークを使用してフルスタックWebアプリケーションを生成できます。ですが、Bolt.newの創作物をモバイルデバイスに持ち込みたい場合、どのようにすればいいでしょうか。この包括的なチュートリアルでは、Bolt.newプロジェクトをエクスポートし、 Capacitor.

Bolt.newプロジェクトがReact、Vue、またはサポートされている別のフレームワークを使用している場合、このガイドは、カメラ、ストレージ、プッシュ通知などのデバイス機能にアクセスできるネイティブiOSおよびAndroidアプリを作成するのに役立ちます。

開始する前に: 要件 & 時間

推定時間: 3-5時間で完全なセットアップ

システム要件:

iOS開発: Mac with macOS 12.0+ (必須、ワークアラウンドなし)
Android開発: どのOSでも利用可能 (Windows/Mac/Linux)
保護されたスペース: 開発ツール用に 20-30GB
メモリ: 最低 8GB RAM、推奨 16GB

必要な予算:

Apple Developer: iOS App Storeのために 1年あたり $99
Google Play: iOSアプリのために 1回 $25
Cursor Pro: 1か月あたり $20 (オプション、開発を高速化)

What We’ll Install:

Node.js & npm
Xcode (Mac only, for iOS)
Android Studio (for Android)
Various command-line tools

Why Transform Your Bolt.new App to Mobile?

Cross-Platform Reach:バーターバトショナに安了。
Native Device Access:バーターバトショナに参室を用です
Improved Performance:バーターバトショナを使用しに安了パームコンディト。
オフライン機能: オフラインモードでネイティブストレージソリューションを使用
プッシュ通知: ネイティブプッシュ通知サポートでユーザーをエンゲージ

Why Capacitor Over Expo?

If you’re considering mobile development options, Capacitor offers significant advantages over Expo, especially for web-first development:

1つのコードベース、3つのプラットフォーム: React、Next.js、またはVue.jsの既存のウェブサイトは、iOS、Android、そしてウェブアプリとしてゼロの変換が必要なくなる
再構築不要: Bolt.newプロジェクトをそのまま使用 - Exponのように別のフレームワークに変換する必要がない
ウェブファーストアプローチ: Unlike Expo which is mobile-first and clunky on web, Capacitor treats web as a first-class citizen
開発のスムーズさ: ご自身の慣れ親しみのウェブ開発ツールとワークフローを引き続き使用
フレームワークの自由: React、Vue、Svelte、Next.js など、任意のウェブフレームワークと互換性があります - Expo のように React Native にロックされていません

主な違い

: Capacitor: ウェブサイトを構築 → モバイルサポートを追加 (同一コードベース)
: モバイル向けに構築 → ウェブを試みる (異なるアプローチ、しばしば不快)__CAPGO_KEEP_0__ は、すでに Bolt.new プロジェクトがウェブアプリケーションであるため、__CAPGO_KEEP_0__ を使用すると、モバイルサポートを追加することができます。__CAPGO_KEEP_1__ のコードを変更することなく、Expo ではプロジェクト全体を再構築する必要があります。

Since your Bolt.new project is already a web application, Capacitor lets you extend it to mobile without changing a single line of code. Expo would require rebuilding your entire project for their framework.

Cursor - __CAPGO_KEEP_0__ の AI パワードエディター

Code を使用して、ウェブサイトを構築し、モバイルサポートを追加できます。Expo を使用すると、モバイル向けに構築し、ウェブを試みる必要があります。Code を使用すると、ウェブアプリケーションをモバイルに拡張できます。

To work efficiently with your Bolt.new project, we’ll use Cursor, an intelligent code editor that simplifies development:

Cursor とを
を
を

を

を - 無料版は機能しますが、Pro ($20/month) を購入すると:
- Unlimited AI assistance
- Premium models (GPT-4, Claude)
- Instant responses
- Premium support
Access Settings with Command+, (Mac) or Ctrl+, (Windows)

Cursor Settings

Activate AI Features - AI 助けを有効にすることを確認してください:

モデルを許可する

AIモデルを選択してください - ClaudeまたはGPT-4を推奨します:

カーソルモデルを選択

コマンドの実行を有効にする - カーソルがコマンドを自動的に実行します:

コマンドの実行を許可する

ステップ2：Bolt.newプロジェクトをエクスポート

Bolt.newプロジェクトをカーソルに取り込んでください。

プロジェクトをダウンロード

ブラウザでBolt.newプロジェクトに移動
プロジェクトを探してください ダウンロード または Boltのインターフェイス内にあるボタン Bolt.newダウンロードボタン

プロジェクトをコンピューター上のフォルダに展開
Bolt.newプロジェクトファイル

Cursorで開く

Cursorで開いた後

Cursorで使用

Cursorで使用することができます File > Open Folder Cursorで使用することができます
プロジェクトフォルダを選択してください
Cursorはプロジェクトを読み込みます

Cursorで開く

代替: GitHubからクローン

Bolt.newをGitHubに接続している場合

Press Shift+Command+P (Mac) Shift+Ctrl+P (Windows)
Git: Cloneを検索してください
リポジトリURLを入力してください
保存先を選択してください

Cursorでクローン

Step 2: プロジェクトのフレームワークを特定する

Bolt.newは、さまざまなフレームワークを使用してプロジェクトを生成できます。以下に、どのフレームワークを使用しているかを確認してみましょう:

package.jsonを確認

を開いて package.json プロジェクトが使用しているフレームワークを確認してみてください:

Bolt.new package.jsonの検査

一般的なBolt.newプロジェクトのタイプ:

React + Vite: 最も一般的な設定
Vue + Vite: Vue.jsアプリケーション
Svelte: Svelteアプリケーション
Next.js: フルスタックReactアプリ
Vanilla JS: プレーンJavaScriptアプリ

ステップ3: 開発ツールのインストール

オプションA: Cursor AIが全てを管理する

Enter Command+K (Mac)または Ctrl+K (Windows)をCursorで

このリクエストを入力してください:

Install all necessary development tools including Node.js, then install project dependencies and start the dev server

Cursor AIは自動的に:

Node.jsとnpmをインストールする必要がある場合は
macOSでHomebrewをセットアップする
プロジェクトのすべての依存関係をインストールする
開発サーバーを起動する

Homebrewをインストールする

オプション B: 手動インストールプロセス

AIアプローチが問題を発生させる場合、またはコントロールを手動で行いたい場合は

Cursorのターミナルを開く (Mac)または Shift+Command+T (Windows) Shift+Ctrl+T macOSユーザー向け:

with

# Get Homebrew package manager
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Node.js via Homebrew
brew install node

# Move to your project folder
cd your-bolt-project

# Install project packages
npm install

# Launch development server
npm run dev

Windowsユーザー向け:

Node.jsインストーラーを nodejs.org
インストールウィザードを完了
Cursorのターミナルで:

cd your-bolt-project
npm install
npm run dev

Bolt.newアプリケーションがローカルで実行中

Bolt.newアプリケーションが正常に実行されていることを確認してください (通常は http://localhost:5173 Viteプロジェクトの場合)。

ステップ 4: モバイル用にビルドを設定

設定方法はプロジェクトのフレームワークによって異なります。

オプション A: Cursor AIによる自動設定

Cursor AIに設定を任せる:

Configure my Bolt.new project for mobile deployment with proper build settings

フレームワークを検出して適切な設定を適用します。

オプション B: フレームワークごとの手動設定

React + Vite プロジェクトの場合:

編集 vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
})

Vue + Vite プロジェクトの場合:

修正 vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
  },
})

Next.js プロジェクトの場合:

scripts に追加してください: package.json 更新

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "static": "next build && next export"
  }
}

ステップ 5: Bolt.new アプリのプロダクションビルドを作成する next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

プロダクションビルドの作成に要する時間

__CAPGO_KEEP_0__

オプション A: Cursor AI でビルド

Cursor に簡単に質問してください:

Build my Bolt.new project for production deployment

Cursor は、フレームワークに基づいて適切なビルドコマンドを実行します。

オプション B: 手動ビルド

Vite ベースのプロジェクト (React/Vue/Svelte) の場合:

npm run build

Bolt.new Vite ビルド成功

Next.js アプリケーションの場合:

npm run static

ビルドの成功を確認

ビルドが正しい出力を生成したことを確認してください:

Vite プロジェクト:ディレクトリを探してください dist :
Next.jsプロジェクト: __CAPGO_KEEP_0__を確認する out ディレクトリ

Bolt.newビルド出力

Step 6: CapacitorをBolt.newプロジェクトに追加する

ウェブアプリケーションをネイティブモバイルアプリケーションに変換しましょう。

オプションA: カーソルAIによるクイックセットアップ

Enter Command+K (Mac) Ctrl+K (Windows)

Add Capacitor to my project and set up iOS and Android platforms

カーソルAIはすべてのセットアッププロセスを管理します。

オプションB: ステップバイステップマニュアルセットアップ

Install Capacitorのコマンドラインツールをインストールします:

npm install -D @capacitor/cli

Capacitorプロジェクトを初期化します:

npx cap init

Capacitor初期化Bolt

次の質問に答えてください:

アプリ名: Bolt.newプロジェクト名を入力してください
Bundle ID: 例えば com.yourcompany.yourapp

手動設定に進みましょう - 必要なパッケージをインストールします:

npm install @capacitor/core @capacitor/ios @capacitor/android

モバイルプラットフォームのサポートを追加します:

npx cap add ios
npx cap add android

Capacitorプラットフォームが追加されたBolt

何が起こったのですか?

Your Bolt.newプロジェクト構造は次のようになりました。

your-bolt-project/
├── src/           # Your app source (React/Vue/etc)
├── public/        # Static files  
├── dist/          # Build output (Vite)
├── out/           # Build output (Next.js)
├── ios/           # iOS Xcode project (NEW!)
├── android/       # Android Studio project (NEW!)
├── capacitor.config.ts  # Mobile configuration
└── package.json   # Dependencies

重要な注意事項:

あなたのウェブcodeは src/ - ここで編集
ios/ そして android/ 生成される - ここで編集しないでください
変更後は常に npx cap sync
各プラットフォームには独自のビルドプロセスがあります

ステップ 7: Capacitorを構成する

あなたのフレームワークに合わせてCapacitorを構成する時間です。

オプション A: カーソルによる自動構成

カーソルの助けを求めます：

Configure capacitor.config.ts for my Bolt.new project build output

オプション B: 手動設定

Viteベースのアプリケーション用:

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

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

export default config;

Next.jsアプリケーション用:

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'out',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

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

モバイルデプロイ用にアプリケーションを準備します。

オプション A: Cursor AIを使用する

Cursorに伝えます:

Build my project and sync it with Capacitor for mobile deployment

オプション B: 手動プロセス

__CAPGO_KEEP_0__ を使用して Bolt を同期し、完了

npm run build
npx cap sync

ステップ 9: Capacitor ビルダーを使用してストア用のバイナリをビルドする (推奨)

Step 9: Build Store-Ready Binaries with Capgo Builder (Recommended)

モバイルデプロイ用にアプリケーションを準備する必要があります。 Capgo Builder クラウドでiOSおよびAndroidのビルドをコンパイル、署名、提出できる — vibeコードされたアプリをBolt.newからエクスポートした場合の最速のパス。

なぜCapgo Builder?

Macが必要ないiOS — Windows、Linux、またはAIコーディング環境からビルド
1つのCLI ワークフロー — Cursor、ClaudeCode、またはCodexに簡単にスクリプトして手渡す
Live Updatesとペア — JS/UI修正をオンエアで送信; プラグインまたはパーミッションが変更された場合のみネイティブバイナリを再構築

Capgo Builderの設定

生産ビルドとCapacitor 同期がローカルで完了した後:

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

署名資格を一度保存 (Apple証明書、プロビジョニングプロファイル、Androidキーストア)。 IDとパスワードの管理と 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

Capgo Builderは、ターミナルでビルドログをストリーミングします。 App Store Connectが設定されている場合、iOSビルドは直接TestFlightに送信できます。

ウェブバンドルのアップロード: OTA更新用

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

ステップ10: ローカルテスト用のネイティブIDEを開く(オプション)

Macを持っている場合やクラウドビルド前にエミュレーターテストしたい場合は、ローカルにネイティブプロジェクトを開きます:

アプリのネイティブ開発環境にアクセスします。

iOS開発

オプションA: Cursor AIを介して

Open my iOS project in Xcode

オプションB: ターミナルコマンドを介して

npx cap open ios

XcodeでBoltプロジェクトを開く

Androidの開発

オプションA: カーソルAIを使用

Open my Android project in Android Studio

オプションB: ターミナルコマンド

npx cap open android

Android StudioでBoltプロジェクトを開く

ステップ11: ローカルにビルドして実行する(任意)

iOSで実行

Xcodeの設定(初回)

ターゲットを選択:
- プレイボタンの隣にあるデバイスセレクタをクリック
- テスト用: 任意のiPhoneシミュレータを選択
- 実機用: iPhoneをUSBで接続
Codeの署名設定:
- 左サイドバーのプロジェクト名をクリック
- 「署名＆機能」タブに移動
- 「署名を自動管理」機能を有効
- Apple IDでログイン
- 注意: 実機はApple Developer Program ($99/年)が必要
アプリをビルド:
- ▶️ プレーヤーボタンをクリック
- 初回ビルド: 5-10分 (待ってください!)
- 上部の進行状況バーを確認

iOSのトラブルシューティング:

“No account found”: Add Apple ID in Xcode > Settings > Accounts
“Failed to build”: Clean build folder (Shift+Command+K) and retry
Simulator issues: Restart simulator via Device > Restart

Bolt app running on iOS

Running on Android

Setting Up Android Studio (First Time)

SDK Setup (automatic):
- Android Studio will detect missing components
- 「SDK」をインストールする必要がある場合は、指示されたときに「インストールする必要があるSDKをクリックしてください」
- ~2-3GBのファイルをダウンロードします
バーチャルデバイスを作成:
- AVD マネージャーを開く（ツールバーの電話アイコン）
- 「+ バーチャルデバイスを作成」をクリック
- 「Pixel 6」を選択（デフォルトの良い選択）
- システムイメージをダウンロードするように求められたらダウンロード
- デフォルトのオプションでセットアップを完了
アプリを実行:
- エミュレータをドロップダウンから選択
- 緑の▶️実行ボタンをクリック
- 最初のビルド: 10-15分
- 自動起動のエミュレータ

Androidのトラブルシューティング:

「Gradleの同期が失敗しました」エラーを解決するには、ファイル>キャッシュを無効化してください
遅いエミュレータAVDの設定でハードウェアアクセレレーションを有効にします
ビルドエラーGradleを更新するには、提案された修正を適用してください

BoltアプリがAndroidで動作しています

確認リスト

成功したビルド後、確認してください：

✅ アプリがクラッシュせずに起動します ✅ Bolt.newのコンテンツが正しく表示されます ✅ ボタンとインタラクションが正常に動作します ✅ コンソールに赤いエラーが表示されません

まだ問題が残っている場合 エラーメッセージは、正確に何が間違っているかを教えてくれることが多いので、きちんと読んでみてください。

ステップ 12: Live Reload を有効化 (開発用)

開発ワークフローを高速化するには、ホットリロードを使用します。

オプション A: カーソルによる自動セットアップ

カーソルに質問してください:

Enable live reload for my Capacitor app development

カーソルは自動的にすべての設定を構成します。

オプション B: 手動設定

ローカル IP アドレスを取得してください:

# macOS
ipconfig getifaddr en0

# Windows  
ipconfig

__CAPGO_KEEP_0__を更新してください capacitor.config.ts:

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'dist', // or 'out' for Next.js
  bundledWebRuntime: false,
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173', // or 3000 for Next.js
    cleartext: true,
  },
};

export default config;

設定を適用してください:

npx cap copy

Bolt の Live reload を有効化します

Step 13:

Native機能を追加する

Bolt.newアプリを、デバイス固有の機能で強化する

オプションA: AIパワード統合

Add native share, camera, and geolocation features to my Bolt.new app

Cursor will install plugins and create the integration code.

Cursorはプラグインをインストールし、統合__CAPGO_KEEP_0__を作成する

オプションB: マニュアルプラグインインストール

npm i @capacitor/share @capacitor/camera @capacitor/geolocation

人気のnativeプラグインをインストールする:

// utils/capacitor.js
import { Share } from '@capacitor/share';
import { Camera, CameraResultType } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';

export const shareContent = async (title, text, url) => {
  await Share.share({
    title,
    text,
    url,
    dialogTitle: 'Share with friends',
  });
};

export const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
  return image;
};

export const getCurrentPosition = async () => {
  const coordinates = await Geolocation.getCurrentPosition();
  return coordinates;
};

Reactプロジェクト用のユーティリティファイルを作成する:

// For React components
import React from 'react';
import { shareContent, takePicture } from '../utils/capacitor';

function MyComponent() {
  const handleShare = () => {
    shareContent('My Bolt App', 'Check out this amazing app!', 'https://your-app.com');
  };

  const handleCamera = async () => {
    try {
      const photo = await takePicture();
      console.log('Photo taken:', photo);
    } catch (error) {
      console.error('Camera error:', error);
    }
  };

  return (
    <div>
      <button onClick={handleShare}>Share App</button>
      <button onClick={handleCamera}>Take Photo</button>
    </div>
  );
}

export default MyComponent;

コンポーネントで使用する

変更をSyncする

Sync my native feature changes to all platforms

Cursor AIで:

npx cap sync

Native機能を追加したBolt

Step 14: 生成環境の最適化

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

オプション A: カーソル AI セットアップ

要求:

Create app icons and splash screens for my mobile app

オプション B: マニュアルアセット作成

アセットツールを取得:

npm install -D @capacitor/assets

グラフィックを準備:
- 作成 assets/icon.png (1024x1024px)
- 作成 assets/splash.png (2732x2732px)
すべてのサイズを自動生成する:

npx capacitor-assets generate

Boltアプリのアセットが生成されました

ビルドの最適化

Viteプロジェクトの場合、ビルドを最適化する:

// vite.config.js
export default defineConfig({
  plugins: [react()], // or vue()
  base: './',
  build: {
    outDir: 'dist',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'], // adjust for your framework
        },
      },
    },
  },
})

最終ビルド

オプションA:Cursor AIでビルド

Create the final production build and prepare for app store deployment

オプションB:手動ビルドプロセス

npm run build
npx cap sync
npx cap copy

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

フレームワーク固有の問題

React/Viteプロジェクト

確保 base: './' __CAPGO_KEEP_0__
インポートが相対パスを使用していることを確認する
指定されたフォルダが正しく生成されていることを確認する dist フォルダが正しく生成されていることを確認する

Vue Projects

モバイル用途では Vue Router がハッシュモードを使用していることを確認する
アセットが正しく参照されていることを確認する
モバイルコンテキストでコンポーネントのロードが機能していることを確認する

Next.js Projects

静的エクスポートが正しく設定されていることを確認する
モバイルコンテキストでダイナミックインポートが機能していることを確認する
API ルートが使用されていないことを確認する (または適切に処理されていることを確認する)

エラー

ビルドエラーが発生した場合:

node_modulesを削除し、再インストールしてください:

rm -rf node_modules package-lock.json
npm install

モバイル互換性のためのBolt.newプロジェクトの依存関係を確認してください
モバイルデプロイ用の相対パスが正しいことを確認してください

アセットが見つかりません

アセットロードに関する問題の場合:

すべてのアセットがpublicフォルダ内にあることを確認してください
画像やファイルの相対パスを使用してください
ビルドプロセスが必要なすべてのアセットをコピーしていることを確認してください

まとめ

あなたはBolt.newプロジェクトを成功させました! AIで生成されたWebアプリは、以下のことができます:

iOSおよびAndroidデバイス上でネイティブに実行できます
デバイスの機能にアクセスする：カメラ、GPS、ストレージ
アプリストアで配布
最適化されたモバイルユーザー体験を提供

次のステップ

Capgo ビルダー: Cloudflareのクラウドネイティブビルドを使用して、TestFlightとPlay Storeのリリース
ライブアップデート: インストール Capgo リアルタイムのオーバー・ザ・エアアップデート
分析: モバイル分析を追加して、ユーザーの行動を追跡
パフォーマンス:モバイルアプリのパフォーマンスを監視して最適化する
テスト:さまざまなデバイスと画面サイズでアプリをテストする

あなたのBolt.newの作成は、モバイルエコシステムに準備ができました!

リソース

Capgoで即時更新を実現する方法を学びましょう。無料アカウントに登録してください。今日。

CapacitorからTransform Your Bolt.new ProjectをNative Mobile Appsに変換してください。

__CAPGO_KEEP_0__を使用している場合 Transform Your Bolt.new Project into Native Mobile Apps with Capacitor __CAPGO_KEEP_0__を使用してNativeプラグインの作業計画を立てる場合、__CAPGO_KEEP_0__ Plugin Directoryと接続してください。 Capgo Plugin Directoryの製品ワークフロー Capgo Plugins by __CAPGO_KEEP_1__ Capacitor Plugins by Capgoの実装詳細 for the implementation detail in Capacitor Plugins by Capgo, __CAPGO_KEEP_0__は__CAPGO_KEEP_1__によって提供される実装詳細の追加または更新の場合の実装詳細の詳細 Ionic Enterprise Plugin Alternatives Ionic Enterprise Plugin Alternativesの製品ワークフローについて Capgo Native Buildsの製品ワークフローについて Capgo Native Builds

Capacitorを使用してBolt.newプロジェクトをネイティブモバイルアプリに変換する

Introduction

開始する前に: 要件 &amp; 時間

Why Transform Your Bolt.new App to Mobile?

Why Capacitor Over Expo?

Cursor - __CAPGO_KEEP_0__ の AI パワード エディター

を

ステップ2：Bolt.newプロジェクトをエクスポート

プロジェクトをダウンロード

Cursorで開いた後

代替: GitHubからクローン

Step 2: プロジェクトのフレームワークを特定する

package.jsonを確認

ステップ3: 開発ツールのインストール

オプションA: Cursor AIが全てを管理する

オプション B: 手動インストールプロセス

ステップ 4: モバイル用にビルドを設定

オプション A: Cursor AIによる自動設定

オプション B: フレームワークごとの手動設定

Next.js プロジェクトの場合:

プロダクション ビルドの作成に要する時間

オプション A: Cursor AI でビルド

オプション B: 手動ビルド

ビルドの成功を確認

Step 6: CapacitorをBolt.newプロジェクトに追加する

オプションA: カーソルAIによるクイックセットアップ

オプションB: ステップバイステップマニュアルセットアップ

何が起こったのですか?

ステップ 7: Capacitorを構成する

オプション A: カーソルによる自動構成

オプション B: 手動設定

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

オプション A: Cursor AIを使用する

オプション B: 手動プロセス

Step 9: Build Store-Ready Binaries with Capgo Builder (Recommended)

なぜCapgo Builder?

Capgo Builderの設定

クラウドビルドを要求

ステップ10: ローカルテスト用のネイティブIDEを開く(オプション)

iOS開発

Androidの開発

ステップ11: ローカルにビルドして実行する(任意)

iOSで実行

Xcodeの設定(初回)

Running on Android

Setting Up Android Studio (First Time)

確認リスト

ステップ 12: Live Reload を有効化 (開発用)

オプション A: カーソルによる自動セットアップ

オプション B: 手動設定

Step 13:

Bolt.newアプリを、デバイス固有の機能で強化する

Cursorはプラグインをインストールし、統合__CAPGO_KEEP_0__を作成する

Reactプロジェクト用のユーティリティファイルを作成する:

コンポーネントで使用する

Step 14: 生成環境の最適化

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

ビルドの最適化

最終ビルド

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

フレームワーク固有の問題

React/Viteプロジェクト

Vue Projects

Next.js Projects

エラー

アセットが見つかりません

まとめ

次のステップ

リソース

CapacitorからTransform Your Bolt.new ProjectをNative Mobile Appsに変換してください。

開始する前に: 要件 & 時間

Cursor - __CAPGO_KEEP_0__ の AI パワードエディター

プロダクションビルドの作成に要する時間