Capacitor CLI: Project Setup Guide

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

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

Quick Setup

インストール 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: Cloudflareでライブアプリの更新を設定.

このガイドでは、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 セットアップガイド」を下に参照してください。

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以下の手順に従ってください

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 __CAPGO_KEEP_0__ or newer, and __CAPGO_KEEP_1__ or higher. Gradle 7.5 or above.

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

プラットフォームの更新

最新のウェブ変更と同期するには、以下の手順に従ってウェブアプリケーションを更新してください。

npm run build
npx cap sync

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

ネイティブの構成とプラグインを最新の変更に合わせて更新します。
The command handles two tasks:

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 ライブアップデートダッシュボードインターフェース __CAPGO_KEEP_0__ をセットアップして、リアルタイムのオーバー・ザ・エア更新をアプリに有効にします。

Capgo の主な機能

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

Key Features of Capgo

Capgo offers several tools to streamline app updates:

__CAPGO_KEEP_0__ はバックグラウンドで実行されます。 再び実行してください
__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ アプリ起動時。
分析ツール ユーザーとの関わりやアップデートの成功率を追跡するのに役立ちます。
A 問題のあるアップデートから回復するための 1クリックロールバック
オプションがあります。 ステージドロールアウトやベータテストに チャンネルシステム

Installing Capgo

Capgoのインストール

以下の手順に従って、Capgoを始めましょう: CLIのインストール:
```
npm install --save @capgo/cli
```
Capgoをプロジェクトに初期化する __CAPGO_KEEP_0__をプロジェクトに追加する:
```
npx capgo init
```
アプリの更新をビルドおよびリリースする:
```
npm run build
npx capgo release
```
アプリを開いてバックグラウンドの更新プロセスをトリガーする。

ベストプラクティス

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

CapgoはCapacitor 8と互換性があり、CI/CD PipelinesとSmoothに統合され、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 正しいチャンネルをターゲットにしていることを確認してください。

プラットフォーム固有の設定についての詳細は、プラットフォーム設定セクションを参照してください。ライブ更新を使用している場合、Capgo セットアップガイドを参照してください。

概要

セットアップレビュー

Capacitor CLI でウェブアプリを開始し、iOS と Android プラットフォームを設定し、オプションでライブ更新の Capgo を含めることができます。

始め方

Capacitor CLI を使用してプロジェクトを初期化します。
アプリのパッケージIDを設定し、ウェブ出力ディレクトリを定義します。
iOS と Android プラットフォームのサポートを追加します。
Install and set up Capgo with the following command: npm install --save @capgo/cli && npx capgo init

公式のCapacitorとCapgoドキュメントを参照してください。

CapacitorからCLIまで: プロジェクトセットアップガイド

Capgoを使用している場合、Capacitorの設定を確認してください。 Capacitor CLI: プロジェクトセットアップガイド ダッシュボードとAPIの運用計画を立てるために、接続する API まとめ APIの実装詳細についての概要です。 Capgoの導入導入の説明では、実装の詳細について説明します。 API キー APIの実装詳細については、キーです。デバイスデバイスの実装詳細については、バンドルバンドルの実装詳細については、

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

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