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

コンテンツマーケター

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

すべてのモバイル開発チームは、痛みを感じています:機能はレビュー用に準備されていますが、ステークホルダーが手に入れるにはテストフライトまたはGoogle Playベータレビューの迷路をナビゲートする必要があります。何が分かち合える時間に変わり、インストールとベータビルドの管理に何時間かかるか? あなたのプロダクションアプリが、任意のプルリクエストから最新の変更を直接デバイスにプルルーすることができるようになるのなら何が起こるでしょうか? それでも再インストールやアプリストアの遅延はありませんか? GitHubがPull Requestを開いた開発者に自動でActionを実行し、専用のアップデートチャンネルを作成し、変更を公開します。アプリをインストールしているすべてのユーザーは、そのチャンネルに切り替えて機能をテストし、元のアプリに戻ることができます。

テストフライトの問題

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

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

これはボトルネックを生み出します。QAはビルドを待ち、製品マネージャーは機能を迅速に検証できず、開発者はフィードバックを待つ間、コンテキストを失います。業界は、1つのPull Requestあたり約$340の生産性の喪失を推定しています。

PR プレビューのしくみ

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

1. PR が開かれたり更新されたり - GitHub アクションがトリガーされる
2. パッケージがアップロードされる - ご自分の JS/CSS の変更は PR 固定用のチャンネルに送られます
3. コメントが投稿される - テスターは PR 内にテストの指示を受けます
4. 即時テスト - チャンネルを切り替え、テスト、元に戻す

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

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 トークンを設定する

Setting Up Capgo Token

1. __CAPGO_KEEP_0__ ダッシュボード 設定 > Capgo キーに移動してください
2. API
3. 新しいキーを生成する all __CAPGO_KEEP_0__
4. __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 メニューは、すべてのフローを自動的に処理します。

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

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

テスト者が利用可能なPRチャンネルをリストし、テスト用にチャンネルを選択できるアプリ内でチャンネル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 }}

PRがクローズされたときにチャネルが削除され、チャネルリストが綺麗になる。

バージョン互換性

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

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

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

PRプレビューの利益者

QAエンジニア

• PRが開かれたときにテスト機能を即時実行
• 複数のPR間で切り替える
• 実機で修正とバグの検証
• TestFlightの処理待ちなし

製品マネージャ

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

開発者

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

比較:Traditional vs PR Previews

ベスト プラクティス

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

PR プレビューを使用しない場合

PR プレビューは JavaScript/CSS 変更用です。次の場合、PR プレビューは使用しないでください:

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

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

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

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

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

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

リソース

• Capgo Live Updates Documentation
• __CAPGO_KEEP_0__ チャンネルドキュメント
• __CAPGO_KEEP_0__ チャンネルサーフィングガイド
• CLI Commands Reference
• PR プレビュー ソリューション ページ

結論

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

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

まず、ワークフローを 1 つのリポジトリに追加し、レビュー プロセスがどのように変化するかを確認してください。