abtesting-web

目的

このスキル「abtesting-web」は、LaunchDarkly や Unleash などのツールでフィーチャーフラグを管理し、Cookie ベースのユーザーセグメンテーションを実装し、Cloudflare Workers またはヘッダーベースのルールでトラフィックをルーティングすることで、Web アプリケーションの A/B テストを実現します。ダウンタイムを発生させずに、Web 機能を最適化するための管理された実験を可能にします。

使用する場面

新しい UI 要素のテスト、Cookie によるコンテンツのパーソナライズ、実験のためのトラフィック分割など、Web アプリで動的にフィーチャーを段階的にロールアウトする際にこのスキルを使用します。LaunchDarkly によるエンタープライズ向け機能や、Unleash によるコスト効率の高い構成などのツールを使ったスケーラブルな A/B テストが必要な場合、特に Cloudflare 環境で適用してください。

主な機能

• フィーチャーフラグ：LaunchDarkly を統合して API 経由でフラグを切り替えます。たとえば、Unleash の /api/features エンドポイントでフラグの状態を確認できます。
• Cookie セグメンテーション：Cloudflare Workers で Cookie を解析し、ユーザーをセグメント化します。たとえば、document.cookie.includes('variant=A') のように、特定の Cookie 値を確認します。
• Cloudflare Workers による A/B テスト：ルールに基づいてリクエストをルーティングします。たとえば、条件分岐を使って fetch(event.request) でトラフィックを 50% ずつに分割します。
• ヘッダールーティング：コード内でリクエストヘッダーを評価します。たとえば、event.request.headers.get('X-Experiment') === 'group1' の場合、適切な宛先にルーティングします。
• 固有の設定：フラグ定義には JSON 形式を使用します。例：{"name": "new-feature", "enabled": true, "variants": ["A", "B"]}。

使用パターン

A/B テストを設定するには、まず API キーを指定してスキルを初期化します。例：openclaw abtesting-web init --provider launchdarkly --key $LAUNCHDARKLY_API_KEY を実行します。継続的に使用する場合は、Web アプリのコードでフラグを照会します。SDK をインポートし、ldClient.variation('feature-key', false) のように状態を確認します。セグメンテーションのパターンとして、Cloudflare Workers にイベントハンドラーを追加し、リクエストをプロキシする前に Cookie またはヘッダーを評価します。必ず最初にモックサーバーでローカルテストを行ってから、openclaw abtesting-web deploy --env production でデプロイしてください。

主なコマンド／API

• CLI コマンド：openclaw abtesting-web init --cluster abtesting --tags web,feature-flags で初期化します。openclaw abtesting-web create-flag --name new-ui --provider unleash --variants A,B でフラグを作成します。openclaw abtesting-web list --key $CLOUDFLARE_API_TOKEN でフラグの一覧を表示します。
• API エンドポイント：LaunchDarkly では、JSON ボディ（例：{"name": "test-flag", "variations": ["control", "variant"]}）を指定して、https://app.launchdarkly.com/api/v2/flags/{projectKey}/{featureFlagKey} に POST します。Unleash では、認証ヘッダー Authorization: $UNLEASH_API_KEY を付けて https://your-unleash-instance/api/features に GET します。
• コードスニペット：
  • A/B ルーティング用の Cloudflare Worker：

    addEventListener('fetch', event => {
      const variant = Math.random() < 0.5 ? 'A' : 'B';
      event.respondWith(fetch(event.request, { headers: { 'X-Variant': variant } }));
    });
    

  • Node.js での LaunchDarkly フラグの確認：

    const ldClient = require('launchdarkly-node-server-sdk');
    ldClient variation('feature-key', false, (err, variation) => console.log(variation));
    

統合に関する注意事項

キーの環境変数を設定して統合します。例：LAUNCHDARKLY_API_KEY と CLOUDFLARE_API_TOKEN をエクスポートします。Web アプリでは、このスキルをミドルウェアとして追加します。Express.js では、app.use(abtestingMiddleware({ provider: 'launchdarkly' })) を使用します。設定形式：abtesting-config.yaml などの YAML ファイルを使用し、次の内容を記述します。

provider: launchdarkly
flags:
  - name: homepage-test
    variants: [A, B]
    percentage: 50

ほかのサービスと組み合わせる場合は、API 呼び出しで CORS が有効になっていることを確認し、フラグ更新用の Webhook を処理します。Cloudflare では、ダッシュボードまたは CLI を使って Worker をドメインに紐付けます：wrangler publish --env production。

エラー処理

よくあるエラーには、無効な API キー（HTTP 401）があります。echo $LAUNCHDARKLY_API_KEY を確認して再試行することで解決できます。フラグが見つからない場合は、コードで try-catch を使って捕捉します。例：

try {
  const flag = await ldClient.getFeatureFlag('nonexistent');
} catch (error) {
  console.error('Flag error:', error.message); // Output: "Feature flag not found"
  fallbackToDefault();
}

ネットワークの問題には、再試行を追加して対処します。Cloudflare Workers では、event.waitUntil(fetchWithRetry(event.request)) を使用します。セグメンテーションエラーが発生した場合は、Cookie を早い段階で検証します。たとえば、解析に失敗した場合は、デフォルトでコントロールグループを割り当てます。CLI のデバッグモードを使用します：API レスポンスをログに記録するには、openclaw abtesting-web run --debug を実行します。

具体的な使用例

1. 例 1：ウェブ機能の A/B テストを開始する：サイトに新しいボタンを追加してテストするには、まず openclaw abtesting-web init --provider launchdarkly --key $LAUNCHDARKLY_API_KEY を実行します。次に、フラグを作成します：openclaw abtesting-web create-flag --name button-test --variants control,experimental。フロントエンドのコードでフラグを確認します：if (ldClient.variation('button-test') === 'experimental') { renderNewButton(); }。最後に、Cloudflare のログでトラフィックの分割状況を監視します。
2. 例 2：Cloudflare で Cookie ベースのセグメンテーションを行う：Worker を追加してセグメンテーションを設定します：openclaw abtesting-web deploy-worker --script path/to/worker.js。worker.js ファイルに以下を記述します：

   addEventListener('fetch', event => {
     const cookieValue = event.request.headers.get('cookie')?.includes('segment=premium') ? 'premium' : 'standard';
     event.respondWith(fetch(event.request, { headers: { 'X-Segment': cookieValue } }));
   });
   

   これを使用して、プレミアムユーザーをバリアント A に振り分けます。

グラフの関係

• クラスターとの関連：abtesting（例：ほかの abtesting スキルとリソースを共有します）。
• タグとの関連：web（ウェブに特化したスキルへのリンク）、feature-flags（フラグ管理ツールとの接続）、launchdarkly（LaunchDarkly 固有のスキルとの連携）、cloudflare（Cloudflare インフラストラクチャスキルとの関連）。