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

Every mobile dev team has felt the pain: a feature is ready for review, but getting it into stakeholders’ hands means navigating the TestFlight or Google Play beta review maze. What should take minutes turns into hours of waiting, installing, and managing beta builds.

What if your production app could pull the latest changes from any pull request directly onto the device, without any reinstalls or app store delays?

That’s what PR previews GitHubがPull Requestが作成されたときに、開発者がActionを実行すると、専用のアップデートチャンネルが作成され、変更が公開されます。アプリをインストールしているすべての人に、そのチャンネルに切り替えることができ、機能をテストし、元のアプリに戻ることができます。

テストフライトの問題

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

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

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

PR プレビューのしくみ

PR プレビューは Capgo のチャンネルシステムを使用して、各 PR の更新ストリームを作成します。ここでは流れを説明します。

PR が開かれたり更新されたり - GitHub アクションがトリガーされる
バンドルがアップロードされる - ご自身の JS/CSS の変更は PR 固有のチャンネルに流れ込む
コメントが投稿される - テスターは PR 内にテストの指示を受け取る
即時テスト - チャンネルを切り替え、テスト、元に戻す

新しいアプリのインストールが必要ない。テストフライトの遅延もなし。同じプロダクションアプリは、異なる更新チャンネルからデータを取得できる。

PR プレビューの設定

PR プレビューを実装する前に、プロジェクトは Capgo Live Updates と組み込まれている必要があります。 Capgo Live Updates についてのクイックスタートガイドを参照してください。 Capgo Live Updates のクイックスタートガイドまだ実行していない場合は、 __CAPGO_KEEP_0__ Live Updates のクイックスタートガイドを参照してください。

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 __CAPGO_KEEP_0__ setChannel() API トークンを設定する

あなたの Capgo ダッシュボードにアクセスしてください。

__CAPGO_KEEP_0__ キー設定 > Capgo キー
API
新しいキーを生成する all __CAPGO_KEEP_0__
__CAPGO_KEEP_0__ CAPGO_TOKEN in your GitHub repository secrets

オプション 1: Shake メニュー (最も簡単な方法)

__CAPGO_KEEP_0__

Enable the shake menu with channel selector in your Capacitor config:

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

テスターは、チャンネルを選択し、更新を自動的にダウンロードして適用します。 pr-123テスターは、再び振って、生産用に切り替えます。

Shake メニューは、すべてのフローを自動的に処理します。

すべての自分が割り当てられたチャンネルを取得します。 listChannels()
特定のPRを検索するためのチャンネルを表示します。
選択後、更新をダウンロードします。
「再読み込みする」/「後で」オプションの「再読み込みする」ダイアログを表示します。

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

テスターが利用可能な PR チャンネルをリストし、テスターが 1 つを選択できるアプリ内でチャンネル Switcher を構築します。この機能は、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 }}

This removes the channel when the PR is closed, keeping your channel list clean.

バージョン互換性

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

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

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

PR プレビューの利益者

QA エンジニア

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

製品マネージャ

機能をマージされる前にレビューする
PRに直接フィードバックを与える
実装が要件に合致していることを確認する
レビューサイクル時間を短縮する

開発者

変更に対するフィードバックを早く受ける
ステークホルダーに機能をデモする
特定のユーザーと問題をデバッグする
ベータビルドを管理する時間を減らす

比較:Traditional vs PR Previews

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

ベストプラクティス

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

プルリクエストプレビューの使用時期

プルリクエストプレビューは、JavaScript/CSS の変更用です。プルリクエストに含まれる場合:

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

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

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

PR プレビューは、チャンネルサーフィングと組み合わせると最も効果的です。チャンネルサーフィングアプリは次の機能を持つことができます。

production - 全ユーザー向けの安定版リリース
beta - オプトインユーザー向けの早期アクセス
pr-123 - 特定のPR向けの機能プレビュー

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

リソース

まとめ

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

セットアップは最小限です - 1 つの GitHub Actions ワークフローファイル - そして、チーム全体に利益が積み重なる。QA はブロックされず、製品マネージャーは迅速にレビューし、開発者は迅速なフィードバックを受け取ります。

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

Turn Every Pull Request Into an Installable Preview から始めて、チャネルルーティングとステージドロールアウトを計画するには、チャネルルーティングとステージドロールアウトを計画するには、Turn Every Pull Request Into an Installable Preview を使用します。

Turn Every Pull Request Into an Installable Preview を使用して、チャネルルーティングとステージドロールアウトを計画するには、Turn Every Pull Request Into an Installable Preview を使用します。 を使用して、チャネルルーティングとステージドロールアウトを計画するには、Turn Every Pull Request Into an Installable Preview を使用します。チャネルチャネルチャネル Channelsの実装詳細について Channels Channelsの実装詳細についてベータテストソリューションベータテストソリューションの製品フローについて、バージョン目標ソリューションバージョン目標ソリューションの製品フローについて。

Turn Every Pull Request Into an Installable Preview