メインコンテンツにジャンプします。
Capgo ロゴ
開発 モバイル アップデート

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

ウェブ技術を使用して、ネイティブiOSおよびAndroidアプリを構築するためのCapacitor CLIの設定方法を簡単に学びましょう。

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

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

Content Marketer
Capacitor CLI: iOSおよびAndroidアプリのプロジェクト設定ガイド

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

  • Quick SetupiOSとAndroidのアプリを簡単に作成するには、Capacitor CLIをインストールしてプロジェクトを初期化するだけです。
  • Platform IntegrationiOSとAndroidのサポートを簡単に追加するには、コマンドを実行するだけです。
  • Live Updates__CAPGO_KEEP_0__を使用すると、リアルタイムでアプリを更新できます。 Capgo リアルタイムオーバー・ザ・エア更新のために.
  • Common Fixes:

syncエラーまたはビルドエラーなどの問題をトラブルシューティングします。

  1. Capgoで始めるための重要なステップ: インストール, npm, JDK, __CAPGO_KEEP_0__、JDK、Xcode 、および.
  2. Android Studio 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!

Capgoの紹介 Capacitor __CAPGO_KEEP_0__フレームワークドキュメントサイト

Capacitor Framework Documentation Website

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

__CAPGO_KEEP_1__

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

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

CLI インストール手順

開始する前に、Node.js、__CAPGO_KEEP_0__、JDK、Xcode、Android Studioをセットアップしておいてください。 __CAPGO_KEEP_1__をインストールするには、以下のコマンドを実行してください：, npm, __CAPGO_KEEP_1__, __CAPGO_KEEP_0____CAPGO_KEEP_1__ __CAPGO_KEEP_0__ 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_0__を使用してプロジェクトを開始するには using 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の追加

まず、必要なプラットフォーム固有のパッケージを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以上が必要です。 プラットフォームの更新 ウェブアプリケーションの変更を反映させるには、次の手順に従ってください。ウェブアプリケーションを更新した後、ウェブの変更を最新の状態にします。

ウェブの変更を最新の状態にします。

ウェブの変更を最新の状態にします。

ウェブの変更を最新の状態にします。

npm run build
npx cap sync

The cap sync コマンドは2つのタスクを処理します:

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

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 __CAPGO_KEEP_0__ Live Update ダッシュボード インターフェース

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

Capgo の主な機能

Capgo は、アプリの更新を簡素化するためにいくつかのツールを提供します。

Capgo

  • エンドツーエンド暗号化 アップデートのセキュアな配信を保証します。
  • アップデートは アプリ起動時にバックグラウンドで実行されます。 分析ツール
  • アップデートの成功率とユーザーの関与度を追跡するのに役立ちます。 一回のクリックでロールバック
  • 問題のあるアップデートから迅速に回復するためのオプションを提供します。 チャンネルシステムを使用して __CAPGO_KEEP_0__
  • __CAPGO_KEEP_1__ __CAPGO_KEEP_2__ __CAPGO_KEEP_0__のステージドロールアウトとベータテスト用に。

Capgoをインストールする

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

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

    npm install --save @capgo/cli

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

    npx capgo init

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

    npm run build
npx capgo release

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

ベストプラクティス

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

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

共通の問題とアドバイス

プラットフォームとCapgoのセットアップが完了した後、共通のエラーに遭遇する可能性があります。迅速に対応する方法については以下を参照してください。

環境設定の問題

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

  • Node Version Mismatch ErrorCLIコマンドの実行に失敗します。 Fix__CAPGO_KEEP_0__のセットアップ要件に記載されているNode.jsバージョン14以上をインストールしてください。

Configuration Problems

  • Config Mismatch Error__CAPGO_KEEP_0__の変更は反映されません。 capacitor.config.json Fix __CAPGO_KEEP_0__の設定を確認してください。don’t take effect. appId そして webDir 値はプロジェクトの package.json そしてウェブビルド出力フォルダです。

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

ビルドとデプロイ

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

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

ライブ更新問題

  • Capgo の更新が失敗しました エラー: 製品アプリ内で更新が表示されません。 修正: Capgo API キー を確認し、正しいチャネルをターゲットに設定してください。 capacitor.config.json プラットフォーム固有の設定についての詳細は、プラットフォーム設定セクションを参照してください。ライブ更新を使用している場合は、__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.

セットアップレビュー

Web アプリを __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ で開始し、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__: プロジェクト設定ガイド Capacitor CLI: Project Setup Guide API __CAPGO_KEEP_1__: プロジェクト設定ガイド でダッシュボードと API の操作を計画する場合、API と接続してください。 API オーバービュー 概要 概要の実装詳細について API キー API キーの実装詳細について デバイス デバイスの実装詳細について バンドル バンドルの実装詳細について

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

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

Get Started Now

Latest from our Blog

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

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

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

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

OTA更新の5つのよくある間違いを避ける

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

モバイルアプリのライブ更新のための5つのセキュリティベストプラクティス

ブログからすべてを参照