メインコンテンツにジャンプ
チュートリアル

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

テストフライトの処理を待たなくて済む。Capgo PRプレビューは、QA、PM、ステークホルダーが実機で1分以内に機能をテストできるようにする。

記事のクレジット

マーティン・ドナディュー

記事の執筆者

バレリア

レビュー

ジョーダン

編集者

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

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

ステークホルダーに機能を手に入れることができるアプリが、プロダクションアプリが、任意のプルリクエストから最新の変更を直接デバイスにプルルームすることができるようになることはありませんか? それが何らかの再インストールやアプリストアの遅延なしに?

それが PRプレビュー enable. When a developer opens a pull request, a GitHub Action creates a dedicated update channel and publishes the changes. Anyone with the app installed can switch to that channel, test the feature, and switch back - all without leaving the app they already have.

PRプレビュー

PRプレビュー

  1. PRプレビュー - Code is ready for review
  2. PRプレビュー PRプレビュー
  3. PRプレビュー - テスターは適切なビルドを探します
  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

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

デバッグメニューは、以下のフローを自動的に処理します。

  1. すべての自分に割り当てることができるチャンネルを取得します。 listChannels()
  2. チャンネルを表示して、特定のPRを検索できます。
  3. 選択したチャンネルのアップデートをダウンロードします。
  4. 「再読み込みする」/「後で」オプションでリロードを求めます。

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

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

QAエンジニア

  • PRが開かれたときに特徴を即時テストできます
  • PRを切り替えるだけで再インストールする必要がなくなる
  • 実機で修正とバグを確認する
  • テストフライトの処理待ちがなくなる

製品マネージャー

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

エンジニア

  • 変更に対するフィードバックを早く受ける
  • ステークホルダーに機能を即時デモする
  • 特定のユーザーと問題をデバッグする
  • 開発中のバージョンを管理する時間を削減

比較: Traditional vs PR プレビュー

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

ベストプラクティス

  1. チャンネル名を明確に: 使用 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チャネルに切り替えて機能をテストし、元に戻すことができます。

リソース

結論

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

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

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

続けて "Turn Every Pull Request Into an Installable Preview" から進みましょう。

Capgo を使用している場合 Capgo を使用している場合 チャンネルルーティングとステージドロールアウトを計画するには、 チャンネル チャンネル チャンネル チャンネル ベータテストソリューション ベータテストソリューションの製品ワークフローに バージョン目標ソリューション バージョン目標ソリューションの製品ワークフローに Article credits __CAPGO_KEEP_0__

リアルタイムの更新がCapacitorアプリに

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

ウェブ層のバグが生じたときは、__CAPGO_KEEP_0__を通して修正を配信する。アプリストアの承認待ちを数日間待たずに、ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通る。

ページ/エリア: Capgo マーケティング ウェブサイト。役割: サポートする説明文またはメタ説明文。見つける場所: コンポーネント GetStarted.astro。Capgo製品/ブランドと開発者用語をそのまま保存する。

マーティンから人間のサポート

Capgo gives you the best insights you need to create a truly professional mobile app.