ウェブアプリを11ステップでアプリストアに配置する方法

App Store と Google Play にウェブアプリを配置するには、Capacitor で構築されたウェブアプリをネイティブプロジェクトにラップし、ネイティブ機能を追加し、Apple と Google の開発者アカウントを作成し、iOS と Android のバイナリを署名してビルドし、実際のユーザーとテストし、ストアのリストリングを準備し、レビューに提出します。既存の HTML、CSS、JavaScript はネイティブ WebView 内で実行されるため、アプリを再構築する必要はありません。

以下は、待たずに実行できる 11 のステップの順序です。Capacitor のコマンド 8 と、2026 年 10 月に適用されるストアの規則が含まれます。

必要なもの

• 静的ファイルにビルドされるWebアプリ (React、Vue、Angular、Svelte、Next.jsの静的エクスポート、Nuxtの生成、またはAIビルダーであるLovableまたはBoltで作られたアプリ)。
• Node.js 22以上 (Capacitor 8要件) とBunまたは別のパッケージマネージャー。
• Android StudioでAndroidビルド。
• macOSでXcode 26またはiOSビルドのクラウドビルドサービスを使用する。
• Appleの場合99ドル/年、Googleの場合25ドル/回。

現実的なタイムライン

Step 1: 開発者アカウントの登録を開始する

アカウントの検証は、コードを書く前に行う必要があるステップです

• Apple Developer Program: 1 年あたり 99 ドル。個人には、Apple アカウントと 2 つの要素認証、および法的名義人の必要があります。組織には、D-U-N-S 番号、会社のウェブサイト、およびそのドメイン上のワークメールが必要です
• Google Play Console: 1 回 25 ドル。組織には、D-U-N-S 番号が必要です。ID の検証が必要です

Google Playで個人として登録した場合、ユーザーアカウントはクローズドテストルール (ステップ 9) に対して対象となります。詳細はこちら AppleとGoogle Playの開発者アカウントの作成方法.

Step 2: スマホ用にウェブアプリを準備する

Capacitor はウェブビュー内でアプリを実行します。ブラウザのタブで問題がないものは、アプリ内では不自然に感じられます。

• 静的ビルド出力。 Capacitor はアプリケーションバンドルからファイルを読み込む。next build with output: 'export', nuxt generate, Vite buildHTTPSでHTTPSのまま、APIの呼び出しはサーバーに送られます。
• __CAPGO_KEEP_0__ のオリジンを __CAPGO_KEEP_1__ の許可されたオリジンに追加する：(iOS) 使用historyルーティング（Capacitorはアプリを配信する） https://localhost __CAPGO_KEEP_0__ loads files from the app bundle. capacitor://localhost __CAPGO_KEEP_0__ calls go to your backend over HTTPS as before. index.html.
• CORS. CapgoのCapacitorを許可したAPIのオリジンリストに追加してください。 capacitor://localhost (iOS) と https://localhost （Android）。
• タップするのではなく、ホバーする。 ホバー専用のメニューを削除し、タップターゲットの最小サイズを44 x 44ポイントに設定する。
• 安全なエリア。 追加 viewport-fit=cover 「Capacitor」を使用すると、開発者はWebアプリをiOSアプリに変換できます。 env(safe-area-inset-top) and env(safe-area-inset-bottom).
• そして オフラインと遅いネットワーク。
• 適切な状態を表示するのではなく、空白の画面を表示しないようにします。レビュアーはフラッキーのWi-Fiでテストします。 「アプリをダウンロードしてください」というバナーは表示しないでください。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Step 3: Add Capacitor

プロジェクトのルートディレクトリから:

bun add @capacitor/core
bun add -d @capacitor/cli
bunx cap init "My App" com.example.myapp --web-dir dist
bun add @capacitor/ios @capacitor/android
bun run build
bunx cap add ios
bunx cap add android

Capgoを使用して実行ファイルを生成する場合、実行ファイルの出力フォルダを使用してください。 --web-dir: dist for Vite out for Next.js static export .output/public for Nuxt generate build for Create React App dist/<project>/browser for Angular

バンドルID（com.example.myappアプリがストアにアップロードされた後は、ドメインが永久に固定されるため、逆引きドメインを使用することをお勧めします。

Your capacitor.config.ts 現在はこのようになります。

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'My App',
  webDir: 'dist',
};

export default config;

Capacitor 8は、Swift Package Managerを使用してiOSプロジェクトを作成するため、CocoaPodsは必要ありません。ウェブのcodeを毎回変更すると、

bun run build
bunx cap sync

「実行する」

bunx cap run ios
bunx cap run android

コミットする ios/ と android/ フォルダ。 これらは、編集する code (権限、アイコン、署名) です。 さらに詳しくは、 how easy it is to make a web app into a mobile app with CapacitorAIツールでビルドした場合、 モバイル向けのガイド.

ステップ 4: 本格的なアプリの特徴を追加する

Appleのガイドライン 4.2 (最小機能) は、ウェブサイトをシェルに包んだだけのアプリを拒否します。数十のネイティブ機能は必要ありませんが、アプリはアプリのように振舞う必要があります。共通で役立つ追加機能:

例えば、ネイティブシェアシートを表示するのではなく、「リンクをコピー」ボタンを表示する。

import { Share } from '@capacitor/share';
import { Capacitor } from '@capacitor/core';

export async function shareLink(url: string, title: string) {
  if (Capacitor.isNativePlatform()) {
    await Share.share({ title, url });
  } else {
    await navigator.clipboard.writeText(url);
  }
}

デジタルコンテンツやサブスクリプションを販売する場合は、支払い計画を今すぐ行ってください。AppleとGoogleは、デジタル商品の場合、ほとんどの場合にアプリ内購入システムを必要とします。2025年の裁判所の判決により、アメリカのApp Storeでは、アプリは外部のウェブチェックアウトへのリンクも表示できます。ただし、他の地域にはそれぞれの規則があります。物理商品やサービス（配達、タクシー）はStripeまたは任意の支払いプロバイダーを使用できます。詳しくは アプリ内課金機能とCapacitor.

Capgoの全機能を備えたCapgoプラグインのカタログは プラグインページ.

Step 5: アイコン、スプラッシュ画面、許可文字列

2つの元画像からアイコンとスプラッシュ画面のすべてのサイズを生成する

bun add -d @capacitor/assets
# assets/icon.png 1024x1024, assets/splash.png 2732x2732
bunx capacitor-assets generate

iOSでは、使用する許可ごとに使用許可の説明が必要です。許可の説明がないと、アプリが許可を求めてクラッシュし、Appleが拒否します。 ios/App/App/Info.plist具体的な理由を記述してください。 "このアプリはカメラを使用する必要があります" などは拒否されます。

<key>NSCameraUsageDescription</key>
<string>Take a photo of your receipt to attach it to an expense.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Choose receipt photos from your library.</string>

Androidでは、プラグインが大部分の許可をmanifestに追加します。使用しない許可を削除し、敏感な許可についてはGoogleに理由を説明するように求められます。

また、

プライバシーマニフェスト ) も追加してください。__CAPGO_KEEP_0__が必要な理由APIを使用している場合。__CAPGO_KEEP_0__のプライバシーマニフェストガイドを参照してください。 (PrivacyInfo.xcprivacy) code が必要な理由の API を使用している場合、見ることができます。 privacy manifest guide for Capacitor.

Step 6: Signing設定

iOS。 Apple ディストリビューション証明書（その秘密鍵、通常exported as として）が必要です。 .p12iOS証明書とプロビジョニングプロファイルの説明 iOS証明書生成ツール; the Android。 ブラウザでCSRステップを処理します。

Android. __CAPGO_KEEP_0__

keytool -genkeypair -v -keystore upload-keystore.jks -alias upload \
  -keyalg RSA -keysize 2048 -validity 10000

__CAPGO_KEEP_1__ __CAPGO_KEEP_2__.

Step 7: リリースバイナリをビルド

ローカル

iOS (Xcode 26を使用したMacで、2026年4月以降のApp Storeのアップロードに必要です。)

1. bunx cap open ios
2. アプリストアにアプリを配置する方法 アプリ ターゲットを設定し、バージョンとビルド番号を設定し、Signing & Capabilities の下でチームを選択してください。
3. 選択 iOSデバイス（arm64）, すると 製品 > アーカイブ.
4. オーガナイザーで Distribute App > App Store Connect > Upload.

Android:

bun run build
bunx cap sync android
cd android
./gradlew bundleRelease

AABは android/app/build/outputs/bundle/release/. Configure signingConfigs in android/app/build.gradle 環境変数からパスワードを読み込むには、キーストアとともに使用します。

確実に targetSdkVersion は36です。 2026年8月31日以降、Google Playでは新しいアプリと更新プログラムはAndroid 16 (API 36)をターゲットにする必要があります。これは、Capacitor 8のデフォルトです。

クラウド

CIから再現可能なビルドが必要な場合、またはMacを持っていない場合 Capgo ビルド Capgoはホストマシンで両方のプラットフォームを構築し、直接テストフライトとGoogle Playにアップロードできます。

bunx @capgo/cli@latest build credentials save --appId com.example.myapp --platform ios
bunx @capgo/cli@latest build credentials save --appId com.example.myapp --platform android
bunx @capgo/cli@latest build request com.example.myapp --platform ios --path .
bunx @capgo/cli@latest build request com.example.myapp --platform android --path .

資格情報はビルドのみに使用され、Capgoサーバーに保存されません。詳細は Capgo ビルドドキュメント.

ステップ 8: テスト者に配布

ステップ 9: Google Play のクローズド テスト (新しい個人アカウント)

• iOS: TestFlight にアップロードします。内部テスター (最大 100 人のチームメンバー) は処理後すぐに、外部テスター (最大 10,000 人) は短い Beta App レビュー後に入手できます。
• Android: Play Console で内部テストリリースを作成し、オプティン リンクを共有します。

テスト用サインアップとログイン、サンドボックスの支払い、プッシュ通知、オフラインの動作、キーボードが入力フィールドを隠す、Android のバックボタン動作などをテストします。各オプションの詳細は iOS と Android アプリをテスターに配布する方法.

iOS

Android テストに12人以上を14日間参加させる閉鎖テスト次に、Play Console ダッシュボードで生産アクセスを申請し、Google は通常1週間以内にレビューします。

Android ビルドが使えるようになったら、このステップを開始してください。Google グループをテスターのリストとして使用すると、人々は自分で参加できます。14日間の間にアップデートを配信し、フィードバックを収集してください。Google は何を学んだかを尋ねます。組織アカウントは除外されます。

ステップ10: ストアのリストを用意し、提出

両方のストアに必要なものは次のとおりです: アプリ名、説明文、受け入れサイズのスクリーンショット、アイコン、プライバシーポリシーURL、プライバシーに関する説明文(Apple App PrivacyとGoogle Data safety)、年齢制限の質問、サポート連絡先、ログインがあるアプリにはデモアカウントも必要です。Google には1024×500の特徴グラフィックも必要です。仕様と制限: App StoreとGoogle Playのリストを用意する方法.

iOSの提出: App Store Connectでバージョンを作成し、TestFlightのビルドを選択し、App Review Information(デモアカウント、注釈)を入力し、 レビューに追加、次に 提出.

Androidの提出: アプリをApp Storeに公開する方法 アプリ内容 申告書の提出、国を選択し、レビューの申請

App Storeへの公開を拒否される理由

1. 4.2最低機能:アプリはただのウェブサイトです。ネイティブの値を追加し、ブラウザのようなUIを削除してください。
2. ログインが必要ですが、デモアカウントが存在しない、またはアカウントが正常に機能しない
3. プライバシーに配慮したログインオプションが存在しない iOSでGoogleまたはFacebookログインを提供する場合、4.8のガイドラインでは、データ収集を制限するための同等のオプションを提供する必要があります。Sign in with Appleは一般的な選択です。
4. アカウントの削除が可能な アプリ内でユーザーがアカウントを作成できる場合
5. デジタル購入はStripeを通じて実施されます。 アプリ内課金が必要な場合を除きます。
6. iPadのレイアウトが破損している iPadをサポートしているためプロジェクトが原因です。
7. 許可情報が欠落しているか曖昧な場合

私たちの 初めてのアプリレビューガイド そして iOSアプリの提出ガイド それぞれの詳細を確認してください。

ステップ11: シップアップデートを待たずにレビュー

リリース後、ほとんどの変更はまだWeb上にあります。codeの代わりに、すべての修正に対して新しいストアビルドを作成するのではなく、ライブアップデートを追加します。Capgoのアップデートプログラムは、Capgoから新しいWebバンドルをダウンロードし、起動時に自動ロールバックを実行します。

bun add @capgo/capacitor-updater
bunx cap sync
bunx @capgo/cli@latest init

Call notifyAppReady() アプリが起動したとき、アップデータがバンドルの健康状態を知ることができます。

import { CapacitorUpdater } from '@capgo/capacitor-updater';

CapacitorUpdater.notifyAppReady();

次のリリースごとに、ウェブアプリの code は 1 つのコマンドです。

bun run build
bunx @capgo/cli@latest bundle upload --channel production

両方のストアでは、解釈可能な code の場合、更新がアプリの主な目的または支払い規則を回避しない限り、許可されています。ネイティブの変更 (新しいプラグイン、新しい権限、 Capacitor のアップグレード) は、まだストアを通じて行われます。詳しくは Capgo ライブアップデート と アップデータドキュメント.

プラグインを最初のストア提出前に追加してください。ユーザーがインストールするバイナリに含まなければなりません。そうでないと、最初の live update は、2 番目のストアリリース後にユーザーに到達するまでに、2 回目のストアリリースが必要になります。

最後に、自動化してください: GitHub Actions または GitLab CI でビルドとアップロードを行い、毎回マージしたときにライブアップデートをプッシュし、ネイティブのリリースはネイティブの変更用に残してください。 mainプレーランチチェックリスト

Apple と Google アカウントが承認され、契約が受け入れられました

• アプリが起動したとき、アップデータがバンドルの健康状態を知ることができます。
• オフラインでも動作するアプリまたは明確なオフライン状態を表示
• 安全領域、キーボード、Androidバックボタンを処理
• 少なくとも、ウェブサイトでは提供できない少なくとも一部のネイティブ機能
• アイコン、スプラッシュ、許可文字列、プライバシーマニフェスト
• 配布証明書、アップルストアプロファイル、アップロードキーストアバックアップ
• ターゲット SDK 36 に対して Android でビルド、iOS で Xcode 26 でビルド
• 実機でテストフライトとプレイの内部テストを実施
• Google Play のクローズドテスト完了（個人アカウント）
• 両方のストアのリストが完了、デモアカウントを追加
• ユーザーがサインアップできる場合のアプリ内アカウント削除
• 最初のバイナリにライブアップデートプラグインを含める

トラブルシューティング

起動時に白画面が表示される webDir ポイントは誤ったフォルダに指しているか、または忘れている bunx cap sync ビルド後に確認 ios/App/App/public そして android/app/src/main/assets/public 含む index.html.

API呼び出しはアプリ内のみで失敗する CORS:許可 capacitor://localhost そして https://localhostURLを呼び出すことも確認する。iOSはデフォルトでURLをブロックする http:// リフレッシュまたはディープリンク後にルート404が表示される

ルーターがデフォルトルートにフォールバックするものを使用する CORS:許可する index.html、またはハッシュルーティングの古いセットアップの場合。

Xcode署名エラー。 エラーの一覧を参照してください。 iOS証明書とプロビジョニングプロファイルの説明.

Gradleビルドがアップグレード後で失敗します。 Capacitor 8には、Android Studio Otter (2025.2.1)または新しいJDK 21が必要であり、リストされているようにアップグレードガイドを参照してください。 Capacitor 8のアップグレードガイドを参照してください。.その他のGradleエラーについては、 CapacitorのAndroidビルドエラーを解決する方法を参照してください。.

Google Playのアップロードが拒否されました。対象はSDK。 設定 targetSdkVersion = 36 in android/variables.gradle.