Capgo logo
Development,Mobile,Updates

Capacitor CLIを使用したプロジェクト設定ガイド

Capacitor CLIを使用して、Webテクノロジーを使用してネイティブのiOSおよびAndroidアプリを作成する方法を、簡単な手順で説明します。

Capacitor CLIを使用したプロジェクト設定ガイド

1つのコードベースでiOSとAndroidアプリを構築したいですか? CapacitorCLIを使用すれば、Webテクノロジーを使用してネイティブアプリを作成するプロセスが簡単になります。以下のことを学びます:

  • クイックセットアップ: Capacitor CLIをインストールし、数分でプロジェクトを初期化。
  • プラットフォーム統合: 簡単なコマンドでiOSとAndroidのサポートを追加。
  • ライブアップデート: Capgoを使用して即座にOTAアップデートを実行。
  • 一般的な修正: 同期エラーやビルド失敗などの問題のトラブルシューティング。

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

  1. Node.js、npm、JDK、Xcode、Android Studioをインストール。
  2. npm install @capacitor/core @capacitor/cliを実行してプロジェクトを初期化。
  3. npx cap add iosとnpx cap add androidを使用してiOSとAndroidプラットフォームを追加。
  4. オプション: アプリアップデート用にCapgoをセットアップ。

このガイドでは、Capacitor CLIのセットアップ、プラットフォームの構成、アプリのデプロイに必要なすべてを説明します。早速始めましょう！

Capacitorの設定について

Capacitor

セットアップ要件

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

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

オプション: ライブアップデートを有効にしたい場合は、以下の「Capgoセットアップガイド」をご確認ください。

CLIインストールの手順

開始する前に、Node.js、npm、JDK、Xcode、Android Studioがセットアップされていることを確認してください。準備ができたら、以下のコマンドでCapacitor CLIをインストールできます:

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

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

このステップが完了したら、新規プロジェクトの作成に進んでアプリケーションの構築を開始します。

新規プロジェクトの作成

Capacitor CLIを使用してプロジェクトを開始するには、以下の手順に従ってください:

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

設定ファイルの更新

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を使用して、必要なプラットフォーム固有のパッケージをインストールします:

Terminal window
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以降が必要です。

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

プラットフォームの更新

Webアプリを更新した後、プラットフォームを最新の変更と同期するには、以下の手順に従います:

Terminal window
npm run build
npx cap sync

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

  • 更新されたWebアセットをネイティブプラットフォームにコピー
  • ネイティブの設定とプラグインを最新の変更に合わせて更新

IDEのセットアップ

適切なIDEでプラットフォーム固有のプロジェクトを開きます:

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

Xcodeで:

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

Android Studioで:

  1. build.gradleでアプリケーションIDを変更。
  2. 署名用のキーストアを設定。
  3. デバッグとリリースのビルドバリアントをセットアップ。

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

Capgoセットアップガイド

Capgo

アプリの即時OTAアップデートを有効にするためにCapgoをセットアップします。

Capgoの主な機能

Capgoはアプリのアップデートを合理化するためのいくつかのツールを提供します:

  • エンドツーエンドの暗号化でアップデートの安全な配信を保証。
  • アップデートはアプリ起動時にバックグラウンドで実行。
  • 分析ツールでアップデートの成功率とユーザーエンゲージメントを追跡。
  • ワンクリックロールバックオプションで問題のあるアップデートから素早く復旧。
  • **チャネルシステム**で段階的なロールアウトとベータテストを実施。

Capgoのインストール

Capgoを開始するには以下の手順に従ってください:

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

    Terminal window
    npm install --save @capgo/cli

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

    Terminal window
    npx capgo init

  3. アップデートのビルドとリリース:

    Terminal window
    npm run build
    npx capgo release

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

ベストプラクティス

  • チャネルを使用してアップデートを全ユーザーにロールアウトする前にテスト。
  • 分析を監視してアップデートが正常に配信され、ユーザーが関与し続けていることを確認。
  • エラートラッキングを有効にして早期に問題を発見し修正。
  • 問題に素早く対応できるようにロールバック機能を準備。

CapgoはCapacitor 6と7に対応し、CI/CDパイプラインとスムーズに統合され、AppleとGoogleのストア要件に準拠しています。

一般的な問題とヒント

プラットフォームとCapgoのセットアップが完了したら、いくつかの一般的なエラーに遭遇する可能性があります。以下に素早く対処する方法を説明します。

環境セットアップの問題

  • CLIが見つからない
    エラー: npx capコマンドが失敗。
    修正: npm install --save @capacitor/cli @capacitor/coreを実行して再試行。

  • Nodeバージョンの不一致
    エラー: Node.jsバージョンエラーによりCLIコマンドが失敗。
    修正: セットアップ要件に記載されているNode.jsバージョン14以降をインストール。

設定の問題

  • 設定の不一致
    エラー: capacitor.config.jsonの変更が反映されない。
    修正: appIdとwebDirの値がpackage.jsonとWebビルド出力フォルダと一致していることを確認。

  • プラットフォーム同期エラー
    エラー: 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アップデートの失敗
    エラー: プロダクションアプリでアップデートが表示されない。
    修正: capacitor.config.jsonのCapgo APIキーを確認し、正しいチャネルをターゲットにしていることを確認。

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

まとめ

セットアップの確認

Capacitor CLIでWebアプリを開始し、iOSとAndroidプラットフォームをセットアップし、オプションでライブアップデート用にCapgoを含めます。

開始方法は以下の通りです:

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

詳細なセットアップ手順やトラブルシューティングについては、公式のCapacitorとCapgoのドキュメントを参照してください。

CapacitorJSアプリのための即時更新

CapacitorJSアプリに即座に更新、修正、機能をプッシュし、アプリストアの遅延を回避します。Capgoでシームレスな統合、エンドツーエンドの暗号化、リアルタイムの更新を体験してください。

今すぐ始めよう

最新のニュース

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

ブログのすべてを見る