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

導入

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

__CAPGO_KEEP_0__

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

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

システム要件:

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

予算必要:

Apple Developer: 1 年あたり $99 (iOS App Store の場合)
Google Play: 1 回の支払い $25
カーソルプロ: 1 か月あたり $20 (オプション、開発を高速化)

インストールするもの:

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

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

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

Why Capacitor Over Expo?

Capacitor は、モバイル開発のオプションを検討している場合、特にウェブから始める開発では、Expo と比較して大きな利点を提供します:

One Codebase, Three Platforms: すでに React、Next.js、または Vue.js を使用しているウェブサイトが、iOS、Android、そしてウェブアプリとして zero コンバージョンが必要です
リビルドなし: Bolt.new プロジェクトをそのまま使用できます - まったく別のフレームワークに合わせる必要はありません
ウェブ・ファースト・アプローチ: Expo はモバイルから始まり、ウェブでは不快な印象を与えるのに対し、 Capacitor はウェブを優先した市民として扱います
サムレス開発: ご自身の熟知のウェブ開発ツールとワークフローをそのまま使用できます
フレームワークの自由: React Native と同様に Expor にロックされていないウェブフレームワーク (React、Vue、Svelte、Next.js、etc.) と互換性があります

Capacitor

With Capacitor: Webサイトを作成 → モバイル対応を追加 (同じコードベース)
エクスポCapgo

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.

Step 1: 開発環境の設定

Get Cursor - AIパワーで強化されたCodeエディター

Cursor - AIを活用したCapgoエディター CapgoCapacitorの高度なcodeエディターは、開発を簡素化します。

へようこそカーソル.sh とインストーラーを取得してください
インストールプロセスを実行してください
Cursorを起動してください

Cursorを起動してください

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

Cursor Proを検討してください

-無料版は機能しますが、Pro（$20/月）は次の機能を提供します 無制限のAIアシスタンス
- プレミアムモデル（GPT-4、Claude）
- 即時回答
- プレミアムサポート
- Consider Getting Cursor Pro
設定アクセス で Command+, (Mac) または Ctrl+, (Windows)

カーソル設定

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

モデルを許可する

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

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

コマンド実行を有効にする - Let Cursor を自動でコマンドを実行する:

Run Commands を許可する

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

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

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

プロジェクトをダウンロードする
Find the ここに ダウンロード または コンテキスト: このテキストは HTML の長い Capgo UI ストリングのフラグメントです (親キー `consulting_faq_subtitle`). このページはコンサルティングサービスページです。ロールはセクションサブタイトルまたはタグラインです。見られる場所はコンサルティング.astro のページです。Capgo の製品/ブランド名と開発者用語を完全に保持するようにしてください。メッセージキーは `consulting_faq_subtitle` (Consulting FAQ Subtitle) です。

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

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

Cursor で開く

プロジェクトを 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を入力
保存先の場所を選択

クローン

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

コンテキスト:Capgoのページ。役割:UIラベル。表示場所:about.astroのページ。メッセージキー`about_how_step_label` (About How Step Label)。

bolt.newは、さまざまなフレームワークを使用してプロジェクトを生成できます。まず、どのフレームワークを使用しているかを特定してみましょう:

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: Capgo 開発用ツールをインストールする

オプション A: カーソル AI が全てを管理する

クリック Command+K (Mac) または Ctrl+K (Windows) をカーソル内で

リクエストを入力してください:

Install all necessary development tools including Node.js, then install project dependencies and start the dev server

カーソル AI は自動的に:

Node.js と npm が必要な場合はインストールします
macOS では Homebrew を設定します
プロジェクトのすべての依存関係をインストールします
開発サーバーを起動します

Homebrew をインストールします

オプション 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
インストールウィザードを完了する
Cursorのターミナルで:

cd your-bolt-project
npm install
npm run dev

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

Bolt.newアプリケーションが正常に実行されます (通常は http://localhost:5173 Viteプロジェクトの場合)。

ステップ 4: モバイル向けのビルド設定

プロジェクトのフレームワークに応じて、設定は異なります。

あなたのプロジェクトのフレームワークに応じて、設定は異なります。

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

Configure my Bolt.new project for mobile deployment with proper build settings

ページ/エリア: Capgoマーケティングウェブサイト。役割: カールトゥーアクションボタンまたはリンクラベル。表示される場所: コンポーネント AskAiSection.astro。

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

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

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

編集する

変更 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

コンテキスト:ソフトウェアのOTAアップデート、ニュースのアップデートではありません。ページ/エリア:Capgoのマーケティングウェブサイト。役割:短いUIラベルまたはナビゲーションアイテム。メッセージキー`agents_page_stage_update` (エージェントページステージアップデート)。

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

コンテキスト:ページ/エリア:Capgoのページ。役割:UIラベル。表示:about.astroのページ。メッセージキー`about_how_step_label` (About How Step Label)。

プロダクションビルドの作成に時間がかかります。

Build my Bolt.new project for production deployment

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

Cursorに質問してください。

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

npm run build

Bolt.new Vite ビルド成功

Capacitorを使用したNext.jsアプリケーション

npm run static

Confirm ビルド成功

Ensure your build が正しく出力されたことを確認する

Vite project: Bolt.new ビルド出力の検索 dist directory
Next.jsプロジェクト: Bolt.new ビルド出力の検索 out directory

Bolt.new ビルド出力

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

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

オプション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のコマンドラインツールをインストールします。

npm install -D @capacitor/cli

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

npx cap init

Capacitorの初期化プロセス（Bolt）

次のようになります。

アプリ名: __CAPGO_KEEP_0__
アプリ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 を構成する

Time to configure Capacitor for your specific framework.

あなたのフレームワークに合わせて __CAPGO_KEEP_0__ を構成する時間です。

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

Configure capacitor.config.ts for my Bolt.new project build output

カーソルの助けを求めます:

オプション B: 手動構成

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;

Vite ベースのアプリケーション用:

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;

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

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

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

カーソルに伝えます:

Build my project and sync it with Capacitor for mobile deployment

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

次のコマンドをシーケンスで実行します:

npm run build
npx cap sync

Capacitor Bolt を完全に同期

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

コンテキスト: このページは Capgo のページです。役割: UI ラベル。見られる場所: about.astro ページ。メッセージキー `about_how_step_label` (About How Step Label)。 Capgo ビルダー __CAPGO_KEEP_0__ ビルダー

Why Capgo Builder?

コンテキスト: Capgo ビルダー / ネイティブクラウドビルドプロダクトページ。役割: 短い UI ラベルまたはナビゲーションアイテム。見られる場所: native-build.astro ページ。Capgo の製品/ブランド名と開発者用語をそのまま保存する。メッセージキー `native_build_v2_hero_badge` (Native Build V2 Hero Badge)。 — Windows、Linux、またはAI開発環境からビルド
Capacitorの1つのCLIワークフロー — Cursor、ClaudeCode、または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 android

Apple証明書、プロビジョニングプロファイル、Androidキーストアの署名資格情報を一度保存してください。See パスワード管理そして WindowsからiOSをビルド.

__CAPGO_KEEP_0__ビルダーは、ビルドログをターミナルにストリームします。App Store Connectが設定されている場合、iOSビルドは直接TestFlightに送信できます。

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ビルダーはビルドログをターミナルにストリームします。App Store Connectが設定されている場合、iOSビルドは直接TestFlightに送信できます。

アップロードするWebバンドル(OTA更新用):

npx @capgo/cli@latest bundle upload --channel production

ステップ10:ローカルテスト用にオプションのネイティブIDEを開く

コンテキスト:Capgoのページ。役割:UIラベル。見られる場所:about.astroのページ。メッセージキー`about_how_step_label` (About How Step Label)。

Macを持っている場合やクラウドビルド前にエミュレーターテストしたい場合は、ローカルにネイティブプロジェクトを開く:

アプリのネイティブ開発環境にアクセスする。

iOS開発

Open my iOS project in Xcode

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

npx cap open ios

オプションB:ターミナルコマンドを使用

XcodeでBoltプロジェクトを開く

iOS開発

Open my Android project in Android Studio

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

npx cap open android

Android開発

Step 11: Capgoでローカルにビルドして実行する (任意)

iOSで実行

Xcodeの設定（初回のみ）

ターゲットを選択:
- プレイボタン横のデバイスセレクタをクリック
- テスト用: iPhoneシミュレータを選択
- 実機用: iPhoneをUSBで接続
Codeの署名を設定:
- プロジェクト名を左サイドバーでクリック
- 「署名と機能」タブに移動
- 「署名を自動管理」にチェック
- Apple IDでログイン
- 注意: 実機ではApple Developer Program ($99/年)が必要
アプリを構築する:
- ▶️ プレーヤーボタンをクリック
- 最初のビルド: 5-10 分 (待ってください!)
- コンテキスト: Capgo Builder / ネイティブクラウドビルド製品ページ。役割: 短いUIラベルまたはナビゲーションアイテム。メッセージキー `native_build_builder_credit_first` (ネイティブビルドビルダークレジットファースト)。

進行状況バーを上部で確認:

iOSのトラブルシューティング「アカウントが見つかりません」
: Xcode > 設定 > アカウントでApple IDを追加「ビルドに失敗しました」
: ビルドフォルダをクリーンアップ (Shift+Command+K) して再試行します。: iOS シミュレータを再起動する (Device > Restart)

Bolt アプリの iOS 環境

Android 環境で実行中

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

SDK のセットアップ (自動):
- Android Studio は、不足しているコンポーネントを検出します
- 「不足している SDK をインストールする」ボタンをクリックします
- 約 2-3GB のファイルをダウンロードします
仮想デバイスを作成する:
- AVD マネージャーを開く (ツールバーの電話アイコン)
- 「+ 仮想デバイスを作成する」ボタンをクリックします
- 「Pixel 6」を選択（デフォルトの良い選択）
- システムイメージのダウンロードを求められたらダウンロード
- デフォルトのオプションでセットアップを完了
アプリを実行:
- エミュレータのドロップダウンからエミュレータを選択
- 緑の▶️実行ボタンをクリック
- 最初のビルド：10-15分
- コンテキスト：Capgo Builder / ネイティブクラウドビルド製品ページ。ロール：短いUIラベルまたはナビゲーションアイテム。メッセージキー `native_build_builder_credit_first` (ネイティブビルドビルダークレジットファースト)。

エミュレータが自動的に起動:

Androidのトラブルシューティング「Gradle Sync failed」
: ファイル>キャッシュを無効化してみることから始めます。: Android AVD のハードウェアアクセラレーションを有効にする
ビルドエラー: Gradle を自動修正でアップデートする

Android 上で実行中の Bolt アプリ

検証チェックリスト

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

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

まだ問題が残っている場合? エラーメッセージは、問題が何であるかを正確に教えてくれることが多い - それらを丁寧に読んでみる!

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

高速開発フローを速めるには、即時リロード機能を活用してください。

開発ワークフローを高速化するには、ホットリロードを使用することができます。

質問カーソル:

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

Live reload有効のBolt

ステップ13：ネイティブ機能を追加する

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

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

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

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

カーソルはプラグインをインストールし、統合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;

変更を同期

カーソル AI と同期:

Sync my native feature changes to all platforms

マニュアルコマンド:

npx cap sync

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

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

ページコンテキスト: Capgo のページ。ロール: UI ラベル。表示場所: about.astro のページ。メッセージキー `about_how_step_label` (About How Step Label)。

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

Request:

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

ボルトアプリアセット生成

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

Capacitor

オプション 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
アセットが正しく参照されているか確認する
モバイル環境でコンポーネントのロードが機能しているか確認する

Next.js Projects

静的エクスポートが正しく設定されているか確認する
静的コンテキストで動的インポートが機能しているか確認する
ルートが API であるルートが使用されていないか、または適切に処理されているか確認する

ビルドエラー

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

node_modulesをクリアし、再インストールする:

rm -rf node_modules package-lock.json
npm install

Bolt.newプロジェクトのモバイル互換性のための依存関係を確認する
モバイル展開用のすべての相対パスが正しいことを確認する

ミッシングアセット

アセットの読み込み問題の場合:

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

結論

おめでとうございます!あなたの Bolt.new プロジェクトをネイティブモバイルアプリケーションに変換することに成功しました。AI生成のウェブアプリは今、以下のことができます:

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

次のステップ

Capgo ビルダー: Cloud Native ビルドを使用して TestFlight と Play Store リリース
ライブアップデート: Live Update Capgo __CAPGO_KEEP_0__
: 即時オーバー・ザ・エア更新Analytics
PerformancePerformance
TestingTesting

: アプリをさまざまなデバイスと画面サイズでテストすることです。

リソース

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

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

Capacitor を使用している場合 CapacitorでCapacitorプロジェクトを変換して、ネイティブモバイルアプリにします。 ネイティブプラグインの作業計画を立てるには、__CAPGO_KEEP_0__を接続します。 Capgo プラグインディレクトリ Capgo プラグインディレクトリの製品ワークフロー Capacitor プラグインはCapgoによって提供されます。 Capacitorの実装詳細については、Capacitor プラグインによって Capgo で管理されます。プラグインの追加または更新プラグインの実装詳細イオニックエンタープライズプラグインの代替イオニックエンタープライズプラグインの代替の製品ワークフロー Capgo 本機ビルド Capacitorの製品ワークフロー内でCapgoネイティブビルド。

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

導入

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

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

Why Capacitor Over Expo?

Step 1: 開発環境の設定

Get Cursor - AIパワーで強化されたCodeエディター

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

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

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

Cursor で開く

代替: GitHub からクローン

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

bolt.newは、さまざまなフレームワークを使用してプロジェクトを生成できます。まず、どのフレームワークを使用しているかを特定してみましょう:

Step 3: Capgo 開発用ツールをインストールする

オプション A: カーソル AI が全てを管理する

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

ステップ 4: モバイル向けのビルド設定

あなたのプロジェクトのフレームワークに応じて、設定は異なります。

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

Next.jsプロジェクト用

コンテキスト:ページ/エリア:Capgoのページ。役割:UIラベル。表示:about.astroのページ。メッセージキー`about_how_step_label` (About How Step Label)。

Cursorに質問してください。

Confirm ビルド成功

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

オプションA：Cursor AIを使用したクイックセットアップ

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

何が起こったの?

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

あなたのフレームワークに合わせて __CAPGO_KEEP_0__ を構成する時間です。

カーソルの助けを求めます:

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

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

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

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

Why Capgo Builder?

Capgoビルダーのセットアップ

__CAPGO_KEEP_0__ビルダーは、ビルドログをターミナルにストリームします。App Store Connectが設定されている場合、iOSビルドは直接TestFlightに送信できます。

ステップ10:ローカルテスト用にオプションのネイティブIDEを開く

アプリのネイティブ開発環境にアクセスする。

XcodeでBoltプロジェクトを開く

Step 11: Capgoでローカルにビルドして実行する (任意)

iOSで実行

Xcodeの設定（初回のみ）

Android 環境で実行中

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

検証チェックリスト

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

開発ワークフローを高速化するには、ホット リロードを使用することができます。

オプションB：手動設定

ステップ13：ネイティブ機能を追加する

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

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

コンポーネントで使用

変更を同期

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

ページ コンテキスト: Capgo のページ。ロール: UI ラベル。表示場所: about.astro のページ。メッセージ キー `about_how_step_label` (About How Step Label)。

Vite プロジェクトの場合、ビルドを最適化:

Capacitor

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

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

React/Vite プロジェクト

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

Next.js Projects

ビルドエラー

ミッシング アセット

結論

次のステップ

リソース

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

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

開発ワークフローを高速化するには、ホットリロードを使用することができます。

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

ページコンテキスト: Capgo のページ。ロール: UI ラベル。表示場所: about.astro のページ。メッセージキー `about_how_step_label` (About How Step Label)。

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

ミッシングアセット