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

すべてのモバイル開発チームは、痛みを感じています:機能はレビュー用に準備されていますが、ステークホルダーに届けるには、テストフライトまたはGoogle Playベータレビューの迷路をナビゲートする必要があります。何が数分で行われるべきものが、時間を待ち、インストールし、ベータビルドを管理することになっています。

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

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

テストフライトの問題

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

1. 開発者がプルリクエストを開く - Codeはレビュー用に準備されています
2. テストフライトを待つ - プレーンテストフライトの処理時間 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 アクションワークフロー

- 即時テスト .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 トークンを設定する

1. あなたの 設定 > Capgo キーに移動してください。
2. API キーを生成します。
3. 許可を付与します。 all permissions
4. 追加してください CAPGO_TOKEN GitHub

__CAPGO_KEEP_0__

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

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

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

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

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

チャンネルを取得する

1. チャンネルを表示して、特定の PR を検索する listChannels()
2. 選択したチャンネルのアップデートをダウンロードする
3. 「再起動する」/「後で」オプションでリロードを求める
4. オプション 2: カスタム チャンネル セレクター UI

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

アプリにチャネル切り替え機能を組み込んで、利用可能な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がクローズされたときに削除するようにします。チャンネルリストをクリーンに保つことができます。

バージョン互換性

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

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

ネイティブ変更が必要なPRについては、TestFlight/Play Storeの新しいビルドを配布する必要があります。PRプレビューは、ネイティブcodeに影響を与えないJavaScript、CSS、資産の変更が最適です。

誰がPRプレビューの利益を受けるか

テストエンジニア

• PRが開かれたときに即時テスト機能を試す
• PRが開かれたときに即座に機能をテストする
• 複数のPR間で切り替えることができる
• 実機で修正とバグを検証する

テストフライトの処理待ちなし

• プロダクトマネージャ
• コンテキスト: Capgoのマーケティングウェブサイト。役割: 短いUIラベルまたはナビゲーションアイテム。メッセージキー `product_managers` (プロダクトマネージャ)。
• 機能をマージされる前にレビューする
• 直接PRにフィードバックを与える

実装が要件と一致することを検証する

• 変更をより速くフィードバックを受ける
• ステークホルダーに即時デモ機能を提供する
• 特定のユーザーと問題をデバッグする
• ベータビルドの管理時間を削減する

伝統的なPRプレビューと比較する

ベスト プラクティス

1. チャンネル名を明確に表示する: 便利な識別のための pr-{number} 標準規約を使用する
2. Auto-cleanupアクセスを制限する
3. : デバッグ/ステージングビルドのみでシェイクメニューを有効にするプロセスをドキュメントする
4. : PRテンプレートにテスト指示を追加する失敗を柔軟に処理する
5. : チャンネル作成が成功する前にコメントを投稿する: チャンネル作成に失敗した場合の処理

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

PR プレビューは、JavaScript/CSS の変更用です。PR が含む場合:

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

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

Channel Surfing と組み合わせる

PR プレビューは、Channel Surfing と組み合わせると最も効果的です。 アプリは次のようになります:- 全ユーザー向けの安定版リリース

• production - オプトインユーザー向けの早期アクセス
• beta PR プレビューは、Channel Surfing と組み合わせることができます。
• pr-123 - PR の特定のビルドに特化した機能プレビュー

テスト用のビルドを持つテスターは、任意の PR チャンネルに切り替えて機能をテストし、元のアプリに切り替えることができます。

リソース

• Capgo ライブアップデートドキュメント
• チャンネル ドキュメント
• チャンネル サーフィング ガイド
• CLI コマンドリファレンス
• PR プレビュー ソリューション ページ

結論

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

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

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

Pull リクエストからインストール可能なプレビューまで進めましょう。

もしあなたがCapgoを利用している場合 Pull リクエストからインストール可能なプレビューまで進めましょう。 を使用してチャネル ルーティングとステージド ロールアウトを計画し、チャネルと接続する チャネル チャンネルの実装詳細について チャネル チャンネルの実装詳細について チャネル チャンネルの実装詳細について チャネル の実装詳細についてはチャネルを参照してください。 バージョン対象ソリューション バージョン対象ソリューション用の製品ワークフロー