Capacitor CLI: プロジェクトセットアップガイド

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

Quick Setup: CapacitorとCLIをインストールし、プロジェクトを数分で初期化します。
Platform Integration: iOSとAndroidのサポートを簡単なコマンドで追加します。
Live Updates: __CAPGO_KEEP_0__を使用して、即時オーバー・ザ・エア更新を実行します。 Capgo : 同期エラーまたはビルド失敗などの一般的な問題をトラブルシューティングします。
始めるための重要なステップ:__CAPGO_KEEP_0__

Key Steps to Get Started:

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

このガイドでは、Capacitor CLI を設定すること、プラットフォームを構成すること、およびアプリをデプロイすることについてすべてカバーしています。では、始めましょう!

Introducing Capacitor __CAPGO_KEEP_0__ フレームワークドキュメントウェブサイト

Capacitor Framework Documentation Website

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

Node.js

(バージョン 14 またはそれ以降) と __CAPGO_KEEP_0__ npm
__CAPGO_KEEP_1__ (バージョン 11 以上)
Xcode (バージョン 12 以上の場合、iOS ビルド用)
Android Studio (Android ビルド用)
Capacitor CLI (バージョン 6 または 7)

オプション: __CAPGO_KEEP_0__ の「」をチェックして、ライブ更新を有効にします。Capgo セットアップガイド」

CLI インストールステップ

はじめる前に、 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 を使用して, follow these steps:

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

設定ファイルの更新

__CAPGO_KEEP_0__ を編集して capacitor.config.json 以下の設定を含めるようにしてください

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

設定が更新されたら、Capacitor をプロジェクトに設定するために使用します。

プラットフォームの設定

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

iOS と 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またはそれ以降が必要です。 CocoaPods 1.11またはそれ以降、 Android Studio Giraffe (2022.3.1+)、JDK 17またはそれ以降、 Gradle

7.5またはそれ以降、

インストールが完了したら、Webアプリケーションの変更に合わせてネイティブのターゲットを更新する必要があります。

プラットフォームの更新

npm run build
npx cap sync

Webアプリケーションの更新後に次の手順に従って、プラットフォームを最新のWebの変更と同期することができます。 cap sync コマンドは2つのタスクを処理します。

Webアセットをネイティブプラットフォームにコピーし、
最新の変更に合わせてネイティブの構成とプラグインを更新します。

IDE セットアップ

プラットフォーム固有のプロジェクトを開きます。

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

Xcode で:

開発チームを選択してください。
署名証明書をセットアップしてください。
バンドル識別子を更新してください。

Android Studio で:

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

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

Capgo Live Update Dashboard インターフェース __CAPGO_KEEP_0__ をセットアップして、リアルタイムのオーバー・ザ・エア更新をアプリに有効化します。

Capgo の主な機能

Capgo は、アプリの更新をスムーズにするためのいくつかのツールを提供しています。

Key Features of Capgo

Capgo offers several tools to streamline app updates:

更新は バックグラウンドで実行されます
Setup Guide Key Features of __CAPGO_KEEP_0__ アプリ起動時。
分析ツール ユーザーエンゲージメントとアップデート成功率を追跡するのに役立ちます。
A 問題のあるアップデートから迅速に回復するための 1クリックロールバック
オプションがあります。 チャネルシステム ステージドロールアウトとベータテストに使用します。

Capgoのインストール

Capgoのインストール手順

CapgoのCLIのインストール:
```
npm install --save @capgo/cli
```
プロジェクトに Capgo を初期化するに:
```
npx capgo init
```
更新をビルドおよびリリースする:
```
npm run build
npx capgo release
```
__CAPGO_KEEP_0__ を開いてバックグラウンドの更新プロセスをトリガーする。

ベストプラクティス

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

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

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

プラットフォームと Capgo のセットアップが完了したら、一般的なエラーに直面する可能性があります。ここでは、迅速に解決する方法を紹介します。

環境設定の問題

CLI が見つかりません エラー: コマンド npx cap 失敗しました。修正: Run npm install --save @capacitor/cli @capacitor/core を実行し、再度試してください。
Node のバージョンが一致しません エラー: CLI コマンドが実行できません。Node.js のバージョンが原因です。修正: Node.js 14 以上をインストールしてください。

設定問題

構成が一致しません エラー: 変更は capacitor.config.json 反映されません。修正: プロジェクトの appId と webDir 値が、 package.json と
ビルド出力フォルダと一致していることを確認してください。 エラー: 実行中 npx cap sync プラグインのバージョンが異なるため、コンフリクトが発生します。修正: 同じメジャーバージョンにアップデートし、再度syncコマンドを実行してください。 @capacitor/android ビルドとデプロイ @capacitor/ios ビルド署名エラー

エラー

: iOSまたはAndroidのビルドが、証明書が欠落しているか、キーストアが存在しないため失敗します。 修正iOSまたはAndroidのビルドが、証明書が欠落しているか、キーストアが存在しないため失敗します。 同様のメジャーバージョンにアップデートし、再度syncコマンドを実行してください。: IDE セットアップの指示に従ってください。 iOS の場合、Xcode で開発チームを追加してください。 Android の場合、キーストアを設定してください。 build.gradle.
Web ディレクトリが見つかりません。 エラー: npx cap sync Web アセットが見つかりません。修正: Web ビルドコマンドを実行してください (例えば、 npm run build) して、プラットフォームを同期してください。

ライブ更新の問題

Capgo の更新が失敗しました。 エラー: 製品アプリ内で更新が表示されません。修正: Capgo API のを確認し capacitor.config.json で正しいチャンネルをターゲットにしていることを確認してください。

プラットフォーム固有のセットアップに関する詳細については、Platform Setup セクションを再訪してください。ライブ更新と仕事している場合、Capgo セットアップガイドを参照してください。

概要

セットアップレビュー

Capacitor CLI でウェブアプリを開始し、iOS と Android プラットフォームをセットアップし、ライブ更新の場合には Capgo を含めることができます。

ここでは、以下の手順に従ってください。

Capacitor CLI を使用してプロジェクトを初期化します。
アプリのパッケージIDを設定し、ウェブ出力ディレクトリを定義します。
iOS と Android プラットフォームのサポートを追加します。
以下のコマンドを使用して、Capgoをインストールして設定します。 npm install --save @capgo/cli && npx capgo init

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

Capacitor CLIから続けてください: プロジェクト設定ガイド

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__を使用している場合 Capacitor CLI: プロジェクト設定ガイド API __CAPGO_KEEP_1__を使用して、ダッシュボードとAPIのオペレーションを計画する場合は、APIと接続してください。 API オーバービュー API オーバービューの実装詳細については、API オーバービューを参照してください。導入導入の実装詳細については、導入を参照してください。 API キー API キーの実装詳細については、API キーを参照してください。デバイスデバイスの実装詳細については、バンドルバンドルの実装詳細については、

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

Introducing Capacitor __CAPGO_KEEP_0__ フレームワーク ドキュメント ウェブサイト