Capacitor

イントロダクション

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

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

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

予想時間: 完全なセットアップに 3-5 時間かかります

システム要件:

iOS開発: macOS 12.0+ (必須、ワークアラウンドなし)搭載のMac
Android開発: Any OS (Windows/Mac/Linux)
フリースペース: 20-30GB for development tools
メモリ: 8GB RAM minimum, 16GB recommended

予算が必要:

Apple Developer: $99/year (for iOS App Store)
Google Play: $25 one-time fee
Cursor Pro: $20/month (optional, speeds up development)

Capgoでインストールするもの:

Node.js & npm
Xcode (Macのみ、iOS用)
Android Studio (Android用)
さまざまなコマンドラインツール

Bolt.newアプリをモバイルに変換する理由

クロスプラットフォームのアクセス: モバイルアプリストアにAI生成アプリを展開
ネイティブデバイスへのアクセス: カメラ、GPS、ファイルシステム、他々のネイティブ機能を使用
パフォーマンスの向上: ネイティブコンテナはウェブビューよりもパフォーマンスが良いため
オフライン機能: オフラインモードでnativeストレージソリューションを使用
プッシュ通知: ユーザーに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のように別のフレームワークに変換する必要はありません
Web-Firstアプローチ: 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 にロックされていません

主な違い:

With Capacitor: モバイル用にビルド → ウェブを試みる (異なるアプローチ、しばしば不快)
あなたの Bolt.new プロジェクトはすでにウェブアプリケーションです。したがって、__CAPGO_KEEP_0__ は、__CAPGO_KEEP_1__ の 1 行も変更せずにモバイルを拡張できます。Expo は、フレームワークのためにプロジェクト全体を再構築する必要があります。ステップ 1: 開発環境の設定

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.

ステップ 2: __CAPGO_KEEP_2__ を使用してプロジェクトを設定

Get Cursor - Your AI-Powered Code Editor

効率的にBolt.newプロジェクトと作業するには、 Cursor、開発を簡素化するための賢いcodeエディターを使用します。

Cursor にアクセスして cursor.sh
で、OSに適したインストーラーをダウンロードしてください。
インストールプロセスを実行してください。

Cursorを起動してください。

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

Cursor Proを検討してください。 - 無料版は機能しますが、Capgo Pro ($20/month) を購入すると機能が解放されます:
- 無制限のAIアシスタンス
- プレミアムモデル (GPT-4、Claude)
- 即時レスポンス
- プレミアムサポート
設定にアクセス Mac または Command+, Windows Ctrl+, カーソル設定

AI機能を有効化

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

モデルを許可する

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

カーソルモデルを選択する

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

実行コマンドを許可する

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

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

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

ブラウザでBolt.newプロジェクトに移動する
プロジェクトを探す ダウンロード または Capacitorライブアップデートの代替手段を比較するページ。 Capacitorライブアップデートの代替手段を比較するページ。

Capawesomeの比較ページ。
コンサルティングサービスページ。

Appflowの比較/移行マーケティングコピー。

Appflowのプラグインまたは

エクスポート

ボルトのインターフェイス内のボタン File > Open Folder ボルト.newのダウンロードボタンです。
Bolt.newプロジェクトフォルダを選択してください
カーソルはプロジェクトを読み込んでいます

カーソルで開く

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

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

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

カーソルでクローンする

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アプリケーション

Step 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)」または「(Windows)」 Shift+Command+T macOS のユーザー向け: Shift+Ctrl+T Capacitor

Capacitor

# 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

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

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

オプション 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プロジェクト: Bolt.newの出力ディレクトリを確認する out ディレクトリ

Bolt.newビルド出力

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

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

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

Macの場合:(Mac)を押してください Command+K Windowsの場合:(Windows)を押してください Ctrl+K Cursor AIはすべてのセットアッププロセスを処理します。

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

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

Let's transform your web application into native mobile apps.

Install Capacitor’s command-line tools:

npm install -D @capacitor/cli

Initialize your Capacitor project:

npx cap init

Capacitor initialization 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 platforms added Bolt

何が起こったのですか?

あなたの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: Cursor AIを使用

Cursorに伝える:

Build my project and sync it with Capacitor for mobile deployment

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

__CAPGO_KEEP_0__ sync Bolt complete を連続して実行する:

npm run build
npx cap sync

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

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

Prepare your app for mobile deployment. Capgo Builder __CAPGO_KEEP_0__ Builder

Capgo Builder

__CAPGO_KEEP_0__ Builder __CAPGO_KEEP_0__
CLI Code
__CAPGO_KEEP_0__ __CAPGO_KEEP_0__

Capgo

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

__CAPGO_KEEP_0__ 管理資格情報と 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

バンドルをアップロードして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のトラブルシューティング:

アカウントが見つかりません: Xcode > 設定 > アカウントにApple IDを追加してください
ビルドに失敗しました: ビルドフォルダをクリーンする (Shift+Command+K) して再試行してください
シミュレータの問題: Device > 再起動を使用してシミュレータを再起動してください

iOS上でBoltアプリが実行中

Android上で実行中

Android Studioの設定 (初回)

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

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

“Gradle sync failed”Gradle sync failed
Try File > Invalidate Cachesエミュレータが遅い
Enable hardware acceleration in AVD settingsビルドエラー

Update Gradle via suggested fixes

BoltアプリがAndroidで実行中

検証チェックリスト

ビルドが成功したら、確認してください： ✅ アプリがクラッシュせずに起動します ✅ 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

Bolt の Live Reload が有効になりました

Step 13: Native機能の追加

Bolt.newアプリをCapacitorでモバイル対応させる

オプション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;

変更をSyncする

Cursor AIと同期する

Sync my native feature changes to all platforms

マニュアルコマンド:

npx cap sync

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

ステップ 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アプリのアセットが生成されました

Optimize Build

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プロジェクト

Vite configで 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デバイス上でネイティブに実行できます
デバイスの機能にアクセスする
アプリストアで配布する
最適化されたモバイルユーザー体験を提供する

次のステップ

CapgoのCapgoビルダークラウドネイティブビルドを使用する
ライブアップデート:実装 Capgo 即時オーバー・ザ・エア更新
分析:ユーザー行動を追跡するためにモバイル分析を追加する
パフォーマンス:モニターと最適化する
テスト:さまざまなデバイスと画面サイズでアプリをテスト

モバイルエコシステムに適したアプリが完成しました!

リソース

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

Keep going from Transform Your Bolt.new Project into Native Mobile Apps with Capacitor

Capgoを使用してnative pluginの作業計画を行っている場合、Capgo Plugin Directoryと接続してください。 Transform Your Bolt.new Project into Native Mobile Apps with Capacitor Capgo Plugin Directoryの__CAPGO_KEEP_1__によるプラグイン Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Capgo Plugin Directoryの製品ワークフロー Capacitorを使用して新しいアプリをモバイルに変換する Ionic Enterprise プラグインの代替 Capacitorを使用して新しいアプリをモバイルに変換する Capgo Native Builds for the product workflow in Capgo Native Builds.

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

イントロダクション

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

Bolt.newアプリをモバイルに変換する理由

Why Capacitor Over Expo?

ステップ 2: __CAPGO_KEEP_2__ を使用してプロジェクトを設定

Get Cursor - Your AI-Powered Code Editor

Cursorを起動してください。

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

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

Appflowのプラグインまたは

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

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

package.json を確認してください

Step 3: 開発ツールのインストール

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

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

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

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

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

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

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

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

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

ビルド成功を確認

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

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

Let's transform your web application into native mobile apps.

何が起こったのですか?

ステップ 7: Capacitorの設定

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

オプション B: 手動設定

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

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

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

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

Capgo Builder

Capgo

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

ステップ10:ローカルテスト用にネイティブIDEを開く(任意)

iOS開発

Android開発

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

iOSで実行

Xcodeの設定 (初回)

Android上で実行中

Android Studioの設定 (初回)

BoltアプリがAndroidで実行中

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

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

オプション B: 手動設定

Step 13: Native機能の追加

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

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

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

変更をSyncする

ステップ 14: プロダクション用に最適化する

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

Optimize Build

最終ビルド

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

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

React/Viteプロジェクト

Vue Projects

Next.js Projects

ビルドエラー

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

まとめ

次のステップ

リソース

Keep going from Transform Your Bolt.new Project into Native Mobile Apps with Capacitor

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

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

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

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