Capacitor

導入

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

Capacitorを使用した新しいアプリをモバイルに変換する

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

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

システム要件:

iOS開発: macOS 12.0+ (必須、ワークアラウンドなし)
Android開発: Windows/Mac/Linux (任意)
空き容量: 開発ツール用に 20-30 GB
メモリ8GB RAMの最小限、16GBを推奨

予算が必要:

Apple Developer99 ドル/年 (iOS App Storeの場合)
Google Play25 ドルの一時料金
Cursor Pro20 ドル/月 (開発を高速化するオプション)

インストールするもの:

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

なぜBolt.newアプリをモバイルに変換する必要がありますか?

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

Why Capacitor Over Expo?

Capacitorを使用することで、Expoと比較して、特にWebから始める開発において、多くの利点が得られます。

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
シームレスな開発: ご自身の熟知のWeb開発ツールとワークフローをそのまま使用
フレームワークの自由: React Nativeにロックされていないため、React、Vue、Svelte、Next.js、など、任意のWebフレームワークと組み合わせることが可能

The Key Difference:

With Capacitor:
Build your website → Add mobile support (same codebase)With 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.

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

Get Cursor - Your AI-Powered Code Editor

Get Cursor - Your AI-Powered Editor To work efficiently with your Bolt.new project, we’ll use, an intelligent code editor that simplifies development:

Head to cursor.sh そして、ご自分のOSのインストーラーをダウンロードしてください
インストールプロセスを実行してください
Cursorを起動してください

Cursorを起動してください

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

Cursor Proを検討してください

- 無料版は機能しますが、Pro (¥2,000/月)を購入すると、以下の機能が利用可能になります: 無制限のAIアシスタンス
- プレミアムモデル (GPT-4、Claude)
- 即時レスポンス
- cursor.sh
- プレミアムサポート
設定へのアクセス と Command+, (Mac) または Ctrl+, (Windows)

カーソル設定

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

モデルへの許可

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

カーソルモデルを選択

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

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

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

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

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

ブラウザで Bolt.new プロジェクトを探してください
または ダウンロード Capacitor のライブアップデートの代替 エクスポート Bolt のインターフェイスのボタン

__CAPGO_KEEP_0__ ZIP ファイルをダウンロードしてください
__CAPGO_KEEP_0__ ZIP ファイルを解凍してください

Bolt.new プロジェクトファイル

Cursor で開く

Cursor で使用 File > Open Folder Cursor で使用
Cursor でプロジェクトフォルダを選択
Cursor でプロジェクトを読み込む

Cursor で開く

Alternative: GitHub からクローン

あなたが GitHub に Bolt.new を接続した場合:

押す Shift+Command+P (Mac) または Shift+Ctrl+P (Windows)
Search for “Git: Clone”
Enter your repository URL
Pick a location to save it

Clone in Cursor

Step 2: Identify Your Project Framework

Bolt.new can generate projects using different frameworks. Let’s identify what you’re working with:

Check package.json

Open 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が全てを処理する

押す 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のインストール

Option B: 手動インストールプロセス

あなたが手動コントロールを好む場合、またはAIアプローチが問題を発生させる場合:

最初にCursorのターミナルを開きます with Shift+Command+T (Mac)または 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ユーザー向け:

Node.jsインストーラーをダウンロードする nodejs.org
Complete the installation wizard
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

Cursorはあなたのフレームワークを検出して、適切な設定を適用します。

オプション 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 プロジェクトの場合

あなたの package.json スクリプトに追加する

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

更新 next.config.js:

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

module.exports = nextConfig

ステップ 5: プロジェクトをビルドする

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

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

カーソルに質問するだけです。

Build my Bolt.new project for production deployment

カーソルは、フレームワークに応じて適切なビルドコマンドを実行します。

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

Viteベースのプロジェクト (React/Vue/Svelte) に対して:

npm run build

__CAPGO_KEEP_0__

Viteビルド成功: Bolt.new

npm run static

Next.jsアプリケーションに対して:

ビルドの成功を確認する

ビルドが正しく生成されたことを確認する:Viteプロジェクト dist : Bolt.newビルドの出力を見つける
ディレクトリNext.jsプロジェクト out : Bolt.newビルドの出力を確認する

ディレクトリ

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

あなたのウェブアプリケーションをネイティブモバイルアプリケーションに変換する

オプション A: カーソル AI を使用したクイックセットアップ

クリック Command+K (Mac) または Ctrl+K (Windows) を押して、次のようになります:

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

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

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

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

何が起こった?

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

カーソルに伝える。

Build my project and sync it with Capacitor for mobile deployment

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

次のコマンドをシーケンスで実行する。

npm run build
npx cap sync

Capacitor sync Bolt complete

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

Mac またはフルローカル Xcode/Android Studio パイプラインが必要なく、App Store と Google Play に配信する。 Capgo ビルダー Capgo の __CAPGO_KEEP_0__ ビルダーは、Bolt.new からエクスポートされた vibe コードアプリを迅速に iOS と Android のビルドに変換します。

なぜ Capgo ビルダーを使用するか?

iOS に Mac が必要ない。 — Windows、Linux、またはAIコーディング環境からビルド
One CLI ワークフロー — Cursor、Claude Code、またはCodexに簡単にスクリプトを書き直すことができます
ライブアップデートのペア — JS/UIの修正をオンエアで配信し、プラグインまたは権限が変更された場合のみネイティブバイナリを再構築

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

サインイン用の資格情報を一度保存 (Apple証明書、プロビジョニングプロファイル、Androidキーストア)。詳しくは管理資格情報と 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: Cursor AIを介して

Open my Android project in Android Studio

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

npx cap open android

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

ステップ11: ローカルでビルドと実行 (任意)

iOSで実行

Xcodeの設定 (初回)

ターゲットを選択:
- Playボタン横のデバイスセレクターをクリック
- ページ/エリア: Capgo Builder / ネイティブクラウドビルド製品ページ。役割: 短いUIラベルまたはナビゲーションアイテム。メッセージキー `native_build_builder_credit_next` (ネイティブビルドビルダークレジット次)
- テスト用: iPhoneシミュレータを選択
Configure Code Signing:
- __CAPGO_KEEP_0__の署名を設定
- 左サイドバーのプロジェクト名をクリック
- 「署名と機能」タブに移動してください
- Apple IDでサインイン
- 注意: 実機はApple Developer Program ($99/年)が必要です
アプリを構築:
- ▶️再生ボタンをクリック
- 最初のビルド: 5-10分 (待ってください!)
- : Capgo Builder / ネイティブクラウドビルド製品ページ (Capgo Builder / Native Cloud Build Product Page)

: ビルド中の進行状況を上部のバーで確認:

iOSのトラブルシューティング「アカウントが見つかりません」
: Xcode > 設定 > アカウントでApple IDを追加「ビルドに失敗しました」
Simulatorの問題: Simulatorを再起動するには、デバイス > 再起動をクリックしてください。

iOS上のBoltアプリ

Android上の実行

Android Studioの設定（初回のみ）

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

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

「Gradle Sync failed」「キャッシュを無効化してください。ファイル > キャッシュを無効化」を試してください
遅いエミュレータ: Android 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

カーソルで更新: 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

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

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

オプション A: AI パワードインテグレーション

カーソルからのリクエスト:

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

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

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

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

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

Native機能を追加した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 アプリアセット生成

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 の構成で設定されていることを確認する base: './' すべてのインポートが相対パスを使用していることを確認する
が正しく生成されていることを確認する
Vue プロジェクト dist __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

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

Next.js Projects

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

ビルドエラー

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

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

rm -rf node_modules package-lock.json
npm install

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

欠落している資産

資産の読み込みに関する問題の場合:

すべての資産がパブリックフォルダにあることを確認する
画像やファイルのパスを相対パスで指定する
ビルドプロセスが必要なすべての資産をコピーしていることを確認する

結論

あなたはCapacitorを使用して、Bolt.newプロジェクトをネイティブモバイルアプリケーションに変換することに成功しました。AIで生成されたWebアプリは、以下のことができます:

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

次のステップ

Capgo BuilderCloud Native ビルドを使用して、テストフライトとプレイストアのリリースを行う
ライブアップデート実装 Capgo 即時オーバー・ザ・エアアップデート
分析モバイル分析を追加してユーザーの行動を追跡する
パフォーマンスモバイルパフォーマンスを監視して最適化する
テストさまざまなデバイスと画面サイズでアプリをテストする

あなたのBolt.newプロジェクトは、Capacitorを使用してモバイルエコシステムに適応しました!

リソース

Capgoがあなたのモバイルアプリにリアルタイムアップデートを提供する方法を学びましょう無料アカウントに登録して今日

Transform Your Bolt.new Project into Native Mobile Apps with Capacitorから続きましょう

If you are using Transform Your Bolt.new Project into Native Mobile Apps with Capacitor ネイティブプラグインの作業計画を立てるには、Capacitorを Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, プラグインの追加または更新プラグインの追加または更新の実装詳細 Ionic Enterpriseプラグインの代替 Ionic Enterpriseプラグインの代替の製品ワークフロー Capgo Native Builds Capgo製品ワークフローにおけるCapgoネイティブビルド。

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

導入

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

なぜBolt.newアプリをモバイルに変換する必要がありますか?

Why Capacitor Over Expo?

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

Get Cursor - Your AI-Powered Code Editor

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

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

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

Cursor で開く

Alternative: GitHub からクローン

Step 2: Identify Your Project Framework

Check package.json

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

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

Option B: 手動インストールプロセス

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

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

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

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

ステップ 5: プロジェクトをビルドする

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

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

Next.jsアプリケーションに対して:

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

オプション A: カーソル AI を使用したクイックセットアップ

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

何が起こった?

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

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

オプション B: 手動構成

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

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

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

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

なぜ Capgo ビルダーを使用するか?

Capgo ビルダーを設定

クラウドビルドを要求

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

iOS開発

Android開発

ステップ11: ローカルでビルドと実行 (任意)

iOSで実行

Xcodeの設定 (初回)

Android上の実行

Android Studioの設定（初回のみ）

検証チェックリスト

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

オプション A: カーソルを使用した自動セットアップ

オプション B: 手動設定

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

オプション A: AI パワード インテグレーション

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

コンポーネントで使用:

変更を同期:

ステップ 14: 生成環境を最適化する

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

Optimize Build

最終ビルド

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

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

React/Vite プロジェクト

__CAPGO_KEEP_0__

Next.js Projects

ビルド エラー

欠落している資産

結論

次のステップ

リソース

Transform Your Bolt.new Project into Native Mobile Apps with Capacitorから続きましょう

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

オプション A: AI パワードインテグレーション

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

ビルドエラー