Capacitorを使用してBolt.newプロジェクトをネイティブモバイルアプリに変換する方法を学びましょう。

導入

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

このセクションでは、Capacitorを使用してCapgoのLive UpdateプラットフォームでNativeモバイルアプリを生成する方法を説明します。

Capacitorを使用してBolt.newプロジェクトをNativeモバイルアプリに変換する方法は、Bolt.newプロジェクトがReact、Vue、またはサポートされている別のフレームワークを使用している場合でも、iOSとAndroidのNativeアプリを作成し、カメラ、ストレージ、プッシュ通知などのデバイス機能にアクセスできます。

開始する前に: 要件と時間予定時間

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

システム要件: Mac with macOS 12.0+ (required, no workaround)
Android 開発: どのOSでも (Windows/Mac/Linux)
空き容量: 開発ツール用に 20-30GB
メモリ: 8GB RAM (最低)、16GB (推奨)

必要な予算:

Apple Developer: iOS App Store用に $99/年
Google Play: $25 の 1 回限り
Cursor Pro: 20月/月 (任意, 開発を速める)

何がインストールされるか:

Node.js & npm
Xcode (Macのみ, iOS用)
Android Studio (Android用)
バリエーションのコマンドラインツール

なぜBolt.newアプリをモバイルに変換するか

クロスプラットフォームのアクセス: AI生成アプリをモバイルアプリストアに展開
ネイティブデバイスのアクセス: カメラ、GPS、ファイルシステム、他々のネイティブ機能を使用
パフォーマンスの向上:ネイティブコンテナはウェブビューに比べてパフォーマンスが向上しています
オフライン機能:ネイティブストレージソリューションを使用してオフラインで作業できます
プッシュ通知:ユーザーをnativeプッシュ通知のサポートで魅了します

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、そしてWebアプリに変換する必要はありません
再構築不要:Bolt.newプロジェクトをそのまま使用するだけで済みます。Expoのように別のフレームワークに移行する必要はありません
True Web-First Approach: CapacitorはExpoと異なり、モバイルファーストではなくウェブを優先します
Seamless Development: ご自身の慣れ親しんだウェブ開発ツールとワークフローを引き続き使用できます
Framework Freedom: React、Vue、Svelte、Next.jsなど、任意のウェブフレームワークと組み合わせることができます - ExpoのようにReact Nativeに固定されていません

The Key Difference:

: Capacitor: ウェブサイトを構築 → モバイル対応を追加 (同じコードベース)
: 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.

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

Get Cursor - AIを活用した Code エディター

Bolt.newプロジェクトと効果的に作業するには、 Cursor、開発を簡素化する code エディター

以下のサイトにアクセスしてください cursor.sh OSに合ったインストーラーをダウンロードしてください
インストーラーを実行してください
Cursorを起動してください

Cursorを起動してください

Cursorを最大限に活用するための設定を行ってください

Cursorを最大限に活用するには、初期設定が必要です:

Cursor Proを検討してください - フリーミアム版は機能しますが、Pro ($20/月)を購入すると、以下の機能が利用可能になります:
- 無制限のAIアシスタンス
- プレミアムモデル(GPT-4、Claude)
- 即時レスポンス
- プレミアムサポート
設定にアクセス Mac Command+, Windows Ctrl+, Cursor設定

with

AI機能を有効化 - AIアシスタンスが有効になっていることを確認してください:

モデルを許可

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

カーソルモデルを選択

コマンド実行を有効 - カーソルがコマンドを自動実行できるようにしてください:

コマンド実行を許可

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

さて、カーソルにBolt.newプロジェクトを取り込んでみましょう。

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

ブラウザでプロジェクトを表示
以下のオプションを選択 ダウンロード または Capacitorライブアップデートの代替 エクスポート

Bolt.newのダウンロードボタン
プロジェクトのZIPファイルをダウンロード

コンピューター上のフォルダに展開

プロジェクトファイル

Cursorで開く

使用 File > Open Folder カーソル内で
Bolt.newプロジェクトフォルダを選択してください
カーソルはプロジェクトを読み込みます

カーソルで開く

代替: GitHubからクローンする

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

押す Shift+Command+P (Mac)または Shift+Ctrl+P (Windows)
「Git: Clone」を検索してください
リポジトリURLを入力してください
保存場所を選択してください

Cursorでクローン

ステップ 2: プロジェクトフレームワークを特定する

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

package.jsonを確認

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

Bolt.new package.jsonの検査

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

React + Vite: 最も一般的な設定
Vue + Vite: Vue.js applications
Svelte: Svelte applications
Next.js: Full-stack React apps
Vanilla JS: Plain JavaScript apps

Step 3: Install Development Tools

Option A: Let Cursor AI Handle Everything

Press Command+K (Mac) or Ctrl+K (Windows) in Cursor

Type this request:

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

Cursor AI will automatically:

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

Homebrew をインストールする

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

AI アプローチが問題を発生させたり、または手動コントロールを希望した場合は

Cursor のターミナルを開く （Mac）または Shift+Command+T （ Shift+Ctrl+T (Windows)

macOSユーザーの場合:

# 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ユーザーの場合:

Capacitorで使用するNode.jsインストーラーをダウンロードする nodejs.org
インストールウィザードを完了する
Cursorのターミナルで:

cd your-bolt-project
npm install
npm run dev

Bolt.newアプリがローカルで実行中

Bolt.newアプリが正常に実行されます (通常、Viteプロジェクトの場合) http://localhost:5173 ステップ 4: モバイル向けにビルドを設定する

Capacitorで使用するプロジェクトフレームワークに応じて、設定は異なります

オプション A: 自動設定のカーソル AI

カーソル 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"
  }
}

Option A: Automatic Configuration with Cursor AI next.config.js:

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

module.exports = nextConfig

Step 5: Projectを構築する

あなたのBolt.newアプリのプロダクションビルドを作成する時です。

オプション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プロジェクト: Bolt.newアプリケーションをモバイルに変換する dist ディレクトリ
Next.jsプロジェクト: Bolt.newビルド出力の out ディレクトリ

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

Step 6: Add Capacitor to Your Bolt.new Project

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

クリック

(Mac)または Command+K (Windows)とリクエスト: Ctrl+K Let's transform your web application into native mobile apps.

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

Cursor AIは、Capacitorのセットアッププロセスをすべて管理します。

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

Install Capacitor’s command-line tools:

npm install -D @capacitor/cli

Initialize your Capacitor project:

npx cap init

Capacitor initialization Bolt

Capacitorの初期化プロセスで、次の質問に答える必要があります:

アプリ名: 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.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

重要な注意事項:

あなたのWeb 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: カーソル AI を使用

カーソルに伝えます:

Build my project and sync it with Capacitor for mobile deployment

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

次のコマンドを順番に実行します:

npm run build
npx cap sync

Capacitor Boltを同期する

Step 9: Capgo Builder (推奨)でストア用バイナリをビルドする

MacやXcode/Android Studioのフルローカルパイプラインが必要なくても、App StoreとGoogle Playに配信することができます。 Capgo Builder __CAPGO_KEEP_0__ Builder

Capgo Builder

__CAPGO_KEEP_0__ Builder __CAPGO_KEEP_0__ Builder
CLI Builder Code Builder
__CAPGO_KEEP_0__ Builder __CAPGO_KEEP_0__ Builder

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キーストア)。 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

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

ウェブバンドルをOTA更新用にアップロードする:

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

ステップ10: ローカルテスト用にオプションのNative IDEを開く

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

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

iOS開発

オプション A: カーソル 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 の設定 (初回)

ターゲットを選択:
- プレイボタンの隣にあるデバイスセレクターをクリック
- For testing: Choose any iPhone simulator
- For real device: iPhoneをUSBで接続
Configure Code Signing:
- 左サイドバーでプロジェクト名をクリック
- “Signing & Capabilities”タブに移動
- 自動署名を有効にする
- Apple IDでログイン
- 注意: 実機はApple Developer Program ($99/year)が必要
アプリをビルド:
- ▶️ Playボタンをクリック
- 初回ビルド: 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 (自動):
- Android Studioは、欠けているコンポーネントを検出します
- 「SDKをインストールする」をクリックしてください
- これにより、約2-3GBのファイルがダウンロードされます
仮想デバイスを作成する:
- AVDマネージャーを開く (ツールバーの電話アイコン)
- 「+ 仮想デバイスを作成する」をクリックする
- 「Pixel 6」を選択する (良いデフォルト)
- システムイメージをダウンロードするように求められたらダウンロードする
- デフォルトのオプションでセットアップを完了する
アプリを実行する:
- ドロップダウンリストからエミュレータを選択する
- 緑の▶️実行ボタンをクリック
- __CAPGO_KEEP_0__
- 初回ビルド: 10-15分

__CAPGO_KEEP_0__:

エミュレータは自動で起動Androidのトラブルシューティング
Slow emulator「Gradle Sync failed」
: ファイル > キャッシュを無効化エミュレータが遅い

: AVD設定でハードウェアアクセレレーションを有効化

ビルドエラーが発生する

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

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

まだ問題が解決しない場合? エラーメッセージは、正確に何が間違っているかを教えてくれることが多いので、丁寧に読んでみてください!

ステップ12: Live Reload (開発)を有効にする

開発ワークフローを高速化するためのホットリロードを利用してください。

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

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

Enable live reload for my Capacitor app development

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

オプションB: 手動設定

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

# macOS
ipconfig getifaddr en0

# Windows  
ipconfig

更新してください 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

Live reloadが有効なBolt

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

デバイス固有の機能を追加してBolt.newアプリを強化します。

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

Cursorからのリクエスト:

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

Cursorはプラグインをインストールし、統合codeを作成します。

オプションB:手動プラグインのインストール

人気のあるネイティブプラグインをインストールします:

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

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

// 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;
};

コンポーネントで使用します

// 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;

変更を同期する

Cursor AIとともに:

Sync my native feature changes to all platforms

手動コマンド:

npx cap sync

ネイティブ機能を追加したBolt

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

App アイコンとスプラッシュ画面

オプション A: Cursor 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: カーソルAIでビルド

オプションB: マニュアルビルドプロセス

Create the final production build and prepare for app store deployment

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

npm run build
npx cap sync
npx cap copy

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

React/Viteプロジェクト

すべてのサイズを自動で生成する:

確認 base: './' Vite設定ファイルで
すべてのインポートが相対パスを使用していることを確認
Verify that the dist フォルダが正しく生成されていることを確認

Vue Projects

Vue Routerがモバイル用にハッシュモードを使用していることを確認
アセットが正しく参照されていることを確認
Verify component lazy loadingがモバイルコンテキストで動作していることを確認

Next.js Projects

静的エクスポートが正しく設定されていることを確認
静的コンテキストで動的インポートが動作していることを確認
API ルートが使用されていないか、適切に処理されていることを確認してください

ビルドエラー

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

node_modulesをクリアし、再インストールしてください

rm -rf node_modules package-lock.json
npm install

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

アセットが見つからない

アセットの読み込みに関する問題が発生した場合:

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

まとめ

おめでとうございます！あなたの Bolt.new プロジェクトを成功させて、ネイティブモバイルアプリケーションに変換しました。AI生成のウェブアプリは今、次のことができます:

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

次のステップ

Capgo ビルダーアプリフロー認証情報の注釈
ネイティブビルドビルダーネイティブビルドV2のヘローバッジ Capgo テストフライトとプレイストアのリリース用にクラウドネイティブビルドを使用することです。
アナリティクス:モバイルアナリティクスを追加してユーザーの行動を追跡する
パフォーマンス:モバイルアプリのパフォーマンスを監視して最適化する
テスト:モバイルデバイスや画面サイズが異なる環境でアプリをテストする

あなたのBolt.newの作成物は今、モバイルエコシステムに適合しています!

リソース

Capgoを使用して、即時更新をモバイルアプリに提供する方法を学びましょう無料アカウントに登録する今日

Transform Your Bolt.new Project into Native Mobile Apps with Capacitorを続ける

Transform Your Bolt.new Project into Native Mobile Apps with __CAPGO_KEEP_0__を使用している場合 Transform Your Bolt.new Project into Native Mobile Apps with Capacitorを使用して、ネイティブプラグインの作業計画を立て、Capacitor プラグインディレクトリと接続する __CAPGO_KEEP_0__ プラグインディレクトリの製品ワークフローに__CAPGO_KEEP_0__ プラグインディレクトリを接続する Capgo プラグインは__CAPGO_KEEP_1__によって提供される Capgo プラグインディレクトリ Capacitor Plugins by Capgo Capacitorの実装詳細についてはCapacitorプラグインによってCapgo プラグインの追加または更新 Capacitorの実装詳細についてはプラグインの追加または更新イオニックエンタープライズプラグインの代替 Capacitorの製品ワークフローについてはイオニックエンタープライズプラグインの代替、 Capgoネイティブビルド Capacitorの製品ワークフローについてはCapgoネイティブビルド。

CapacitorでBolt.newプロジェクトをNativeモバイルアプリに変換する

導入

なぜBolt.newアプリをモバイルに変換するか

Why Capacitor Over Expo?

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

Get Cursor - AIを活用した Code エディター

Cursorを最大限に活用するための設定を行ってください

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

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

プロジェクトファイル

代替: GitHubからクローンする

ステップ 2: プロジェクト フレームワークを特定する

package.jsonを確認

Step 3: Install Development Tools

Option A: Let Cursor AI Handle Everything

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

Capacitorで使用するプロジェクトフレームワークに応じて、設定は異なります

オプション A: 自動設定のカーソル AI

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

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

Step 5: Projectを構築する

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

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

ビルドの成功を確認する

Step 6: Add Capacitor to Your Bolt.new Project

クリック

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

何が起こったのですか?

ステップ7: Capacitorを設定する

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

オプション B: 手動設定

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

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

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

Step 9: Capgo Builder (推奨)でストア用バイナリをビルドする

Capgo Builder

Capgo Builder

クラウドビルドを要求する

ステップ10: ローカルテスト用にオプションのNative IDEを開く

iOS開発

Android 開発

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

iOS で実行

Xcode の設定 (初回)

Running on Android

Setting Up Android Studio (First Time)

ビルドエラーが発生する

ステップ12: Live Reload (開発)を有効にする

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

オプションB: 手動設定

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

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

オプションB:手動プラグインのインストール

コンポーネントで使用します

変更を同期する

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

App アイコンとスプラッシュ画面

Viteプロジェクトの場合、ビルドを最適化してください:

オプションA: カーソルAIでビルド

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

React/Viteプロジェクト

すべてのサイズを自動で生成する:

Vue Projects

Next.js Projects

ビルドエラー

アセットが見つからない

まとめ

次のステップ

リソース

Transform Your Bolt.new Project into Native Mobile Apps with Capacitorを続ける

ステップ 2: プロジェクトフレームワークを特定する