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

はじめに

Bolt.new は、React、Vue、Svelteなどの様々なフレームワークを使用してフルスタックのWebアプリケーションを生成できる、革新的なAI駆動の開発プラットフォームです。では、Bolt.newで作ったアプリをモバイルデバイスに展開したい場合はどうすればよいでしょうか？この包括的なチュートリアルでは、Bolt.newプロジェクトをエクスポートし、以下のツールを使用してネイティブモバイルアプリへと変換する方法を解説します。 Capacitor.

短く言うと: この BoltからiOSおよびAndroidへの移行ページでは、エクスポート、Capacitor、Macなしのクラウドビルド、ライブアップデートまで、全体の流れを1画面でまとめています。

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

始める前に：要件と所要時間

推定所要時間: セットアップ完了まで3〜5時間

システム要件:

iOS開発: macOS 12.0以降を搭載したMac（必須、回避策なし）
Android開発: 任意のOS (Windows/Mac/Linux)
空き容量: 開発ツール用に20-30GB
メモリ: 最低8GB RAM、16GB推奨

必要な予算:

Apple Developer: $99/年 (iOS App Store用)
Google Play: $25 (初回のみ)
Cursor Pro: $20/月 (任意、開発を高速化)

インストールするもの:

Node.js & npm
Xcode（Macのみ、iOS用）
Android Studio（Android用）
各種コマンドラインツール

Bolt.newアプリをモバイル化する理由

クロスプラットフォーム対応: AI生成アプリをモバイルアプリストアへデプロイ
ネイティブ機能へのアクセス: カメラ、GPS、ファイルシステムなどのネイティブ機能を利用
パフォーマンスの向上: ネイティブコンテナによりWebビューより高いパフォーマンスを実現
オフライン機能: ネイティブストレージによるオフライン対応
プッシュ通知: ネイティブのプッシュ通知によるユーザーエンゲージメント

なぜ Expo ではなく Capacitor なのか？

モバイル開発の選択肢を検討しているなら、Capacitor は Expo と比較して、特に Web ファーストの開発において大きな利点があります：

1つのコードベースで3つのプラットフォームへ: 既存の React、Next.js、Vue.js の Web サイトが、変換作業なしで iOS、Android、そして Web アプリになります
再構築は不要: Bolt.new のプロジェクトをそのまま利用可能 — Expo のように別のフレームワークへ書き直す必要はありません
真の Web ファーストアプローチ: モバイルファーストで Web 版が使いにくい Expo とは異なり、Capacitor は Web を第一級市民として扱います
シームレスな開発: 使い慣れた Web 開発ツールやワークフローをそのまま継続できます
フレームワークの自由度: React Native に縛られる Expo と違い、あらゆる Web フレームワーク (React, Vue, Svelte, Next.js など) で動作します

決定的な違い:

Capacitor を使えば: Web サイトを構築 → モバイル対応を追加 (同じコードベース)
Expoの場合モバイル向けにビルド → Web版を動かそうとする（アプローチが異なり、動作が重くなりがち）

Bolt.new プロジェクトはすでに Web アプリケーションとして構築されているため、Capacitor を使えば code を一行も書き換えることなくモバイル対応が可能です。Expo の場合は、そのフレームワークに合わせてプロジェクト全体を再構築する必要があります。

ステップ 1: 開発環境のセットアップ

Cursor - AI 搭載の Code エディタを入手

Bolt.new プロジェクトを効率的に開発するために、以下を使用します。 Cursor。開発を簡素化するインテリジェントな code エディタです。

こちらへアクセス： cursor.sh から、お使いの OS 用インストーラーをダウンロードしてください
インストールを実行してください
Cursorの準備ができたら起動する

Cursorを起動

生産性を最大化するCursorの設定

Cursorを最大限に活用するには、事前のセットアップが必要です：

Cursor Proへのアップグレードを検討する - 無料版でも利用可能ですが、Pro（月額$20）では以下が解放されます：
- 無制限のAIアシスタンス
- プレミアムモデル（GPT-4, Claude）
- 高速なレスポンス
- プレミアムサポート
設定にアクセス を使用して Command+, (Mac) または Ctrl+, (Windows)

Cursorの設定

AI機能を有効にする - AIアシスタンスがオンであることを確認してください:

モデルの許可

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

Cursorモデルを選択

コマンド実行を有効にする - Cursorによるコマンドの自動実行を許可します:

コマンド実行を許可

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

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

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

ブラウザで Bolt.new プロジェクトを開きます
〜を探します ダウンロード または 書き出す Bolt のインターフェースにあるボタン

プロジェクトを含む ZIP ファイルをダウンロード
コンピュータ上のフォルダに解凍します

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

Cursor で開く

解凍後、Cursor でプロジェクトを開きます：

使用する File > Open Folder Cursor で
解凍した Bolt.new のプロジェクトフォルダを選択
Cursor がプロジェクトを読み込みます

Cursor で開く

別の方法：GitHub からクローンする

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

を押して、 Shift+Command+P (Mac) または Shift+Ctrl+P (Windows)
“Git: Clone” を検索
リポジトリの URL を入力
保存先を選択

Cursor で Clone

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

ステップ 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をインストール

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

手動での操作を希望する場合や、AIによる実行でエラーが発生した場合は：

まず、Cursorのターミナルを開きます を使用して 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
インストールウィザードを完了させます
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に追加：

{
  "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: 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 プロジェクト: 以下を確認してください out ディレクトリを探す

Bolt.new のビルド出力

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

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

方法 A: Cursor AI を使ったクイックセットアップ

を押して、 Command+K (Mac) または Ctrl+K (Windows) およびリクエスト:

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

Cursor AI がセットアップの全工程を自動で行います。

オプション B: 手動でのステップバイステップ設定

Capacitor の CLI ツールをインストールします:

npm install -D @capacitor/cli

Capacitor プロジェクトを初期化します:

npx cap init

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

Boltに 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: Cursor による自動設定

Cursor に依頼する:

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: 手動プロセス

以下のコマンドを順番に実行してください：

npm run build
npx cap sync

Capacitor sync Bolt 完了

ステップ 9: Capgo Builder でストア公開用バイナリをビルド（推奨）

App Store や Google Play へのリリースに、Mac やローカルでの Xcode/Android Studio パイプラインは不要です。 Capgo Builder | Native Build V2 | Native Build V2 ビルド クラウド上でiOS/Androidビルドをコンパイル・署名し、提出まで可能。Bolt.newから書き出したvibe-codedアプリに最速のルートです。

Capgo Builderを使う理由

iOSビルドにMacは不要 — Windows、Linux、またはAIコーディング環境からビルド可能
1つの CLI ワークフロー — Cursor、Claude Code、Codexにスクリプト化して渡すのも簡単
Live Updatesとの連携 — JS/UIの修正はOTAで配信。ネイティブバイナリの再ビルドはプラグインや権限の変更時のみ

Capgo Builder のセットアップ

本番ビルドと Capacitor syncがローカルで通ったら：

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 keystore）を一度保存するだけ。詳細はこちら認証情報の管理と 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アップデート用のWeb bundleをアップロードします：

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のセットアップ（初回）

ターゲットの選択:
- 実行ボタンの横にあるデバイスセレクターをクリック
- テスト用：任意のiPhoneシミュレータを選択
- 実機用：iPhoneをUSBで接続
Code の Signing 設定:
- 左サイドバーからプロジェクト名をクリック
- “Signing & Capabilities” タブへ移動
- “Automatically manage signing” を有効にする
- Apple ID でサインイン
- 注意: 実機でのテストには Apple Developer Program ($99/年) が必要です
アプリをビルドする:
- ▶️ Playボタンをクリック
- 初回ビルド: 5〜10分（お待ちください）
- 上部のプログレスバーを確認

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

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

iOSで動作するBoltアプリ

Androidで動作中

Android Studioのセットアップ (初回)

SDK のセットアップ (自動):
- Android Studioが不足しているコンポーネントを検出します
- プロンプトが表示されたら「Install missing SDK」をクリックします
- 約2〜3GBのファイルがダウンロードされます
仮想デバイスを作成:
- AVD Managerを開く（ツールバーの電話アイコン）
- 「+ Create Virtual Device」をクリック
- 「Pixel 6」を選択（おすすめ）
- プロンプトに従ってシステムイメージをダウンロード
- デフォルト設定のままセットアップを完了
アプリを実行:
- ドロップダウンからエミュレータを選択
- 緑色の ▶️ Run ボタンをクリック
- 初回ビルド：10〜15分
- エミュレータが自動起動します

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

「Gradle sync failed」: File > Invalidate Caches を試す
エミュレータの動作が遅い: AVD設定でハードウェアアクセラレーションを有効にする
ビルドエラー: 推奨される修正方法でGradleをアップデートする

Androidで動作するBoltアプリ

確認チェックリスト

ビルド成功後、以下を確認してください：

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

まだ問題が発生しますか？ エラーメッセージには通常、原因が正確に記載されています。よく読んでみてください！

ステップ12: Live Reloadを有効にする（開発用）

ホットリロードで開発ワークフローを高速化しましょう。

オプションA: Cursorによる自動セットアップ

Cursorに聞く

Enable live reload for my Capacitor app development

Cursorがすべてを自動的に設定します。

オプション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を有効化

ステップ13: Native機能を実装

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

オプションA: AIによる統合

Cursorへの指示内容:

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

Boltに追加されたネイティブ機能

ステップ 14: 本番環境向けに最適化

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

オプション 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: 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: './' Vite設定で指定されている
すべてのインポートが相対パスであることを確認する
以下の項目を確認してください： dist フォルダが正しく生成されていること

Vue プロジェクト

モバイルではVue Routerがhashモードを使用していること
アセットの参照が正しく行われていること
モバイル環境でコンポーネントのlazy loadingが動作すること

Next.js プロジェクト

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

ビルドエラー

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

node_modulesを削除して再インストール：

rm -rf node_modules package-lock.json
npm install

Bolt.newプロジェクトの依存関係がモバイル対応しているか確認
モバイルデプロイ用にすべての相対パスが正しいか確認

アセットが見つからない

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

すべてのアセットがpublicフォルダ内にあるか確認
画像やファイルには相対パスを使用
ビルドプロセスで必要なアセットがすべてコピーされているか確認

まとめ

おめでとうございます！Bolt.newプロジェクトをネイティブモバイルアプリに変換できました。AIが生成したWebアプリで、次のことが可能になります：

iOSおよびAndroidデバイスでネイティブに動作
カメラ、GPS、ストレージなどのデバイス機能にアクセス
アプリストアを通じて配信
最適化されたモバイルUXを提供

次のステップ

Capgo Builder | Native Build V2 | Native Build V2 ビルド: TestFlightやPlay Storeリリース用にクラウドネイティブビルドを利用
Live Update: 実装して Capgo 即時OTAアップデートを実現
アナリティクス: モバイル分析を追加してユーザー行動を追跡
パフォーマンス: アプリのモバイルパフォーマンスを監視・最適化
テスト: さまざまなデバイスや画面サイズでアプリをテスト

Bolt.new で作成したアプリが、モバイルエコシステムに対応しました！

リソース

Capgo を使って、モバイルアプリへ即時アップデートを配信する方法を学びましょう。無料アカウントに登録するを今すぐ作成してください。

続きを読む: Capacitor で Bolt.new プロジェクトをネイティブモバイルアプリに変換

使用している場合 Capacitor で Bolt.new プロジェクトをネイティブモバイルアプリに変換する ネイティブプラグインの作業を計画するには、次と連携してください： Capgo プラグインディレクトリ Capgo プラグインディレクトリのプロダクトワークフローについては、 Capgo による Capacitor プラグイン Capgo による Capacitor プラグインの実装詳細については、プラグインの追加または更新プラグインの追加または更新に関する実装詳細については、 Ionic Enterprise プラグインの代替案 Ionic Enterprise Plugin Alternatives のプロダクトワークフロー、および Capgo Native Build Capgo Native Builds のプロダクトワークフローについては、