メインコンテンツへスキップ
チュートリアル

Capgo のチャンネル切り替え術:実行時にアップデートチャンネルを切り替える方法

Capgoのランタイム・チャネル切り替え機能を使えば、特定のユーザーへ変更を即座に配信できます。Capacitorアプリを再インストールすることなく、アップデートのチャネルを切り替えましょう。

Capgo のチャンネルサーフィン:ランタイムでアップデートチャンネルを切り替える方法 Capgo ブログ用イラスト

TestFlight や Google Play から新しい Native Build をダウンロードしてインストールしてもらう手間をかけずに、特定のユーザーに変更を直接届けて、すぐにレビューやフィードバックをもらいたいと思ったことはありませんか?

お客様から改善要望を受けてすぐ実装できても、その結果を手元で検証してもらうには、全ユーザーにアップデートを配信する(実験的な変更にはリスクがある)か、そのお客様専用の単発ビルドを作る(双方にとって手間)しかありませんでした。

足りなかったのは柔軟性です。開発者は、非技術系のステークホルダー、QA、必要に応じて全ユーザーなど、ユーザーグループごとに異なるアップデートを配信できるようにしたいと考えていました。

本番ビルドから開発中のバージョンに切り替え、フィードバックを集めて本番に戻る方法はありませんでした。

それが、 チャンネルを切り替えるように 実現することです。ユーザーのデバイスにインストールされたアプリは、実行時にアップデートチャネルを切り替えることができます。これにより、プロダクションアプリを単なる固定されたエンドポイントではなく、レビューやイテレーションのための柔軟なスペースへと変貌させます。これは、プロダクションアプリを扱う非エンジニアのステークホルダーにとって特に有用であり、すでにインストール済みのアプリ内で直接変更をテストし、フィードバックを送ることが可能になります。

Update Channelを理解する

アップデートチャネルは、Capgo が特定のビルドに対してアップデートを配信するための仕組みです。各ビルドはチャネルに関連付けられており、そのチャネルによって受信するアップデートが決定されます。

例えば、 preview ユーザーに影響を与えることなく、 productionチャネルへアップデートを公開できます。以前は、チャネルを切り替えるには別の Native Build をインストールするか、ダッシュボードから手動でデバイスの割り当てを変更する必要がありました。

Capgoのチャンネルでは、次のことができます:

  • 異なる機能を持つ特定のユーザーグループをターゲットにする
  • ユーザーを異なるチャネルに割り当てて A/B テストを実行する
  • 新機能を段階的にロールアウトする
  • ベータテストプログラムの作成
  • 個別ユーザーと本番環境の不具合をデバッグ

アップデートチャネルに詳しくない場合は、 Capgo のチャネルドキュメント で詳細を確認できます。

Channel Surfingとは?

チャネルサーフィンを使うと、インストール済みのアプリが再インストールなしで異なるアップデートストリームから更新を取得できます。アプリは実行時にアップデートチャネルを切り替えられ、アンインストールされるか別のチャネルに切り替えられるまで、新しく選択したチャネルから更新を受け取り続けます。

実際には、プロダクトオーナーやQAが production ビルドを、例えば特定の preview チャネルに切り替えて、最新の変更を試すことができます。テストが終わったら、再び production に切り替えるだけです。再インストールや別途プレビュービルドは不要です。

内部的には、アプリがアップデートクライアントに使用するチャネルを伝えることで、チャネルサーフィンが機能します。この選択は実行時に変更でき、クリアまたは置き換えられるまで有効です。

Channel Surfingの実装方法

チャンネル切り替えを試す前に、プロジェクトで Capgo Live Updates を設定しておく必要があります。設定するには、次の Capgo クイックスタートガイド.

チャンネル切り替えに必要な設定は、Capgo ダッシュボードで、切り替えたい各チャンネルの “Allow devices to self associate” を有効にすることだけです。 それ以外に code の変更や設定変更は不要です。

チャンネル切り替えは、基本的に 1 つの API 呼び出しで動作します:

import { CapacitorUpdater } from '@capgo/capacitor-updater';

await CapacitorUpdater.setChannel({ channel: 'your-channel' });

これで、Capgo にアップデートを問い合わせる際に使うチャンネルが設定されます。 setChannel API の詳細.

Channelの即時切り替え (v5.34.0+)

プラグインのバージョン 5.34.0、6.34.0、7.34.0、または 8.0.0 以降 (メジャーバージョンによって異なります) setChannel() 動作が異なり、はるかに高速です:

  1. バックエンドでの検証 (読み取り専用): Capgo バックエンドにリクエストを送信し、そのチャンネルが許可されているか検証します
  2. ローカルストレージの更新: 検証に成功すると、チャンネルがデバイスのローカルストレージに保存されます
  3. 即時反映: 次回のアップデート確認時に、即座に新しいチャンネルが使用されます

以前は、 setChannel() チャンネルの上書き設定をバックエンドのデータベース(DashboardやAPIの変更など)に保存していました。そのため、新しいチャンネルが認識されるまで、デバイスはバックエンドのレプリケーション(最大2分)を待つ必要がありました。新しい挙動では、検証のためにバックエンドから読み取るだけで、あとはローカルに保存するため、チャンネルの切り替えが即時で行われます。

チャンネル切り替えの完全なフロー

より良いユーザー体験を提供するには、単にチャンネルを切り替えてアプリの再起動を待つだけでなく、追加の処理を行うのが一般的です。よくある手法は、即座にアップデートを確認し、利用可能であればダウンロードしてアプリをリロードすることで、ユーザーが選択したチャンネルのアップデートに直接アクセスできるようにすることです。

一般的なフローは以下の通りです:

  1. チャンネルを変更 (setChannel)
  2. アップデートを確認 (getLatest)
  3. アップデートを取得して適用 (download, set または next)
  4. 必要に応じてアプリをリロード (reload)

完全な実装例はこちら:

import { CapacitorUpdater } from '@capgo/capacitor-updater';

async function switchChannel(selectedChannel: string) {
  try {
    // 1. Set the updates channel (with optional auto-update trigger)
    await CapacitorUpdater.setChannel({
      channel: selectedChannel,
      triggerAutoUpdate: true // Immediately check for updates
    });

    console.log(`Switched to channel: ${selectedChannel}`);

    // If you want more control, handle the update manually:
    // const latest = await CapacitorUpdater.getLatest();
    // if (latest.url) {
    //   const bundle = await CapacitorUpdater.download({
    //     url: latest.url,
    //     version: latest.version
    //   });
    //   await CapacitorUpdater.set({ id: bundle.id });
    // }

  } catch (error) {
    console.error('Failed to switch channel:', error);
  }
}

// Switch to the beta channel
switchChannel('beta');

このフローの構成は自由です。ステップを複数のインタラクションに分けても、一度にまとめて実行しても構いません。どのように構成するにしても、失敗に備えてください。ネットワークの問題や無効なチャンネルがあると、アップデートを適用できないことがあります。

唯一の要件:Self-Assignmentを有効にする

チャンネルの切り替えを可能にするには、これを行うだけでOKです。 アプリが次を使用してチャンネルを切り替えるには setChannel()、Capgo ダッシュボードでそのチャンネルのself-assignmentを有効にする必要があります:

  1. 以下にアクセスしてください: チャンネル Capgo ダッシュボード内のセクション
  2. 管理したいチャンネル名をクリックします
  3. 有効にする 「デバイスによる自動アソシエーションを許可する」
  4. 変更を保存

チャンネル設定でセルフアサインメントを有効にします

完了です。アプリ側の設定変更や追加の defaultChannel 設定は不要です。ユーザーに切り替えを許可したいチャンネルでセルフアサインメントを有効にするだけです。

この設定が無効な場合、このチャンネルを使用した setChannel() 呼び出しは失敗し、 channelPrivate イベントが発行されます。

利用可能なチャンネル一覧

セルフアサイン可能なチャンネル一覧を取得できます:

const { channels } = await CapacitorUpdater.listChannels();

console.log('Available channels:', channels.map(c => c.name));
// Use this to build a channel selector UI

セルフアサインが有効なチャンネルのみを返します。

現在のチャンネルを取得する

デバイスに現在割り当てられているチャンネルを確認します:

const { channel } = await CapacitorUpdater.getChannel();

console.log('Current channel:', channel);

デフォルトチャンネルに戻す

チャンネルの上書きを解除してデフォルトに戻すには:

await CapacitorUpdater.unsetChannel({});

これにより、デバイスと明示的に割り当てられたチャンネルの紐付けが解除され、 defaultChannel config で指定されたチャンネル、またはクラウドのデフォルトにフォールバックします。

チャンネル切り替えのテスト方法

チャンネル切り替えを実際に確認するには、リリースビルドが必要です — @capgo/capacitor-updater API はリリースビルド向けに設計されています。デバッグビルドでは、通常アプリは開発サーバーから JavaScript を読み込むため、通常のアップデートフローがスキップされます。

前提条件

チャンネル切り替えの唯一の要件は、 「Allow devices to self associate」を有効にすることです。 切り替えを許可したい各チャンネルで有効にしてください。アプリ側の設定変更は不要です。

テスト用ビルドの作成

通常通りアプリをビルドします:

bun run build && npx cap sync

その後、XcodeやAndroid Studioを使用してNative Buildを作成するか、CI/CDパイプラインを利用してください。アプリは、Capgo ダッシュボードでクラウドのデフォルトとして設定されているチャンネルから起動します。

異なるチャンネルへのアップデートの公開

アプリのインストールが完了したら、各チャンネルにアップデートを公開します:

# Publish to preview channel
npx @capgo/cli@latest bundle upload --channel preview

# Publish to production channel
npx @capgo/cli@latest bundle upload --channel production

そこからアプリ内のチャンネル切り替えUIに移動し、チャンネル切り替えを実行してください。アプリは選択したチャンネルからアップデートを取得し、新しいアップデートへリロードされるはずです。

チャンネル切り替えUIの構築

チャンネル切り替えは、通常、アプリの全ユーザーではなく、一部のユーザーにのみ公開する機能です。例えば、認証済みの従業員だけが使えるボタンで、アプリをpreviewチャンネルに切り替えられるようにする、といった使い方が考えられます。

以下は、チャンネル切り替え用のReactコンポーネントの例です:

import { useState, useEffect } from 'react';
import { CapacitorUpdater } from '@capgo/capacitor-updater';

export function ChannelSwitcher() {
  const [currentChannel, setCurrentChannel] = useState<string>('');
  const [availableChannels, setAvailableChannels] = useState<string[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    loadChannelInfo();
  }, []);

  async function loadChannelInfo() {
    const { channel } = await CapacitorUpdater.getChannel();
    setCurrentChannel(channel || 'default');

    const { channels } = await CapacitorUpdater.listChannels();
    setAvailableChannels(channels.map(c => c.name));
  }

  async function handleChannelSwitch(channel: string) {
    setIsLoading(true);
    try {
      await CapacitorUpdater.setChannel({
        channel,
        triggerAutoUpdate: true
      });
      setCurrentChannel(channel);
      // App will update in background or on next restart
    } catch (error) {
      console.error('Failed to switch channel:', error);
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <div>
      <p>Current channel: {currentChannel}</p>
      <div>
        {availableChannels.map(channel => (
          <button
            key={channel}
            onClick={() => handleChannelSwitch(channel)}
            disabled={isLoading || channel === currentChannel}
          >
            Switch to {channel}
          </button>
        ))}
      </div>
    </div>
  );
}

OTA Updateの注意点

これらはチャンネル切り替え特有のものではありませんが、実行時にチャンネルを切り替え始めるとすぐに顕在化する傾向があります。

実行時のバージョン不一致

Capgoのアップデートはネイティブアプリのバージョンに紐付いています。アップデートのネイティブバージョンがインストール済みのアプリのネイティブバージョンと一致しない場合、アップデートのダウンロードや適用は行われません。チャンネルを切り替えている際、そのチャンネルにアップデートが存在するにもかかわらず、アプリのチャンネルは切り替わるがアップデートが適用されないという現象は、通常これが原因です。

これは通常、そのアップデートがアプリの異なるネイティブバージョンから公開されたことを意味します。各チャンネルのbundleが、デバイスにインストールされているネイティブバージョンと互換性があることを確認してください。

アップデートの削除と取り消し

アプリがすでに特定のチャンネルのアップデートをダウンロードしている場合、Capgoのダッシュボードからそのアップデートを削除しても、すでに保持しているデバイスからは削除されません。削除によって停止するのは、 今後の ダウンロードのみです。

不具合のあるアップデートを取り消す最も確実な方法は、同じチャンネルに正常であることが確認できているアップデートを公開することです。これにより、チャンネルの履歴の最上位に新しいアップデートが作成され、クライアントはそれを最新バージョンとして認識し、適用します。

Capgoには、クライアントに対して以前の安定したアップデートを再適用させるか、あるいはビルドに組み込まれたアップデートにフォールバックさせるよう指示できるロールバックメカニズムも備わっています。

データ移行の考慮事項

チャンネルを切り替えると、アプリが実行する JavaScript bundle が変わります。アプリがチャンネル間で互換性のないマイグレーションやデータ構造に依存している場合、切り替えを繰り返すと問題が発生する可能性があります。

例えば、ベータ版のアップデートでデータベースのマイグレーションを実行した場合、本番バージョンでは新しいスキーマを理解できない可能性があります。開発者は、アップデート同士を安全に切り替えられるようにするか、必要に応じて一方向の切り替えに制限する必要があります。

チャネル切り替えがモバイルイテレーションを改善する理由

Channel surfing は、本番環境で変更をすばやく確認したいときに特に便利です。

迅速なバリデーション

広く展開する前に検証が必要な緊急のバグ修正を想定してください。Channel surfing を使えば、変更を指定した少数のユーザーだけに限定し、本番に反映される前にレビューしてもらえます。

ステークホルダーレビュー

プロダクトオーナーやQAは、インストール済みの本番用ビルドを別のアップデートチャンネルに切り替えて修正や機能を確認し、完了後に元のチャンネルに戻せます。

テストの効率化

これにより、ワークフローをスムーズに保ちながら、非エンジニアのステークホルダーをレビューや意思決定に巻き込みやすくなります。1つの本番用ビルドが、テスト、フィードバック、検証のための柔軟なツールになります。

ユースケース

  • QAテスト: QAチームがフィーチャーブランチを切り替えられるようにする
  • ベータプログラム: ユーザーがベータ版チャンネルを選択して早期アクセスを利用
  • ステークホルダーレビュー: リリース前にプロダクトオーナーが変更内容をプレビュー
  • A/Bテスト: 実験のためにユーザーを異なるチャンネルに割り当て
  • デバッグ: 特定のユーザーをデバッグ用チャンネルに切り替えて問題を診断

比較:チャネル変更の手法

メソッド 反映時間 永続化先 ユースケース
setChannel() プラグインから 即時 デバイスのみ(ローカル) アプリ内でのユーザーによるチャンネル切り替え
ダッシュボードでのデバイス上書き 最大2分 バックエンドデータベース 管理者による特定デバイスへの変更
API チャンネルの割り当て 最大2分 バックエンドデータベース バックエンド連携の自動化

チャンネル切り替えUIを構築する際、最高のユーザー体験を提供するには、常にプラグインの setChannel() 方式を使用してください。

ベストプラクティス

  1. アクセス制限: チャンネル切り替えは通常、内部利用向けです。全ユーザーに公開しないでください
  2. エラーハンドリング: チャンネル切り替え時は、常に適切にエラーを処理してください
  3. 互換性の検証: 各チャンネルのアップデートが、インストール済みの Native Build バージョンと互換性があるか確認してください
  4. チャンネルのドキュメント化: 各チャンネルの用途を明確にドキュメント化しておくこと
  5. 使用状況のモニタリング: デバッグ用に、どのデバイスがどのチャンネルに接続しているかを追跡する

リソース

まとめ

チャンネルの切り替え(Channel surfing)は、Capacitor アプリのイテレーション方法を劇的に変えます。プロダクションビルドを固定されたエンドポイントとして扱うのではなく、テスト、検証、迅速な改善のための柔軟なツールとして活用できるようになります。

最新のプラグインバージョンで導入された即時チャンネル切り替えにより、体験はシームレスになりました。ユーザーはチャンネルを切り替えた後、待機時間なしで新しいチャンネルからのアップデートを即座に受け取ることができます。

ステークホルダーとのバグ修正の検証、ベータプログラムの運用、あるいは特定のユーザーとの問題のデバッグなど、チャンネルの切り替えを活用することで、適切なタイミングで、適切なユーザーに、適切なアップデートを配信する柔軟性が得られます。

チャネル切り替えの続きは Capgo: ランタイムでアップデートチャネルを切り替える方法

使用している場合 Capgo のチャンネル切り替え術:実行時にアップデートチャンネルを切り替える方法 チャンネルルーティングと段階的ロールアウトを計画するには、次と組み合わせてください: チャンネル Channelsの実装の詳細については、 チャンネル Channelsの実装の詳細については、 チャンネル Channelsの実装の詳細については、 ベータテストソリューション ベータテストソリューションのプロダクトワークフロー向け、および バージョンターゲティングソリューション バージョンターゲティングソリューションのプロダクトワークフロー向け。

Capacitor アプリ向けの Live Updates

Web レイヤーのバグが本番で発生したら、App Store の審査を何日も待たずに Capgo で修正を配信しましょう。ネイティブの変更は通常の審査フローに残したまま、ユーザーはバックグラウンドでアップデートを受け取れます。

最新のブログ記事

Capgoは、真にプロフェッショナルなモバイルアプリを作るために必要な最高のインサイトを提供します。