すべてのプルリクエストをインストールできるプレビューに変える

モバイル開発チームなら誰もが経験しているはずです。機能のレビュー準備はできているのに、ステークホルダーに確認してもらうためには、TestFlightやGoogle Playのベータ版レビューという迷宮を通り抜けなければなりません。本来なら数分で終わるはずの作業が、数時間の待ち時間や、ベータ版ビルドのインストール、管理といった手間へと変わってしまいます。

もし、アプリを再インストールしたりApp Storeの審査を待ったりすることなく、本番環境のアプリからあらゆるPull Requestの最新の変更を直接デバイスに反映できたらどうでしょうか？

それを実現するのが PRプレビュー 有効にします。開発者がプルリクエストを作成すると、GitHub Actionが専用のアップデートチャネルを作成し、変更内容を公開します。アプリをインストール済みなら誰でも、そのチャネルに切り替えて機能をテストし、元のチャネルに戻れます。既存のアプリから離れる必要はありません。

TestFlightが抱える課題

モバイル機能をテストする従来のワークフローは、次のような流れです：

開発者がPRを作成 - Code がレビュー可能な状態
TestFlightを待つ - 処理時間は15〜30分
ビルドを探してインストール - テスターが適切なビルドを探す
テストして繰り返す - 変更のたびに待ち時間が発生

これがボトルネックになります。QAはビルド待ちで作業が止まり、プロダクトマネージャーは機能を素早く検証できず、開発者はフィードバック待ちの間にコンテキストを失います。業界の推計では、この生産性低下によりPRあたり約340ドルの損失が発生しています。

PR Previewの仕組み

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

PRの作成または更新 - GitHub Actionがトリガーされる
Bundleをアップロード - JS/CSSの変更がPR専用のチャンネルに送信される
コメントを投稿 - テスターはPR内で手順を受け取る
即座にテスト可能 - チャンネルを切り替えてテストし、元の状態に戻す

アプリの新規インストールは不要。TestFlightの待ち時間もありません。同じプロダクションアプリが、異なるアップデートチャンネルから取得できます。

PR Previewのセットアップ

PRプレビューを実装するには、まずプロジェクトで Capgo Live Updatesの設定が必要です。まだの場合は、以下の手順に従ってください。 Capgo クイックスタートガイドまだ完了していない場合は、こちらを

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 flag when creating the channel. This enables testers to switch to the channel from within the app using the setChannel() API.

Capgo トークンの設定

まず、 Capgo dashboard にアクセスし、
Settings > API Keys に移動します。
新しいキーを生成し、 all 権限を
これを CAPGO_TOKEN GitHub リポジトリの secrets に追加します

テスターがチャンネルを切り替える方法

テスターが PR チャンネルに切り替える方法は 2 つあります：

Capacitor の設定で、チャンネル選択機能付きのシェイクメニューを有効にします：

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

テスターがデバイスを振ってデバッグメニューを開くと、検索バー付きの利用可能なチャンネル一覧が表示されます。対象の PR チャンネル（例： pr-123）を見つけてタップすると、アプリが自動的にアップデートをダウンロードして適用します。テストが終わったら、再度デバイスを振って production に戻します。

シェイクメニューがこのフロー全体を自動的に処理します：

以下の方法で、セルフアサイン可能なすべてのチャンネルを取得します： listChannels()
検索機能付きのチャンネル一覧を表示し、特定のPRを素早く見つけられます
選択したアップデートをダウンロードします
「今すぐリロード」または「後で」のオプションでリロードを促します

オプション2: カスタムのチャンネル選択UI

利用可能な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');

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 bundleがインストール済みのnativeバージョンと互換性がある場合にのみ動作します。PRにnative側のcode変更（新しいCapacitorプラグインやiOS/Androidの変更など）が含まれる場合、テスターには新しいnative buildが必要です。

Capgoがバージョンの互換性を自動的にチェックします。PRのbundleがインストール済みのnativeバージョンと異なるバージョンを対象にしている場合、アップデートは適用されません。これにより、互換性のないcodeによるクラッシュを防ぎます。

nativeの変更が必要なPRでは、TestFlight/Play Store向けの新しいビルドを配布する必要があります。PRプレビューは、nativeのcodeを変更しないJavaScript、CSS、アセットの変更に最適です。

PRプレビューのメリット

QAエンジニア

PR作成後すぐに機能をテスト
再インストールなしで複数のPRを切り替え
実機で修正内容やデグレを確認
TestFlightの処理待ちから解放

プロダクトマネージャー

マージ前に機能をレビュー
PR上で直接フィードバック
実装が要件通りか検証
レビューサイクルを短縮

開発者

変更へのフィードバックを高速化
ステークホルダーへ即座にデモ
特定ユーザーの課題をデバッグ
ベータ版管理の手間を削減

比較：従来の方法 vs PR Previews

項目	TestFlight/ベータ版	Capgo PR プレビュー
ビルド時間	15〜30分	<1分
PRの切り替え	5分以上の再インストール	10秒
セットアップの複雑さ	App Store の認証情報	ワークフローファイルは1つだけ
クリーンアップ	手動	自動
Native code の変更	必須	任意 (JSのみ)

ベストプラクティス

チャンネル名は明確に: 使用する pr-{number} 識別しやすい命名規則を
自動クリーンアップ: PRがクローズされたら必ずチャンネルを削除する
アクセス制限: シェイクメニューはdebug/stagingビルドでのみ有効にする
プロセスをドキュメント化する: PRテンプレートにテスト手順を追加する
失敗を適切に処理する: コメントを投稿する前に、チャンネル作成が成功したか確認する

PR Previews を使うべきでないケース

PRプレビューはJavaScript/CSSの変更向けです。PRに以下が含まれる場合：

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

これらの変更には、従来どおりTestFlight/Play Storeでの配布が必要です。

Channel Surfing との組み合わせ

PRプレビューは、次と組み合わせると最大限に活かせます：チャンネルを切り替えるように。アプリでは次のような運用が可能です：

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

本番ビルドのテスターは、同じインストール済みアプリのまま、任意のPRチャンネルに切り替えて機能をテストし、元のチャンネルに戻せます。

リソース

まとめ

PRプレビューは、チームによるモバイル機能のレビューとテストのあり方を変えます。TestFlightの処理を待ったり、複数のベータビルドを管理したりする必要はありません。テスターは、すでにインストール済みのアプリを使って、数秒で任意のPRチャンネルに切り替えることができます。

セットアップは非常に簡単です。GitHub Actionsのワークフローファイルを1つ追加するだけで、チーム全体に大きなメリットをもたらします。QAの作業を止めず、プロダクトマネージャーはより迅速にレビューでき、開発者は素早いフィードバックを得られます。

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

続きを読む：すべての Pull Request をインストール可能なプレビューに変える

使用している場合 すべてのプルリクエストをインストールできるプレビューに変える チャンネルルーティングと段階的ロールアウトを計画するには、次と組み合わせてください：チャンネル Channelsの実装の詳細については、チャンネル Channelsの実装の詳細については、チャンネル Channelsの実装の詳細については、ベータテストソリューションベータテストソリューションのプロダクトワークフロー向け、およびバージョンターゲティングソリューションバージョンターゲティングソリューションのプロダクトワークフロー向け。