Pull Requestをインストール可能なプレビューに変える

モバイル開発チームはすべて、痛みを感じている: 機能はレビュー用に準備されているが、ステークホルダーに届けるには TestFlight または Google Play ベータレビューの迷路を乗り越える必要がある。 1 分で完了するべきことは、時間を待ち、インストール、ベータビルドを管理することになる。

あなたの本番アプリが、任意の Pull Request から最新の変更を直接デバイスにプルすることができるようになったらどうなるか?

それができるようになるのは PR プレビュー ができる。開発者が Pull Request を開くと、 GitHub Action は専用のアップデートチャネルを作成し、変更を公開する。アプリをインストールしている人は、そのチャネルに切り替え、機能をテストし、元に戻すことができる - すべては、既存のアプリから離れずに。

TestFlight の問題

モバイル機能のテストの伝統的なワークフローは、以下のようになっています:

開発者はPRを開く - Code はレビュー用に準備されています
テストフライトを待つ - 15-30 分間の処理時間
検索してインストール - テスターは正しいビルドを探します
テストと繰り返す - すべての変更はまた待ち時間

これはボトルネックを生み出します。QAはビルドを待ちながらブロックされます。製品マネージャーは機能を迅速に検証できません。開発者はフィードバックを待つ間、コンテキストを失います。この業界では、生産性の低下によるコストは、PRごとに約 $340 です。

PR プレビューのしくみ

PR プレビューは、Capgo のチャンネルシステムを使用して、PRごとにアップデートストリームを作成します。ここでは流れをご紹介します:

PRが開かれたり更新されたり - GitHub アクションのトリガー
バンドルがアップロードされた - JS/CSSの変更はPR固有のチャネルに送られます
コメントが投稿された - テスターはPRにインストラクションを取得します
即時テスト - チャネルを切り替え、テスト、戻す

新しいアプリのインストールなし。テストフライトの遅延なし。同じプロダクションアプリが異なるアップデートチャネルからプルできます。

PRプレビューの設定

PRプレビューを実装する前に、プロジェクトはCapgo Live Updatesと設定する必要があります。Capgo のクイックスタートガイドを参照してください。 Capgo quickstart guide あなたがすでにそれを行った場合は。

GitHub Actions ワークフロー

作成 .github/workflows/pr-preview.yml:

name: PR Preview
on:
  pull_request:
    types: [opened, synchronize]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6

      - name: Setup Bun
        uses: oven-sh/setup-bun@v2

      - name: Install Dependencies
        run: bun install

      - name: Build
        run: bun run build

      # Create a channel named after your PR (may already exist on synchronize)
      - name: Create PR Channel
        id: create_channel
        continue-on-error: true
        run: bunx @capgo/cli@latest channel add pr-${{ github.event.pull_request.number }} --self-assign
        env:
          CAPGO_TOKEN: ${{ secrets.CAPGO_TOKEN }}

      # Upload the build to that channel
      - name: Upload to Capgo
        run: bunx @capgo/cli@latest bundle upload --channel pr-${{ github.event.pull_request.number }}
        env:
          CAPGO_TOKEN: ${{ secrets.CAPGO_TOKEN }}

      # Post a comment with testing instructions (only on PR open)
      - name: Comment on PR
        if: github.event.action == 'opened'
        uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: ${{ github.event.pull_request.number }},
              body: '📱 **Test this PR on device:**\n\nOpen your app and switch to channel: `pr-${{ github.event.pull_request.number }}`\n\nUse the shake menu or call `setChannel()` from your app.'
            })

このキーは --self-assign フラグをチャンネルを作成する際に設定します。テスターは、フラグを使用してアプリ内からチャンネルに切り替えることができます。 setChannel() API。

Capgo トークンの設定

__CAPGO_KEEP_0__ ダッシュボードに移動してください設定 > Capgo キーに移動してください
API キーを生成してください。
権限を含む all __CAPGO_KEEP_0__
追加してください CAPGO_TOKEN あなたのGitHubリポジトリのシークレットに

テスターがチャンネルを切り替える方法

テスターがPRチャンネルに切り替える方法は2つあります:

あなたのCapacitor設定で、チャンネルセレクター付きのshakeメニューを有効にします:

// capacitor.config.ts
const config: CapacitorConfig = {
  // ... your other config
  plugins: {
    CapacitorUpdater: {
      shakeMenu: true,
      allowShakeChannelSelector: true
    }
  }
};

テスターは、デバッグメニューを開くためにデバイスを振って、利用可能なチャンネルのリストと検索バーが表示されます。彼らはPRチャンネル（例えば、）、を探してタップして選択し、自動的にアップデートをダウンロードして適用します。テストが終わったら、彼らは再びデバイスを振って、プロダクションに切り替えます。 pr-123shakeメニューは、すべてのフローを自動的に処理します:

自身の割り当て可能なチャンネルをすべて取得します

チャンネルを検索して、特定のPRを探す listChannels()
選択した後、更新をダウンロードします
Fetches all self-assignable channels via __CAPGO_KEEP_0__ API
“Reload Now” / “Later” オプションでリロードを促す

オプション 2: カスタムチャネルセレクター UI

アプリ内にチャネル Switcher を組み込んで、利用可能な PR チャネルをリストし、テスターが 1 つを選択できるようにします。この機能は、以下の 2 つの API を使用します。

listChannels() - 自分自身の割り当てを有効にしたチャネルをすべて取得します。
setChannel() - 選択したチャネルにデバイスを切り替えます。

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

// Get all available channels (including PR channels)
async function getAvailableChannels() {
  const { channels } = await CapacitorUpdater.listChannels();

  // Filter to show only PR channels
  const prChannels = channels.filter(c => c.name.startsWith('pr-'));

  return prChannels;
}

// Switch to a specific PR channel
async function switchToChannel(channelName: string) {
  await CapacitorUpdater.setChannel({
    channel: channelName,
    triggerAutoUpdate: true  // Immediately check for updates
  });
}

// Return to production
async function switchBackToProduction() {
  await CapacitorUpdater.unsetChannel({});
}

// Get current channel
async function getCurrentChannel() {
  const { channel } = await CapacitorUpdater.getChannel();
  return channel;
}

これらの基本構築ブロックを使用して、シンプルな UI を作成できます。

// Example: List PR channels and let user select
const channels = await getAvailableChannels();
const current = await getCurrentChannel();

// Display channels in your UI
channels.forEach(channel => {
  console.log(`${channel.name} ${channel.name === current ? '(current)' : ''}`);
});

// When user selects a channel
await switchToChannel('pr-123');

完全な React コンポーネントの例については、チャネルサーフィング記事を参照してください。.

PR チャネルのクリーンアップ

PR がマージまたはクローズされたときに、チャネルをクリーンアップしたいと思います。別のワークフローを追加してください。

name: Cleanup PR Preview
on:
  pull_request:
    types: [closed]

jobs:
  cleanup:
    runs-on: ubuntu-latest
    steps:
      - name: Delete PR Channel
        run: bunx @capgo/cli@latest channel delete pr-${{ github.event.pull_request.number }}
        env:
          CAPGO_TOKEN: ${{ secrets.CAPGO_TOKEN }}

PR がクローズされたときにチャネルを削除して、チャネルリストをクリーンに保ちます。

バージョン互換性

JavaScript バンドルがインストール済みのネイティブ版と互換性がある場合にのみ、PR プレビューが機能します。 PR がネイティブ Capacitor の変更 (新しい code プラグイン、iOS/Android の修正) を含む場合、テスターは新しいネイティブビルドが必要になります。

Capgo は自動的にバージョン互換性を確認します。 PR のバンドルがインストールされているネイティブ版と異なるバージョンをターゲットにしている場合、更新が適用されません。これは、互換性のない code から起因するクラッシュを防ぐためです。

PR がネイティブ変更を必要とする場合、TestFlight/Play Store ビルドを配布する必要があります。 PR プレビューは、ネイティブ code を触らない JavaScript、CSS、資産の変更が最も効果的です。

PR プレビューの利益者

QAエンジニア

PR が開かれたときにテスト機能を即時実行
複数の PR を切り替えることなく再インストールする
実機で修正とバグの確認
TestFlight の処理待ちなし

プロダクトマネージャ

機能をマージする前にレビュー
PR に直接フィードバックを提供
実装が要件と一致することを確認する
レビューサイクル時間を短縮する

開発者

__CAPGO_KEEP_0__の変更に対する迅速なフィードバックを得る
ステークホルダーに機能をデモする
特定のユーザーで問題をデバッグする
ベータビルドを管理する時間を削減する

比較:Traditional vs PR Previews

アスペクト	TestFlight/Beta	Capgo PR Preview
ビルド時間	15-30分	1分未満
PRの切り替え	5分以上の再インストール	10秒
セットアップの複雑さ	App Storeの資格情報	ワークフローファイル1つ
クリーンアップ	手動	自動
ネイティブcode変更	必須	オプション (JS 限定)

ベストプラクティス

名前のチャンネルを明確に: 使用 pr-{number} 識別のための簡単な規則
自動クリーンアップ: PR がクローズされたときに常にチャンネルを削除
アクセスを制限: デバッグ/ステージングビルドのみでシェイクメニューを有効にする
プロセスをドキュメント化: PR テンプレートにテストの指示を追加
失敗を柔軟に処理する: チャンネル作成が成功する前にコメントを投稿することを確認する

PR プレビューを使用しないとき

PR プレビューは JavaScript/CSS 変更用です。PR に含まれる場合:

新しい Capacitor プラグイン
iOS ネイティブ code 変更
Android ネイティブ code 変更
ネイティブビルドに影響する依存関係の更新

その変更には、通常の TestFlight/Play Store 配布が必要です。

チャンネルサーフィングと組み合わせる

PR プレビューは、チャンネルサーフィングと組み合わせることが最も効果的です。チャンネルサーフィング. Your app can have:

production - 全員に安定したリリース
beta - オプティンユーザーに先行アクセス
pr-123 - 特定のPRに対する機能プレビュー

テスターは、プロダクションビルドでPRチャンネルを切り替え、機能をテストし、元のアプリに戻すことができます。すべて同じアプリがインストールされているため。

リソース

結論

PR プレビューは、チームがモバイル機能をレビューおよびテストする方法を変える。TestFlight の処理を待つ必要がなく、複数のベータビルドを管理する必要がなくなる。テスターは、すでにインストールしているアプリを使用して、秒数で任意の PR チャネルに切り替えることができる。

セットアップは最小限 - 1 つの GitHub Actions ワークフローファイル - である。チーム全体にわたる利点は積み重ねられる。QA はブロックされず、プロダクトマネージャーは迅速にレビューし、開発者は迅速なフィードバックを受けられる。

最初は、ワークフローを 1 つのリポジトリに追加して、レビュープロセスがどのように変化するかを確認してみることから始めましょう。

Turn Every Pull Request Into an Installable Preview から始めて、PR チャネルに切り替える方法を学びましょう。

Turn Every Pull Request Into an Installable Preview を使用している場合、チャネルルーティングとステージドロールアウトを計画する場合は、Channels に接続してください。 Channels Channels Channels Channels Channels Channels Channels __CAPGO_KEEP_0__の実装詳細についてはチャンネルでベータテストソリューション __CAPGO_KEEP_0__の製品ワークフローについてはベータテストソリューション、バージョンターゲットソリューション __CAPGO_KEEP_0__の製品ワークフローについてはバージョンターゲットソリューション。

Pull Request をインストール可能なプレビューに変える

TestFlight の問題

PR プレビューのしくみ

PRプレビューの設定

GitHub Actions ワークフロー

Capgo トークンの設定

テスターがチャンネルを切り替える方法

オプション1: Shake Menu (最も簡単な方法)

オプション 2: カスタムチャネルセレクター UI

PR チャネルのクリーンアップ

バージョン互換性

PR プレビューの利益者

QAエンジニア

プロダクトマネージャ

開発者

比較:Traditional vs PR Previews

ベストプラクティス

PR プレビューを使用しないとき

チャンネルサーフィングと組み合わせる

リソース

結論

Turn Every Pull Request Into an Installable Preview から始めて、PR チャネルに切り替える方法を学びましょう。

Pull Request をインストール可能なプレビューに変える

TestFlight の問題

PR プレビューのしくみ

PRプレビューの設定

GitHub Actions ワークフロー

Capgo トークンの設定

テスターがチャンネルを切り替える方法

オプション1: Shake Menu (最も簡単な方法)

オプション 2: カスタム チャネル セレクター UI

PR チャネルのクリーンアップ

バージョン互換性

PR プレビューの利益者

QAエンジニア

プロダクトマネージャ

開発者

比較:Traditional vs PR Previews

ベスト プラクティス

PR プレビューを使用しないとき

チャンネルサーフィングと組み合わせる

リソース

結論

Turn Every Pull Request Into an Installable Preview から始めて、PR チャネルに切り替える方法を学びましょう。

オプション 2: カスタムチャネルセレクター UI

ベストプラクティス