メインコンテンツへスキップ

Webアプリをお持ちのチーム向け

WebアプリをiOSおよびAndroidアプリへ

既存のWebビルドをCapacitorでラップし、Capgo Buildで署名済みバイナリをビルドして、App StoreやGoogle Playへ公開しましょう。リリース後は、Webの変更をLive Updateとして即座に配信できます。Webのcodeが引き続きソースとなります。

Web、iOS、Android向けに
単一のコードベース
一般的な Native Build
2〜3分
リリース後のWebの変更を
Live Updates
npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
npx cap init "Your App" com.company.app --web-dir dist
npx cap add ios && npx cap add android
npx @capgo/cli@latest init
npx @capgo/cli@latest build request --platform ios

既存のWebアプリ

React、Vue、Angular、Svelte、または静的ファイルを出力するあらゆるスタック

継続的にアップデートするアプリを管理

クラウドでビルドし、OTAで更新する、ネイティブなiOSおよびAndroidプロジェクト

課題

チームは毎日Webをリリースしている。モバイル対応は新たな負担になる。

レスポンシブサイトは、ストアアプリではない

ストアへの掲載、プッシュ通知、デバイスAPIを利用するには、Webの code を包むネイティブなアプリシェルが必要です。

Webチームにとって、ネイティブツールは未知の領域

Xcode、Android Studio、署名証明書、keystore、ストアの管理などは、チームがこれまで経験したことのない作業です。

2つの異なるリリース速度

Webアプリはマージすれば即リリースできます。一方、ストアアプリは変更のたびにレビューを待つ必要があり、通常24〜48時間、時にはそれ以上かかります。

開始する前に

Webアプリでまず確認すべきこと

ほとんどのWebアプリは、Capacitor 内で最小限の変更だけで動作します。これら3つのチェックを行うことで、よくある問題を早期に発見できます。

静的なビルド出力

Capacitor は特定のフォルダ (webDir) からビルド済みファイルを読み込みます。Vite、Angular、Vue はデフォルトでこれを出力します。Next.js の場合は静的エクスポートが必要です。

Capacitorを使用したNext.js

ルーティングとサインインのリダイレクト

クライアントサイドのルート、OAuth のリダイレクト、リンクがドメイン上だけでなく、アプリ内でも正しく動作するか確認してください。

WebアプリからCapacitorへのガイド

必要なデバイス機能

プッシュ通知、カメラ、ファイル、生体認証、アプリ内課金など、ネイティブプラグインが必要なものをリストアップします。

Capacitor プラグイン

ソリューション

Capacitor と Capgo が担当する範囲

Capacitor は Web アプリにネイティブシェルを提供します。Capgo はそのビルド、ストアへの配信、およびアップデートの管理を行います。

Capacitor でWebビルドをラップ

Capacitor はビルド済みのWebアプリをネイティブのiOS/Androidプロジェクトに配置します。プラグインを使えば、JavaScriptからデバイス機能にアクセスできます。

Capacitor プラグイン

Capgo Build によるコンパイルと署名

CLI からiOS/Androidビルドをリクエストできます。iOSビルドはクラウド上のMacで実行されるため、チームにMacを用意する必要はありません。ビルドは通常2〜3分です。

Capgo Buildドキュメント

ストアへのアップロード

署名済みビルドはApp Store ConnectとGoogle Playにアップロードされます。初回リリースとネイティブの変更は、引き続きストア審査を通過する必要があります。

Capgo Buildドキュメント

リリース後のライブアップデート

新しいストアリリースなしで、JavaScript、HTML、CSS、アセットの変更をインストール済みアプリに配信できます。まずはステージングチャネルでテストしてください。

チャネルのドキュメント

仕組み

Capgo で Web チームがモバイルアプリをリリースする方法

既存の Web アプリから、ストア向けビルドとライブアップデートへ。Capacitor のコマンドは Capacitor CLI に、Capgo のコマンドは Capgo CLI のドキュメントにあります。

  1. Web アプリに Capacitor を追加する

    Capacitor をインストールし、アプリ名、bundle ID、ビルド出力フォルダを設定して、iOS と Android プロジェクトを追加します。

    npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
    npx cap init "Your App" com.company.app --web-dir dist
    npx cap add ios
    npx cap add android
    WebアプリからCapacitorへのガイド
  2. アプリを Capgo に接続する

    onboarding では、アプリを Capgo に追加し、production チャネルを作成、updater プラグインをインストールして、最初のテストアップデートまで案内します。

    npx @capgo/cli@latest init
    CLI onboarding ガイド
  3. クラウドで署名済みアプリをビルド

    署名設定は一度だけ行い、あとはiOSとAndroidのビルドをリクエストするだけです。署名済みビルドはApp Store ConnectとGoogle Playにアップロードされ、レビューに回されます。

    npm run build && npx cap sync
    npx @capgo/cli@latest build init
    npx @capgo/cli@latest build request --platform ios
    npx @capgo/cli@latest build request --platform android
    Capgo Buildドキュメント
  4. Webの変更をライブアップデートとして配信

    ユーザーがストア版アプリをインストールした後、新しいWebビルドをそれぞれのチャンネルにアップロードします。ネイティブの変更には、引き続き新しいストアビルドが必要です。

    npm run build
    npx @capgo/cli@latest bundle upload --channel production
    アップデートを配信

オプション: AIコーディングエージェント

コーディングエージェントにモバイルリリースの指示を出す

AIコーディングエージェントを使っている場合は、このプロンプトを貼り付けてください。ネイティブツールを実行する前に、エージェントがアプリを調査し、設定、必要なプラグイン、未完了のタスクをまとめたハンドオフファイルを書き出します。

AIモバイルリリース用プロンプト

You are preparing this existing web app to become an installable iOS and Android app.
Do not assume you can run local tooling. If this environment cannot create native projects or run local tools, create a clean handoff document instead.

Inspect the app and return:

1. The framework, package manager, production build process, and build output folder.
2. Whether the app can be exported or committed to a real Git repository.
3. The app name, bundle ID or package ID suggestion, app icon and splash-screen source, and any missing brand assets.
4. Auth, redirect, deep-link, storage, camera, push, payment, geolocation, file, or notification features that need native plugin planning.
5. Routing, environment variables, API URLs, and asset assumptions that could break inside a native WebView.
6. A proposed Capacitor configuration, including appId, appName, webDir, and required plugins, without inventing secrets.
7. A release-channel plan: production, staging, preview, and rollback expectations for web-layer updates.
8. A list of tasks that must happen outside this environment, such as Apple signing, Android keystore setup, native sync, store records, and signed builds.
9. A docs/mobile-release-handoff.md file with the exact checklist, open questions, and files that a developer or build service should handle next.
10. A short summary of what you changed, what you could not do in this environment, and the next human action.

Capacitor で構築されたアプリ

ストア向けアプリも展開しているWebプロダクト

すでにWebで提供しているプロダクトは、Capacitor で同じ code をパッケージ化して App StoreとGoogle Playで公開し、Webレイヤーの改善を Live Updates として配信し続けられます。

Poll Everywhereのアプリアイコン ビジネス

Poll Everywhere

Webとスマートフォンの両方で使われるオーディエンスポーリング製品で、プレゼンターも参加者も同じフローを期待します。

Google Play インストール数
110万
ストア評価
3.2
Freelancer: Hire & Find Jobs アプリのアイコン ビジネス

フリーランサー:案件探しと採用をスムーズに

大規模なWebプロダクトを持つマーケットプレイスで、採用・メッセージ・アカウント画面もストアアプリで提供。

Google Play インストール数
890万
ストア評価
4.1
TV SPIELFILM - TV-Programmアプリのアイコン エンターテインメント

TV SPIELFILM - TV番組表

アクセス数の多いWebサイトと、同じ番組表や編集コンテンツを表示するストアアプリを提供するTV番組表サービス。

Google Play インストール数
1210万
ストア評価
4.4

導入実績

Capgo を活用するチームの声

5.0/5 開発チームによる評価 9,400+ チーム数 レビューを読む

sikafanka

デザイン、角丸 5

「Capgo Buildのおかげで、Capacitorアプリのリリースプロセスを簡素化できました。1つの明確なワークフローでiOSとAndroidアプリをビルドしてリリースできます。」

Kapil

NuTriQ 創業者

「本番環境のOTAアップデートを、App Storeの審査サイクル全体を待たずに即座に配信できることは、運用面で非常に大きな強みです。」

Luis Dominguezのポートレート

Luis Dominguez

お金を払う者が、支配する。

「Capgo を使い始めてからすべてが速くなり、日常生活をおろそかにせずに、ユーザーに本来かけるべき時間を割けるようになりました。」

よくある質問

Webチームからよくある質問

既存のWebアプリをApp StoreとGoogle Playに展開するチーム向けの簡潔な回答です。

Webアプリを書き直す必要はありますか?

いいえ。Capacitor を使えば、既存のWebビルドをネイティブのiOSとAndroidプロジェクト内で実行できます。デバイス機能が必要な箇所にプラグインを追加し、Webとモバイルで1つのコードベースを維持できます。

WebアプリからCapacitorへのガイド

Next.jsでも動作しますか?

はい、静的エクスポートを利用することで可能です。Capacitor はビルド出力フォルダからファイルを読み込むため、output: 'export' を設定し、webDir をエクスポート先のフォルダに指定してください。Vite、Angular、Vue はデフォルトで静的出力を生成します。

Capacitorを使用したNext.js

iOSのビルドにMacは必要ですか?

不要です。Capgo Build はクラウド上の Mac マシンで iOS ビルドを実行し、署名済みビルドを App Store Connect にアップロードします。ただし、Apple Developer アカウントは引き続き必要です。

Capgo Buildドキュメント

ストアのリリースなしで変更できる内容は?

JavaScript、HTML、CSS、およびアセットは Live Update として配信できます。プラグインの追加、権限の変更、または Capacitor のアップデートには、ストア経由の新しいビルドが必要です。

Live updateか、ネイティブビルドか?

既存の CI からモバイルアップデートを配信できますか?

はい。GitHub Actions、GitLab CI、またはその他の pipeline で、Web ビルドの後に bundle upload を実行してください。また、ネイティブの code が変更された場合は、同じ pipeline から Native Build をリクエストできます。

CI/CD連携

Webアプリをアプリストアへ

14日間の無料トライアルを開始し、Capacitorでアプリをラップして、CLIから最初のiOS/Androidビルドをリクエストしてください。 14日間の返金保証付きプランを選び、Capacitorでアプリをラップして、CLIから最初のiOS/Androidビルドをリクエストしてください。