導入
Bolt.new Bolt.newは、React、Vue、Svelte、他々のフレームワークを使用して、AIパワーでフルスタックWebアプリケーションを生成する革新的な開発プラットフォームです。 しかし、Bolt.newの創造をモバイルデバイスに持ち込みたい場合はどうすればいいのでしょうか? この包括的なチュートリアルでは、__CAPGO_KEEP_0__を使用してBolt.newプロジェクトをエクスポートし、Nativeモバイルアプリに変換する方法を紹介します。 Capacitor.
Bolt.newプロジェクトがReact、Vue、またはサポートされている別のフレームワークを使用している場合、このガイドはカメラ、ストレージ、プッシュ通知などのデバイス機能にアクセスできるネイティブiOSおよびAndroidアプリを作成するのに役立ちます。
開始する前に: 要件 & 時間
予想時間: 完全なセットアップに 3-5 時間
システム要件:
- iOS開発: macOS 12.0+ (必須、ワークアラウンドなし)搭載のMac
- Android開発: Windows/Mac/LinuxのどのOSでも
- フリースペース: 開発ツール用に20-30GB
- __CAPGO_KEEP_0__: 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用)
- Various command-line tools
Why Transform Your Bolt.new App to Mobile?
- Cross-Platform Reach: Deploy your AI-generated app to mobile app stores
- Native Device Access: Use camera, GPS, file system, and other native features
- Improved Performance: Native container provides better performance than web views
- Offline Capabilities: Work offline with native storage solutions
- Push Notifications: Engage users with native push notification support
Why Capacitor Over Expo?
モバイル開発の選択肢を検討している場合、Capacitor はExpo よりも大きな利点を提供します。特に、Web フォーサースト開発の場合に限ります。
- One Codebase, Three Platforms:既存の React、Next.js、または Vue.js ウェブサイトは、ゼロの変換が必要なまま iOS、Android、そしてウェブアプリケーションに変換されます。
- No Rebuilding Required:Bolt.new プロジェクトをそのまま取り入れることができます - それがExpoのように別のフレームワークに書き直す必要があります。
- True Web-First Approach:Expoはモバイルファーストでウェブは汚いですが、Capacitorはウェブを第一級の市民として扱います。
- Seamless Development:ウェブ開発の熟練したツールとワークフローを引き続き使用できます。
- Framework Freedom:ウェブフレームワーク (React、Vue、Svelte、Next.js、など) と互換性があります - Expoのように React Native にロックされていません。
The Key Difference:
- Capacitor: Build your website → Add mobile support (same codebase)
- __CAPGO_KEEP_0__: Build for mobile → Try to make web work (different approach, often clunky)
Since your Bolt.new project is already a web application, Capacitor lets you extend it to mobile without changing a single line of code.
Capgo
Get Cursor - Your AI-Powered Code Editor
Get Cursor - Your AI-Powered Capgo Editor To work efficiently with your Bolt.new project, we’ll use, an intelligent code editor that simplifies development:
- , an intelligent Capgo editor that simplifies development: カーソル.sh と、OSに適したインストーラーを取得する
- インストールプロセスを実行する
- 準備ができたらカーソルを起動する
カーソルを最大限の生産性で設定する
カーソルを最大限の生産性で使用するには、初期設定が必要です:
-
カーソル プロを検討する - フリーベース版は機能しますが、プロ ($20/月) を購入すると、次の機能が開放されます:
- 無制限のAIアシスタンス
- プレミアムモデル (GPT-4、Claude)
- 即時レスポンス
- プレミアムサポート
-
設定アクセス と
Command+,(Mac) またはCtrl+,(Windows)
- AI機能を有効化 - AIアシスタンスが有効になっていることを確認してください:
- AIモデルを選択 - ClaudeまたはGPT-4を推奨します:
- 実行コマンドの有効化 - カーソルがコマンドを自動実行します:
ステップ 2: Bolt.new プロジェクトをエクスポートする
Bolt.new プロジェクトをカーソルに取り込んでみましょう。
プロジェクトをダウンロードする
- ブラウザでBolt.newプロジェクトを表示する
- 「 ダウンロード または エクスポート 」ボタンをBoltのインターフェースで見つける
- プロジェクトの ZIP ファイルをダウンロード
- コンピューター上のフォルダーに展開
Cursor で開く
展開した後、Cursor でプロジェクトを開く:
- Use
File > Open FolderCursor - Cursor で開く
- 選択した Bolt.new プロジェクトフォルダー
Cursor で開く (代替方法: GitHub からクローンする)
GitHubにBolt.newを接続した場合
- Press
Shift+Command+P(Mac)Shift+Ctrl+P(Windows) - 「Git: Clone」を検索
- リポジトリのURLを入力
- 保存する場所を選択
ステップ2：プロジェクトのフレームワークを特定
Bolt.newは、異なるフレームワークを使用してプロジェクトを生成できます。まず、どのフレームワークを使用しているかを特定してみましょう:
package.jsonを確認
開く 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の設定
- プロジェクトのすべての依存関係のインストール
- 開発サーバーの起動
オプション B: 手動インストールプロセス
AIアプローチが問題を発生させる場合、または、手動コントロールを好む場合は:
最初に、Cursorのターミナルを開きます （Mac）または Shift+Command+T （Windows） Shift+Ctrl+T macOSユーザー向け:
Windowsユーザー向け:
# 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 devNode.jsインストーラーをダウンロードする
- nodejs.org インストールウィザードを完了
- __CAPGO_KEEP_0__
- In __CAPGO_KEEP_0__のターミナル内:
cd your-bolt-project
npm install
npm run dev
あなたのBolt.newアプリは、通常は http://localhost:5173 Viteプロジェクトの場合
ステップ 4: モバイル用にビルドを設定する
あなたの設定はあなたのプロジェクトのフレームワークに応じて異なります。
オプション 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,
},
},
},
})For Vue + Vite Projects:
__CAPGO_KEEP_0__を変更 vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
base: './',
build: {
outDir: 'dist',
assetsDir: 'assets',
},
})For Next.js Projects
__CAPGO_KEEP_1__に追加 package.json scripts:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"static": "next build && next export"
}
}__CAPGO_KEEP_2__を更新 next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
trailingSlash: true,
images: {
unoptimized: true,
},
}
module.exports = nextConfigStep 5: __CAPGO_KEEP_3__をビルド
__CAPGO_KEEP_4__のプロダクションビルドを作成するのにかかる時間です。
Option A: Cursor AIでビルド
Cursorに質問してください:
Build my Bolt.new project for production deploymentCursorは、フレームワークに応じて適切なビルドコマンドを実行します。
Option B: 手動でビルド
Viteベースのプロジェクト (React/Vue/Svelte):
npm run build
Next.js アプリケーション:
npm run staticビルド成功を確認
正しい出力を生成したことを確認してください:
- Vite プロジェクト: ビルド結果を確認する
distディレクトリ - Next.js プロジェクト: ビルド結果を確認する
outディレクトリ
Step 6: Capacitor をあなたの Bolt.new プロジェクトに追加する
ウェブアプリケーションをネイティブモバイルアプリケーションに変換しましょう。
オプション A: カーソル AI を使用したクイックセットアップ
Press 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/cliCapacitor プロジェクトを初期化する:
npx cap init
あなたは次の質問に答える必要があります:
- アプリ名: Bolt.new プロジェクト名
- Bundle ID: 以下の形式
com.yourcompany.yourapp
手動設定を続行 - 必要なパッケージのインストール:
npm install @capacitor/core @capacitor/ios @capacitor/androidモバイルプラットフォームのサポートを追加:
npx cap add ios
npx cap add android
何が起こったのですか?
あなたの 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: __CAPGO_KEEP_0__ を構成する
Capacitor を自分のフレームワークに合わせて構成する時間です。
Time to configure Capacitor for your specific framework.
カーソルの助けを求めます:
オプション B: 手動構成
Configure capacitor.config.ts for my Bolt.new project build outputViteベースのアプリケーション用:
Next.jsアプリケーション用:
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;ステップ 8: ビルドと同期
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;各プラットフォームには独自のビルドプロセスがあります
モバイル デプロイ用にアプリを準備します。
オプション A: カーソル AI を使用
カーソルに伝えます:
Build my project and sync it with Capacitor for mobile deploymentオプション B: 手動プロセス
次のコマンドをシーケンスで実行します:
npm run build
npx cap sync
ステップ 9: Capgo ビルダーを使用してストア用にビルドする (推奨)
Mac またはフルローカル Xcode/Android Studio パイプラインが必要なくても、App Store と Google Play に配信できます。 Capgo ビルダー __CAPGO_KEEP_0__ ビルダーは、iOS と Android のビルドをクラウドからコンパイル、署名、提出できるため、最速のパスです。Bolt.new からエクスポートされた vibe コード アプリ用です。
Capgo ビルダーを使用する理由
- iOS 用には Mac が必要ありません — Windows、Linux、またはAIコーディング環境からビルド
- One CLI ワークフロー — Cursor、Claude Code、またはCodexにスクリプトを簡単に作成して手動で送信
- Live Updatesとペア — 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 androidApple証明書、プロビジョニングプロファイル、Androidキーストアの署名資格情報を一度保存。 Managing Credentials と WindowsからiOSをビルド.
Cloud Buildを要求
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 releaseCapgo Capgo のビルダーは、ターミナルでビルドログを流します。 App Store Connect が設定されている場合、iOS ビルドは TestFlight に直接送信されます。
__CAPGO_KEEP_0__ のウェブ バンドルをアップロードして、OTA 更新を実行します:
npx @capgo/cli@latest bundle upload --channel productionStep 10: __CAPGO_KEEP_0__ (オプション: ローカル テスト用)
__CAPGO_KEEP_0__ が Mac を所有している場合、またはエミュレータ テストをクラウド ビルド前に実行したい場合は、ローカルにネイティブ プロジェクトを開きます:
__CAPGO_KEEP_0__ アプリのネイティブ デバッガをアクセスします。
iOS 開発
オプション A: Cursor AI を介して
Open my iOS project in Xcodeオプション B: ターミナル コマンド
npx cap open ios
Android 開発
オプション A: Cursor AI を介して
Open my Android project in Android Studioオプション B: ターミナル コマンド
npx cap open android
ステップ11: ローカルでビルドおよび実行（任意）
iOS上で実行
Xcodeの設定（初回）
-
ターゲットを選択:
- プレイボタン横のデバイスセレクタをクリック
- テスト用: iPhoneシミュレータを選択
- 実機用: iPhoneをUSBで接続
-
Codeの署名を設定:
- 左サイドバーのプロジェクト名をクリック
- 「署名および機能」タブに移動
- 「署名を自動管理」機能を有効
- __CAPGO_KEEP_0__
- __CAPGO_KEEP_1____CAPGO_KEEP_2__
-
__CAPGO_KEEP_3__:
- __CAPGO_KEEP_4__
- __CAPGO_KEEP_5__
- __CAPGO_KEEP_6__
__CAPGO_KEEP_7__:
- __CAPGO_KEEP_8____CAPGO_KEEP_9__
- __CAPGO_KEEP_10____CAPGO_KEEP_11__
- シミュレータの問題: シミュレータを再起動する (デバイス > 再起動)
Android上で実行中
Android Studioの設定 (初回)
-
SDKの設定 (自動)
- Android Studioは、欠落しているコンポーネントを検出します
- 「SDKをインストールする」ボタンをクリックしてください
- ファイルのダウンロードは約2-3GBとなります
-
仮想デバイスを作成する:
- AVDマネージャーを開く (ツールバーの電話アイコン)
- 「+」で仮想デバイスを作成
- 「Pixel 6」を選択（デフォルトの良い選択)
- システムイメージのダウンロードを求められたらダウンロード
- デフォルトのオプションでセットアップを完了
-
アプリを実行:
- ドロップダウンからエミュレータを選択
- 緑の▶️実行ボタンをクリック
- 最初のビルド: 10-15分
- エミュレータは自動的に起動
Androidのトラブルシューティング:
- 「Gradle Sync failed」: ファイル > 無効なキャッシュをクリックしてみてください
- 遅いエミュレータ: AVD設定でハードウェアアクセレレーションを有効にします
- ビルドエラー：Gradleを修正された修正を通じて更新
検証チェックリスト
ビルドが成功した後、確認してください：
✅ アプリがクラッシュせずに起動します ✅ Bolt.newのコンテンツが正しく表示されます ✅ ボタンとインタラクションが正常に機能します ✅ コンソールに赤いエラーが表示されません
まだ問題が残っている場合 エラーメッセージはほとんどの場合、正確に何が不正であるかを教えてくれます - それらを慎重に読んでください!
ステップ12：ライブリロードを有効にします（開発用）
開発ワークフローを高速化するには、ホットリロードを使用してください。
オプション 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
ステップ 13: ネイティブ機能の追加
デバイス固有の機能を追加して Bolt.new アプリを強化します。
オプション A: AI ドライブの統合
カーソルからのリクエスト:
Add native share, camera, and geolocation features to my Bolt.new appCursor はプラグインのインストールと統合の作成を実行します code。
オプション B: マニュアル プラグイン インストール
人気のnative プラグインをインストールします:
npm i @capacitor/share @capacitor/camera @capacitor/geolocationReact プロジェクト用のユーティリティファイルを作成します:
// 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
ステップ 14: プロダクション用に最適化
アプリ アイコンとスプラッシュ スクリーン
オプション A: Cursor AI セットアップ
Request:
Create app icons and splash screens for my mobile appOption B: Manual Asset Creation
- Get the assets tool:
npm install -D @capacitor/assets-
Prepare your graphics:
- Create
assets/icon.png(__CAPGO_KEEP_0__x__CAPGO_KEEP_1__px) - Create
assets/splash.png(__CAPGO_KEEP_2__x__CAPGO_KEEP_3__px)
- Create
-
Generate all sizes automatically:
npx capacitor-assets generate
Optimize Build
For Vite projects, optimize your build:
// 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__はVite設定ファイルで設定されている - すべてのimportが相対パスを使用していることを確認
- __CAPGO_KEEP_1__が正しく生成されていることを確認
dist__CAPGO_KEEP_2__フォルダが正しく生成されていることを確認
Vueプロジェクト
- モバイル用に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 BuilderTestFlightおよびPlay Storeのリリース用にクラウドネイティブビルドを使用する
- リアルタイム更新リアルタイム更新を実装する Capgo 即時オーバー・ザ・エア更新
- 分析ユーザー行動を追跡するためのモバイル分析を追加する
- パフォーマンスモバイルパフォーマンスを監視および最適化する
- テストさまざまなデバイスと画面サイズでアプリをテストする
Bolt.newの作成は、モバイルエコシステムに適した状態になりました!
リソース
- Bolt.newプラットフォーム
- Capacitor ドキュメント
- Viteモバイルデプロイメントガイド
- Capgo ビルダー — Cloud Native ビルド
- Capgo — Capacitor アプリのリアルタイム更新
- Base44をモバイルに
Capgo を使用して、即時更新をモバイルアプリに提供する方法を学びましょう。 無料アカウントに登録する 今日。
Transform Your Bolt.new Project into Native Mobile Apps with Capacitor
あなたが使用している場合 Capacitorで作成されたBolt.newプロジェクトをネイティブモバイルアプリケーションに変換する ネイティブプラグインの作業計画を行う場合、__CAPGO_KEEP_0__と接続する Capgo プラグインディレクトリ Capgo プラグインディレクトリの製品ワークフロー Capacitor プラグイン(Capgo) Capacitor プラグイン(Capgo)の実装詳細 プラグインの追加または更新 プラグインの追加または更新の実装詳細 Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフロー Capgo ネイティブビルド Capgoの製品ワークフローです。
