ストロコトウジ
Capgo パックストウジャーストウジパックストウジャーストウジ
開発 モバイル アップデート

Capacitor CLI: プロジェクト設定ガイド

iOSおよびAndroid用のネイティブアプリを構築するためにWebテクノロジーを使用して、数ステップでCapacitor CLIを設定する方法を学びます。

マーティン・ドナディュー

マーティン・ドナディュー

コンテンツマーケター
Capacitor CLI: iOSとAndroidアプリのプロジェクト設定ガイド

iOSとAndroidアプリを1つのコードベースで作成したいですか? Capacitor CLIはプロセスを簡素化し、Web技術を使用してネイティブアプリを作成できるようにします。ここで学びます:

  • Quick SetupCapacitor CLIをインストールしてプロジェクトを数分で初期化します。
  • Platform IntegrationiOSとAndroidのサポートを簡単なコマンドで追加します。
  • Live Updates__CAPGO_KEEP_0__を使用して Capgo 即時オーバー・ザ・エア更新用。
  • 一般的な修正: 同期エラーまたはビルド失敗などの問題を解決します。

開始するための重要なステップ

  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. Optional: Set up Capgo for live アプリの更新.

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

Introducing Capacitor 設定

Capacitorフレームワークドキュメントサイト

セットアップ要件

始めるには、以下のツールがインストールされていることを確認してください:

  • Node.js (バージョン 14 以上) と npm
  • Java JDK (バージョン 11 以上)
  • Xcode (iOS ビルド用にバージョン 12 以上)
  • Android Studio (Android ビルド用)
  • Capacitor CLI (バージョン 6 または 7)

オプション: live updatesを有効にするには、下の”Capgo セットアップガイド”をご確認ください。

CLI インストール手順

開始する前に、以下の環境を確認してください。 Node.js, npm, JDK, XcodeAndroid Studio をセットアップしてください。 Capacitor CLIをインストールするには、以下のコマンドを実行してください。

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

このコマンドはCapacitorをインストールし、その基本構成をセットアップします。

このステップを完了した後は 新しいプロジェクトを作成する に進み、アプリケーションを構築してください。

新しいプロジェクトを作成する

__CAPGO_KEEP_0__と__CAPGO_KEEP_1__を使用してプロジェクトを開始するには、以下の手順に従ってください。 using Capacitor CLI設定ファイルを編集して、以下の設定を含めるようにしてください。

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

設定ファイルを更新した後は、__CAPGO_KEEP_0__をプロジェクトにセットアップするために、この設定を使用してください。

__CAPGO_KEEP_0__ capacitor.config.json __CAPGO_KEEP_1__

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

Capacitor

Platform Setup

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

Adding iOS and Android

まず、必要なプラットフォーム固有のパッケージを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以上が必要です。 Platform Updates ウェブアプリケーションに変更が加わったら、以下の手順に従ってプラットフォームを最新のウェブ変更と同期してください。 To sync your platforms with the latest web changes, follow these steps after updating your web app: To sync your platforms with the latest web changes, follow these steps after updating your web app:

To sync your platforms with the latest web changes, follow these steps after updating your web app:

To sync your platforms with the latest web changes, follow these steps after updating your web app:

To sync your platforms with the latest web changes, follow these steps after updating your web app:

npm run build
npx cap sync

The cap sync command handles two tasks:

  • updated web assetsをnativeプラットフォームにコピーする
  • nativeの設定とプラグインを最新の変更に合わせて更新する

IDEのセットアップ

プラットフォーム固有のプロジェクトを開く:

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

Xcodeの場合:

  1. 開発チームを選択する
  2. 署名証明書をセットアップする
  3. バンドルIDを更新する

Android Studioの場合:

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

設定が完了したら、 npx cap build ios または npx cap build androidでプロジェクトをビルドしてください。 npx cap sync プロジェクトをビルドする際は

Capgo __CAPGO_KEEP_0__

Capgo Live Update Dashboard Interface

Capgo Live Update ダッシュボード インターフェース

Capgoを設定して、リアルタイムでアプリの更新を実行してください。

Capgoの主な機能は以下の通りです。

  • End-to-end encryption はアップデートの安全な配信を保証します。
  • Updates run アプリ起動時にバックグラウンドで実行されます。 Analytics tools
  • はアップデートの成功率とユーザーの関与度を追跡するのに役立ちます。 A
  • 一回のクリックでロールバック オプションは、問題のあるアップデートから迅速に回復するのに役立ちます。 Use the
  • チャンネルシステムを使用してください. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__のステージドロールアウトとベータテスト用に。

Capgoをインストールする

Capgoの使用を始めるには、次の手順に従ってください。

  1. CapgoのCLIをインストールする:

    npm install --save @capgo/cli

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

    npx capgo init

  3. 更新をビルドしてリリースする:

    npm run build
npx capgo release

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

ベストプラクティス

  • チャンネルを使用して、すべてのユーザーにロールアウトする前にアップデートをテストする。
  • 分析を監視して、更新が正常に配信され、ユーザーが関与していることを確認する。
  • エラー追跡を有効にして、早期に問題を捕捉して修正する。
  • Keep the rollback feature ready to quickly address any problems.

CapgoはCapacitor8と互換性があり、CI/CDパイプラインとSmoothに統合され、AppleおよびGoogleストアの要件に準拠しています。

Common Issues and Tips

Once you’ve completed the platform and Capgo setup, you might face some common errors. Here’s how to address them quickly.

Environment Setup Issues

  • CLIが見つかりません エラー：コマンド失敗しました。 npx cap 修正：再実行してください。 修正：再実行してください。エラー：コマンド npm install --save @capacitor/cli @capacitor/core 失敗しました。

  • Node Version Mismatch Error: CLI コマンドが実行できません。原因は Node.js のバージョンが不一致です。 Fix: セットアップの要件に記載されているように、Node.js のバージョン 14 以上をインストールしてください。

Configuration Problems

  • Config Mismatch Error: capacitor.config.json don’t takeFix appId と webDir 値はプロジェクトの package.json とウェブビルド出力フォルダ。

  • プラットフォーム同期エラー エラー:実行中 npx cap sync 結果はプラグインのバージョン間の競合を引き起こします。 修正:バージョンを同じメジャーバージョンにアップデートし、再度同期コマンドを実行してください。 @capacitor/android ビルドとデプロイ @capacitor/ios __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

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

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

ライブ更新の問題

  • Capgo の更新が失敗しました __CAPGO_KEEP_0__production アプリ内で更新が表示されません。 __CAPGO_FIX____CAPGO_KEEP_0__ Capgo API key キーを確認し、正しいチャネルをターゲットに設定してください。 capacitor.config.json 詳細については、Platform Setup のセクションを参照してください。ライブ更新を使用している場合、__CAPGO_KEEP_0__ Setup Guide を参照して追加のトラブルシューティングのヒントを取得してください。

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 プラットフォームを設定し、オプションでライブ更新の __CAPGO_KEEP_2__ を含めます。

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

はじめにどうしたらいいか

  • プロジェクトを初期化するには、Capacitor CLI を使用します。
  • アプリのパッケージIDを設定し、Web出力ディレクトリを定義してください。
  • iOSおよびAndroidプラットフォームのサポートを追加してください。
  • Capgo をインストールして設定するには、以下のコマンドを実行してください。 npm install --save @capgo/cli && npx capgo init

詳細な設定方法やトラブルシューティングについては、公式のCapacitorとCapgoドキュメントを参照してください。

Capacitor CLI: プロジェクト設定ガイド

「__CAPGO_KEEP_0__ __CAPGO_KEEP_1__: プロジェクト設定ガイド」を使用して、ダッシュボードと__CAPGO_KEEP_0__のオペレーションを計画する場合、__CAPGO_KEEP_0__と接続してください。 Capacitor CLI: Project Setup Guide 「API オーバーヴィュー」の実装詳細については、API オーバーヴィューを参照してください。 API Overview 「API __CAPGO_KEEP_1__: プロジェクト設定ガイド」 Introduction Introductionの実装詳細について API Keys API Keysの実装詳細について Devices Devicesの実装詳細について Bundles Bundlesの実装詳細について

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

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

Get Started Now

Latest from our Blog

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。

Capacitorアプリで2方向のコミュニケーション
開発、モバイル、更新
2025年4月26日

Capacitorアプリで2方向のコミュニケーション

5つのOTA更新ミスを回避する
開発、セキュリティ、更新
2025年4月13日

5つのOTA更新の誤りを避ける

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

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

ブログからすべてを参照