Capacitor CLI: iOSおよびAndroid向けモバイルアプリの作成

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

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

__CAPGO_KEEP_1__

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

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

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

Capacitor Framework Documentation Website

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

Node.js

(バージョン 14 または新しいバージョン) と __CAPGO_KEEP_0__ npm
Configure (バージョン 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 1.11 またはそれ以降 iOSの場合、Xcode 14 またはそれ以降、CocoaPods 1.11 またはそれ以降、macOS 12 またはそれ以降が必要です。Androidの場合、Android Studio Giraffe (2022.3.1+)、JDK 17 またはそれ以降、Gradle 7.5 またはそれ以降が必要です。更新されたWebアプリケーションに伴う変更を反映させるために、ネイティブのターゲットを更新する必要があります。

プラットフォームの更新

Webアプリケーションを更新した後、次の手順に従って、プラットフォームを最新のWebの変更と同期させます。

このコマンドは2つのタスクを実行します。

npm run build
npx cap sync

更新されたWebアセットをネイティブのプラットフォームにコピーする cap sync ネイティブの設定とプラグインを最新の変更と同期させる

The
command handles two tasks: Copies updated web assets to the native platforms Updates native configurations and plugins to match the latest changes

IDEの設定

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

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

Xcodeで:

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

Android Studioで:

__CAPGO_KEEP_0__のアプリケーション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__ はバックグラウンドで実行されます。 ensures secure delivery of updates.
Updates run in the background アプリ起動時に。
分析ツール ユーザーエンゲージメントとアップデート成功率を追跡するのに役立ちます。
A 問題のあるアップデートから回復するのに役立つ一括ロールバックオプションがあります。 ステージドロールアウトやベータテストに使用するチャンネルシステムを利用してください。
__CAPGO_KEEP_0__のインストール __CAPGO_KEEP_0__の使用を始めるには、以下の手順に従ってください。 __CAPGO_KEEP_0__のインストールと__CAPGO_KEEP_1__のインストール

Installing Capgo

Follow these steps to get started with Capgo:

A one-click rollback option lets you quickly recover from problematic updates. Use the channel system for staged rollouts and beta testing. Installing Capgo Follow these steps to get started with Capgo: Install the Capgo CLI:
```
npm install --save @capgo/cli
```
プロジェクトに Capgo を初期化するに:
```
npx capgo init
```
更新をビルドおよびリリースする:
```
npm run build
npx capgo release
```
アプリを開いてバックグラウンドの更新プロセスをトリガーする。

ベストプラクティス

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

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 そして、正しいチャンネルをターゲットにしていることを確認してください。

プラットフォーム固有のセットアップに関する詳細については、Platform Setup セクションを参照してください。ライブ更新を使用している場合、Capgo Setup Guide を参照して追加のトラブルシューティングのヒントを取得してください。

概要

セットアップレビュー

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

ここでは、始め方を紹介します:

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

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

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

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