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

導入

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

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

始める前に: 要件と時間

推定時間: 3-5時間で完了

システム要件:

iOS 開発: macOS 12.0 以降の Mac (必須、回避方法なし)
Android 開発: Windows/Mac/Linux のどの OS でも
空き容量: 開発ツール用に 20-30GB
メモリ: 8GB RAM 最小、16GB 推奨

必要な予算:

Apple Developer: iOS App Store のために $99/年
Google Play: $25 one-time fee
Cursor Pro: $20/month (optional, speeds up development)

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

Node.js & npm
Xcode (Mac only, for iOS)
Android Studio (for Android)
さまざまなコマンドラインツール

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

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

Why Capacitor Over Expo?

: Expoと比較して、Capacitorは、特にウェブから始まる開発では、重要な利点を提供します

One Codebase, Three Platforms: React、Next.js、またはVue.jsの既存のウェブサイトは、ゼロの変換が必要なiOS、Android、そしてウェブアプリに変換
No Rebuilding Required: Bolt.newプロジェクトをそのまま使用 - Expoのように別のフレームワークに合わせる必要がない
真のWebファーストアプローチ: Expoはモバイルファーストでウェブは不快なので、Capacitorはウェブを第一級市民として扱います
シームレスな開発: ご自身の熟知のウェブ開発ツールとワークフローを引き続き使用
フレームワークの自由: React、Vue、Svelte、Next.jsなど、任意のウェブフレームワークと互換性があり - ExpoのReact Nativeにロックされていない

主な違い:

With Capacitorウェブサイトを構築 → モバイルに合わせる (異なるアプローチ、しばしば不快)
ウェブサイトを構築 → モバイルサポートを追加 (同じコードベース)ウェブサイトを構築 → モバイルに合わせる (異なるアプローチ、しばしば不快)

あなたの Bolt.new プロジェクトはすでにウェブアプリケーションなので、Capacitor は、code の 1 行も変更せずにモバイルに拡張できるようにします。Expo では、フレームワークに合わせてプロジェクトをすべて再構築する必要があります。

Step 1: 開発環境の設定

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

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

以下の手順に従ってください。 cursor.sh にアクセスし、OSに適したインストーラーをダウンロードしてください。
インストールプロセスを実行してください。
インストールが完了したら、Cursor を起動してください。

Cursor を起動してください

Cursorの最大生産性を実現するためのカーソル設定

Cursorの最大生産性を実現するには、初期設定が必要です:

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

カーソル設定

AI機能を有効化 - AIの助けを利用するには、AIの機能を有効にする必要があります:

モデルを許可

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

カーソルモデルを選択

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

コマンド実行を許可

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

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

__CAPGO_KEEP_0__

ブラウザでプロジェクトを表示
で __CAPGO_KEEP_1__ または __CAPGO_KEEP_2__ ボタン

プロジェクトファイルが含まれるZIPファイルをダウンロード
コンピューター上のフォルダに展開

プロジェクトファイル

Cursorで開く

プロジェクトが抽出されたら、Cursorでプロジェクトを開きます:

Use File > Open Folder Cursorで
抽出されたBolt.newプロジェクトフォルダを選択してください
Cursorはプロジェクトを読み込みます

Cursorで開く

代替: GitHubからクローン

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

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

カーソル内でクローン

ステップ 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) in 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のターミナルを開いてください with Shift+Command+T (Mac) or 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
インストールウィザードを完了する
Cursorのターミナルで:

cd your-bolt-project
npm install
npm run dev

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

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,
      },
    },
  },
})

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 __CAPGO_KEEP_0__

{
  "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: プロジェクトをビルドする

プロダクション用のビルドを作成するのにかかる時間です。

オプション A: カーサー AI を使用してビルド

カーサーに尋ねるだけです。

Build my Bolt.new project for production deployment

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

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

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

npm run build

Bolt.new Vite ビルド成功

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

npm run static

ビルドの成功を確認する

ビルドが正しく生成されたことを確認する

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

Bolt.newビルド出力

ステップ 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

Cursor AI は、すべてのセットアッププロセスを取り扱います。

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

Capacitor のコマンドラインツールをインストールしてください:

npm install -D @capacitor/cli

Capacitor プロジェクトを初期化してください:

npx cap init

Capacitor 初期化ボルト

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

アプリ名: Bolt.new プロジェクト名を入力してください
: 以下の形式で入力してくださいマニュアルセットアップを続けてください - 必要なパッケージをインストールしてください com.yourcompany.yourapp

Bundle ID

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

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

npx cap add ios
npx cap add android

Capacitor プラットフォームを追加しました Bolt

何が起こったの?

重要な注意事項

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

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

あなたのウェブ 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

Step 9: バータンターコンディコド

モバイルアプリのネイティブ開発環境にアクセスしてください。

アイシンバーターコンディコド

オプション A: Cursor AI、バーターコンディコドトアイシン

Open my iOS project in Xcode

オプション B: バストィンディコドトアイシン

npx cap open ios

アイシンバーターコンディコドトアイシン

アイシンバーターコンディコドトアイシン

Open my Android project in Android Studio

Step 10: バストィンディコドトアイシンバーターコンディコド

npx cap open android

mobile_app

build_and_run

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」を選択（デフォルトの良い選択）
- __CAPGO_KEEP_0__をダウンロードするように求められたときにシステムイメージをダウンロード
- デフォルトのオプションでセットアップを完了
アプリを実行:
- ドロップダウンからエミュレータを選択
- 緑の▶️実行ボタンをクリック
- 最初のビルド: 10-15 分
- エミュレータは自動的に開始

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

「Gradle Sync failed」Gradle Sync failedの場合: File > Invalidate Cachesを試してください
エミュレータが遅い場合エミュレータのAVD設定でハードウェアアクセレレーションを有効にします
ビルドエラー: Gradleを自動修正で更新

Android上のBoltアプリ

検証チェックリスト

ビルドが成功した後、確認する:

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

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

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

開発ワークフローを高速化するためのホットリロード

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

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

Enable live reload for my Capacitor app development

Cursorは自動で全ての設定を構成します。

Option B: 手動設定

ローカルIPアドレスを取得する:

# macOS
ipconfig getifaddr en0

# Windows  
ipconfig

Update your 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

ステップ12:ネイティブ機能の追加

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

Option A: AIパワード統合

Cursorからのリクエスト:

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

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

Option 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

Boltにnative機能を追加

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

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

オプション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プロジェクトの場合、Cursor AIを使用してビルドを最適化:

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

__CAPGO_KEEP_0__: {0}プロセス

npm run build
npx cap sync
npx cap copy

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

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

React/Viteプロジェクト

確認する base: './' __CAPGO_KEEP_1__はVite構成で設定されています
すべてのインポートが相対パスを使用していることを確認する
__CAPGO_KEEP_2__が正しく生成されていることを確認する dist Vueプロジェクト

モバイル用にVueルーターがハッシュモードを使用していることを確認する

アセットが正しく参照されていることを確認する
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__

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 即時オーバー・ザ・エア更新用
分析:ユーザーの行動を追跡するためのモバイル分析を追加
パフォーマンス:アプリのモバイルパフォーマンスを監視および最適化
テスト:さまざまなデバイスと画面サイズでアプリをテスト

Your Bolt.new の作成は、モバイルエコシステムに適した状態になりました!

リソース

Capgoを使用すると、即時更新を提供して、モバイルアプリの開発を簡素化できます。無料アカウントの登録今日すぐ。

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

導入

始める前に: 要件と時間

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

Why Capacitor Over Expo?

Step 1: 開発環境の設定

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

Cursorの最大生産性を実現するためのカーソル設定

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

__CAPGO_KEEP_0__

Cursorで開く

代替: GitHubからクローン

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

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

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

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

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

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

オプション A: カーソル AI を使用した自動設定

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

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

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

オプション A: カーサー AI を使用してビルド

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

ビルドの成功を確認する

ステップ 6: CapacitorをBolt.newプロジェクトに追加してください

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

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

何が起こったの?

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

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

オプションB：手動設定

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

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

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

Step 9: バータンターコンディコド

アイシンバーターコンディコド

アイシンバーターコンディコドトアイシン

build_and_run

iOSで実行中

Xcodeの初回設定

Android上で稼働中

Android Studioの初回設定

検証チェックリスト

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

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

Option B: 手動設定

ステップ12:ネイティブ機能の追加

Option A: AIパワード統合

Option B: 手動プラグインのインストール

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

変更を同期する

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

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

Optimize Build

最終ビルド

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

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

React/Viteプロジェクト

モバイル用にVueルーターがハッシュモードを使用していることを確認する

Next.js Projects

ビルド エラー

アセットの読み込みに関する問題

まとめ

次のステップ

リソース

ビルドエラー