メイン コンテンツにスキップ
Capgo ロゴ
開発 モバイル アップデート

Capacitor CLI: Project Setup Guide

Learn how to set up Capacitor CLI for building native iOS and Android apps using web technologies in a few easy steps.

プロジェクト設定ガイド

Capgoを使用して、iOSとAndroidアプリを構築するためにWeb技術を使用するには、数ステップで簡単に設定できます。

マーティン・ドナディュー
Capacitor CLI: Project Setup Guide

コンテンツマーケター Capacitor CLIはプロセスを簡素化し、ウェブ技術を使用してネイティブアプリを作成できるようにします。ここでは、学びます。

  • クイックセットアップ: CapacitorとCLIをインストールし、プロジェクトを数分で初期化します。
  • プラットフォーム統合: iOSとAndroidのサポートを簡単なコマンドで追加します。
  • ライブアップデート: Capgo :
  • __CAPGO_KEEP_0__インスタントオーバー・ザ・エアアップデートのために使用します。

共通の修正方法です。Syncエラーまたはビルドエラーなどの問題をトラブルシューティングします。

  1. インストール Node.js, npm, JDK Xcode, と Android Studio.
  2. 実行 npm install @capacitor/core @capacitor/cli とプロジェクトを初期化する
  3. iOSとAndroidプラットフォームを使用して追加する npx cap add ios と npx cap add android.
  4. オプション: Capgoを使用してライブ アプリの更新.

This guide covers everything you need to set up Capacitor CLI, configure platforms, and deploy your app. Let’s dive in!

Introducing Capacitor Configure

Capacitor Framework Documentation Website

セットアップ要件

Node.js

  • (バージョン 14 または新しい) と Capacitor npm
  • __CAPGO_KEEP_0__ (バージョン 11 または新しい)
  • Xcode (バージョン 12 または新しい iOS ビルド用)
  • Android Studio (Android ビルド用)
  • Capacitor CLI オプション:

ライブ更新を有効にするには、「 __CAPGO_KEEP_0__ セットアップ ガイド」Capgo Setup Guide__CAPGO_KEEP_0__ インストール ステップ

CLI Installation Steps

開始する前に、 Node.js, npm, JDK, Xcode、 Android Studio set up. Once ready, you can install the Capacitor CLI by running:

npm install --save @capacitor/core @capacitor/cli
npx cap init

Capacitor __CAPGO_KEEP_1__

をインストールできます。 このコマンドは __CAPGO_KEEP_0__

新しいプロジェクトの作成

プロジェクトを始めるには Capacitor CLI を使用して, 以下の手順に従ってください。

mkdir my-app && cd my-app
npm init -y
npx cap init my-app com.company.app --web-dir dist

設定ファイルの更新

ファイルを編集して、以下の設定を含めるようにしてください。 capacitor.config.json 設定を更新したら、__CAPGO_KEEP_0__ をプロジェクトに設定するために使用します。

{
  "appId": "com.company.app",
  "appName": "My App",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "server": {
    "hostname": "app.example.com",
    "androidScheme": "https"
  }
}

Once updated, use this configuration to set up Capacitor for your project.

プロジェクトの骨組みができたので、iOS と Android のターゲットを設定する時です。

iOS と Android の追加

必要なプラットフォーム固有のパッケージをインストールするために、__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ を使用してください。

Start by installing the necessary platform-specific packages using the Capacitor CLI:

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

iOSの場合、Xcode 14 またはそれ以降を確実にインストールしてください。 CocoaPods 1.11 またはそれ以降、macOS 12 またはそれ以降が必要です。Androidの場合、Android Studio Giraffe (2022.3.1+)、JDK 17 またはそれ以降、Gradle 7.5 またはそれ以降が必要です。 Gradle 7.5 またはそれ以降

Capacitor CLIをインストールした後、ウェブアプリケーションの変更に合わせてネイティブのターゲットを最新の状態に保つ必要があります。

プラットフォームの更新

ウェブアプリケーションの更新後、次の手順に従って、プラットフォームを最新のウェブの変更と同期してください。

npm run build
npx cap sync

コマンドは2つのタスクを実行します。 cap sync ウェブアセットをネイティブプラットフォームにコピーします。

  • ネイティブの設定とプラグインを最新の変更に合わせて更新します。
  • Updates native configurations and plugins to match the latest changes

IDE セットアップ

適切な IDE でプラットフォーム固有のプロジェクトを開きます:

npx cap open ios     # Opens Xcode
npx cap open android # Opens Android Studio

Xcode で:

  1. 開発チームを選択してください。
  2. 署名証明書を設定してください。
  3. バンドル識別子を更新してください。

Android Studio で:

  1. アプリケーション ID を変更してください。 build.gradle.
  2. 署名用のキーストアを設定してください。
  3. デバッグとリリースのビルドバリアントを両方とも設定してください。

設定が完了したら、プロジェクトをビルドしてください。 npx cap build ios または npx cap build android。アップデートを再実行して、すべてのアセットが最新であることを確認してください。 npx cap sync __CAPGO_KEEP_0__

Capgo __CAPGO_KEEP_0__ ライブアップデートダッシュボードインターフェイス

Capgo を設定して、即時オーバー・ザ・エア更新をアプリに有効化します。

Capgo の主な機能

Capgo では、以下のツールを提供しています。

Capgo offers several tools to streamline app updates:

  • コンテキスト:Capgo マーケティング ウェブサイト。役割:短い UI ラベルまたはナビゲーション アイテム。メッセージ キー `end_to_end_encryption` (エンド トゥ エンド暗号化)。 暗号化により、更新の配信が安全になります。
  • 更新は バックグラウンドで実行されます アプリが起動するときに。
  • 分析ツール ユーザーとの関わりやアップデートの成功率を追跡するのに役立ちます。
  • A 問題のあるアップデートから回復するための オプションを一クリックで使用できます。
  • ステージングやベータテストに使用する チャンネルシステム Capacitor CLIのインストール

Installing Capgo

Follow these steps to get started with Capgo:

  1. Install the Capgo CLI:

    npm install --save @capgo/cli

  2. Capgoを初期化 プロジェクト内で

    npx capgo init

  3. 更新をビルドおよびリリース:

    npm run build
npx capgo release

  4. アプリを開いてバックグラウンドの更新プロセスをトリガー

ベストプラクティス

  • チャンネルを使用して、すべてのユーザーにロールアウトする前にアップデートをテスト
  • 分析を監視して、更新が正常に配信され、ユーザーが関与していることを確認
  • エラー追跡を有効にして、問題を早期に捕捉して修正
  • ロールバック機能を準備して、迅速に問題を解決

CapgoはCapacitor 8と互換性があり、CI/CD PipelinesとSmoothに統合され、AppleおよびGoogleストアの要件に準拠

一般的な問題とアドバイス

プラットフォームおよびCapgoのセットアップを完了した後、ある程度の一般的なエラーに直面するかもしれません。ここでは、迅速に解決する方法を紹介します

環境設定の問題

  • CLI が見つかりません エラー: コマンド npx cap が失敗します。 修正: 以下のコマンドを実行し、再試行してください。 npm install --save @capacitor/cli @capacitor/core Node のバージョンが一致していません

  • エラー : __CAPGO_KEEP_0__ コマンドが実行できません。Node.js のバージョンが一致していません。: CLI commands fail due to Node.js version errors. 修正: Node.js のバージョンを確認し、最新のバージョンにアップデートしてください。: Node.js 14 以上をインストールしてください。

設定問題

  • 構成不一致 エラー: capacitor.config.json 変更は反映されません。 修正: プロジェクトの appId と webDir の値が一致していることを確認してください。 package.json プラットフォーム同期エラー

  • and エラー:実行 npx cap sync 結果はプラグインバージョンコンフリクト 修正:アップデート @capacitor/android と @capacitor/ios 同じメジャーバージョンにアップデートし、再度syncコマンドを実行してください。

ビルドとデプロイ

  • ビルド署名エラー エラー:iOSまたはAndroidのビルドが失敗する場合、証明書またはキーストアが欠落している可能性があります。 修正: IDEのセットアップ手順に従ってください。iOSの場合、Xcodeで開発チームを追加してください。Androidの場合、キーストアを設定してください。 build.gradle.

  • Webディレクトリが見つかりません。 エラー: npx cap sync 修正できません。 : Webビルドコマンドを実行してください(例えば、)を実行して、プラットフォームを同期する前に。 npm run buildライブ更新の問題

__CAPGO_KEEP_0__ 更新の失敗

  • Capgo Update Failures : 生産用アプリケーションで更新が表示されません。修正 __CAPGO_KEEP_0__: __CAPGO_KEEP_0__ を確認してください。 Capgo API キーを確認し、正しいチャネルをターゲットにしていることを確認してください。 __CAPGO_KEEP_0__ と __CAPGO_KEEP_1__ を確認し、正しいチャネルをターゲットにしていることを確認してください。 capacitor.config.json プラットフォーム固有のセットアップに関する詳細については、Platform Setup セクションを参照してください。ライブ更新を使用している場合は、__CAPGO_KEEP_0__ セットアップ ガイドを参照してください。

For more details on platform-specific setup, revisit the Platform Setup section. If you’re working with live updates, consult the Capgo Setup Guide for additional troubleshooting tips.

セットアップの確認

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ で Web アプリを開始し、iOS と Android プラットフォームをセットアップし、ライブ更新を含めることもできます。

Start your web app with Capacitor CLI, set up iOS and Android platforms, and optionally include Capgo for live updates.

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ を使用してプロジェクトを初期化します。

  • Use the Capacitor CLI to initialize your project.
  • iOS と Android プラットフォームのサポートを追加します。
  • __CAPGO_KEEP_2__ はライブ更新を含めることもできます。
  • Install and set up Capgo with the following command: npm install --save @capgo/cli && npx capgo init

For detailed setup instructions or troubleshooting, check out the official Capacitor and Capgo documentation.

Keep going from Capacitor CLI: Project Setup Guide

Capacitor CLI を使用している場合 Capacitor CLI: プロジェクトセットアップガイド Capacitor CLIのプロジェクト設定ガイドを読みました。 Capacitor CLIのプロジェクト設定ガイドを読みました。 to plan dashboard and API operations, connect it with API Overview APIの実装詳細については、概要です。 Capacitor CLIプロジェクト設定ガイドの導入 導入の詳細については、導入の節を参照してください。 API キー API キーの実装詳細について デバイス 実装詳細のデバイスについて バンドル 実装詳細のバンドルについて

Capacitorアプリのライブアップデート

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

ウェブ層のバグがライブの場合、__CAPGO_KEEP_0__を通して修正を配信するのではなく、数日間待ってアプリストアの承認を待つのではなく、ユーザーはバックグラウンドでアップデートを受け取り、ネイティブの変更は通常のレビュー経路に残る。

コンテキスト:Capgoのマーケティングウェブサイト。役割:サポートする説明文またはメタ説明文。見つける場所:コンポーネントGetStarted.astro。Capgoの製品/ブランド名と開発者用語をそのまま保存する。メッセージキー`instant_updates_for_capacitor_apps_description` (Instant Updates For Capacitor Apps Description)。

マーティンから人間のサポート

Capgo gives you the best insights you need to create a truly professional mobile app.

2-Way Capacitor アプリ間の通信
開発 モバイル +1
2025年4月26日

2-Way Capacitor アプリ間の通信

OTA更新の5つの一般的なミス
開発 セキュリティ +1
2025年4月13日

OTA更新の5つの一般的なミス

5モバイルアプリライブアップデートのセキュリティベストプラクティス
開発 モバイル +1
2025年1月14日

5モバイルアプリライブアップデートのセキュリティベストプラクティス

すべてのブログ記事を表示