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

すべてのモバイル開発チームは、痛みを感じてきました:機能はレビュー用に準備されていますが、ステークホルダーにそれを手に入れることは、TestFlightまたはGoogle Playベータレビューの迷路を通過することです。何が数分でなければならないのですか? それが時間を要する、インストール、ベータビルドの管理に何時間も待つことになります。

あなたのプロダクションアプリが、任意のプルリクエストから最新の変更を直接デバイスにプルルすることができるようになったらどうですか? それが何らかの再インストールやアプリストアの遅延なしで実現できるようになったらどうですか?

それが PRプレビュー が可能になるのです。開発者がプルリクエストを開くと、GitHubアクションが専用のアップデートチャンネルを作成し、変更を公開します。アプリをインストールしている誰でも、そのチャンネルに切り替え、機能をテストし、元のアプリに戻ることができます - すべて、アプリを既にインストールしている人にとってはアプリを離れずに。

TestFlightの問題

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

1. 開発者がプルリクエストを開く - Codeがレビュー用に準備されている
2. TestFlightを待つ - 15-30分間の処理時間
3. 見つけてインストールする - テスターは正しいビルドを探します。
4. - テストと繰り返す - すべての変更はまた待ち時間を意味します。

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

PRプレビューのしくみ

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

1. PRが開かれたり更新されたりします。 - GitHubアクションがトリガーされます。
2. バンドルがアップロードされます。 - ご自身のJS/CSSの変更はPR固有のチャンネルに送られます。
3. コメントが投稿されます。 - テスターはPRに指示を与えます。
4. 即時テスト チャネルを切り替え、テスト、切り替え

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

PR プレビューの設定

PR プレビューを実装する前に、プロジェクトは Capgo Live Updates と設定する必要があります。 Capgo のクイックスタートガイドを参照してください。 Capgo Actions ワークフロー 作成

GitHub Actions Workflow

フラグをチャネルを作成するときに設定する必要があります。これにより、テスターはアプリ内からチャネルを切り替えることができます。 .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.'
            })

__CAPGO_KEEP_0__ --self-assign __CAPGO_KEEP_0__ setChannel() API

設定の準備 Capgo トークン

1. あなたの Capgo ダッシュボード
2. 設定 > API キーに移動
3. __CAPGO_KEEP_0__ キーを生成 all 権限
4. __CAPGO_KEEP_0__ リポジトリのシークレットに追加 CAPGO_TOKEN in your GitHub repository secrets

テスターは2つの方法でチャンネルを切り替えることができます:

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

__CAPGO_KEEP_0__ 設定でチャンネル セレクターを含む Shake メニューを有効にします:

Capacitor

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

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

振るメニューは自動的にフローを処理します:

1. 自身の割り当てが可能なチャンネルをすべて取得します。 listChannels()
2. 検索機能付きでチャンネルを表示して、特定のPRを探します。
3. 選択後、更新をダウンロードします。
4. 「再読み込みする」/「後で」オプションでリロードを求めます。

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

アプリにチャンネルSwitcherを組み込んで、利用可能なPRチャンネルのリストを表示し、テスト者がチャンネルを選択できるようにします。この機能は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');

PR プレビューの完全な 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 がクローズされたときにチャンネルを削除するので、チャンネルリストがきれいに保たれます。

バージョン互換性

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

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

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

PR プレビューの利益者

QAエンジニア

• PR が開かれたときに機能を即時テストできます
• PRを複数切り替える
• 実機で修正とバグを確認する
• テストフライトの処理待ちなし

製品マネージャー

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

エンジニア

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

比較: Traditional vs PR Previews

必要

1. オプション (JSのみ)ベストプラクティス pr-{number} 名前のチャンネルを明確にします。 : 使用します
2. 自動クリーンアップ: PRがクローズされたときに常にチャンネルを削除する
3. アクセス制限: デバッグ/ステージングビルドのみでシェイクメニューを有効にする
4. プロセスを文書化: PRテンプレートにテスト指示を追加する
5. 失敗を優雅に処理する: チャンネル作成が成功したことを確認する前にコメントを投稿する

PRプレビューの使用時期

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

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

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

Channel Surfingの組み合わせ

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

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

プロダクションビルドのテスターは、インストール済みのアプリで、任意のPRチャンネルに切り替えて機能をテストし、元に戻すことができます。

リソース

• Capgo Live Updates Documentation
• チャンネル ドキュメント
• チャンネル サーフィング ガイド
• CLI コマンド リファレンス
• 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 を使用している場合 __CAPGO_KEEP_0__ Live Updates Documentation to plan channel routing and staged rollout, connect it with チャンネルルーティングとステージドロールアウトを計画するには、を接続します。 チャンネル Channels チャンネル Channels チャンネル Beta Testing Solution for the product workflow in Beta Testing Solution, and ベータテストソリューション for the product workflow in Version Targeting Solution.