Rork 製アプリに開発者デバッグメニューを実装する — 広告・課金・Remote Config の検証をリリース前に終わらせる設計

// app.config.ts — variant の宣言を 1 箇所に寄せる
// EAS Build の profile 側から APP_VARIANT を渡す（例: internal / production）
import { ExpoConfig } from "expo/config";
 
const variant = process.env.APP_VARIANT ?? "development";
 
const config: ExpoConfig = {
  name: variant === "production" ? "Beautiful Walls" : `Walls (${variant})`,
  slug: "beautiful-walls",
  extra: {
    appVariant: variant, // expo-constants 経由で実行時に参照する
  },
  // ...残りの設定は省略
};
 
export default config;

// src/debug/isDebugMenuAvailable.ts — 判定の唯一の入口
import Constants from "expo-constants";
 
const variant: string =
  Constants.expoConfig?.extra?.appVariant ?? "development";
 
// development と internal のみ true。production では常に false
export const isDebugMenuAvailable = (): boolean =>
  variant === "development" || variant === "internal";

// src/debug/DebugGate.tsx — 設定画面のバージョン表記に仕込む入口
import { useRef, useCallback } from "react";
import { Pressable, Text } from "react-native";
import { router } from "expo-router";
import { isDebugMenuAvailable } from "./isDebugMenuAvailable";
 
const REQUIRED_TAPS = 7;
const WINDOW_MS = 3000; // 3 秒以内に 7 回で発動
 
export function DebugGate({ version }: { version: string }) {
  const taps = useRef<number[]>([]);
 
  const onTap = useCallback(() => {
    if (!isDebugMenuAvailable()) return; // production では何も起きない
    const now = Date.now();
    taps.current = [...taps.current.filter((t) => now - t < WINDOW_MS), now];
    if (taps.current.length >= REQUIRED_TAPS) {
      taps.current = [];
      router.push("/debug"); // expo-router のデバッグ画面へ
    }
  }, []);
 
  return (
    <Pressable onPress={onTap} accessibilityLabel="app version">
      <Text>v{version}</Text>
    </Pressable>
  );
}

// src/debug/debugOverrides.ts — AsyncStorage 永続の上書きストア
import AsyncStorage from "@react-native-async-storage/async-storage";
 
export type DebugOverrides = {
  apiEnv?: "dev" | "staging" | "production";
  forceTestAds?: boolean;
  entitlement?: "none" | "adFree" | "premium";
  remoteConfig?: Record<string, string | number | boolean>;
  expiresAt?: number; // 消し忘れ対策の自動失効
};
 
const KEY = "debug.overrides.v1";
const TTL_MS = 24 * 60 * 60 * 1000; // 24 時間で自動失効
 
let cache: DebugOverrides = {};
 
export async function loadOverrides(): Promise<DebugOverrides> {
  const raw = await AsyncStorage.getItem(KEY);
  if (!raw) return (cache = {});
  const parsed: DebugOverrides = JSON.parse(raw);
  // 期限切れなら破棄する — 「昨日の自分の上書き」に今日ハマらないため
  if (parsed.expiresAt && Date.now() > parsed.expiresAt) {
    await AsyncStorage.removeItem(KEY);
    return (cache = {});
  }
  return (cache = parsed);
}
 
export function getOverrides(): DebugOverrides {
  return cache; // 同期読み出し用（起動時に loadOverrides 済みである前提）
}
 
export async function setOverride<K extends keyof DebugOverrides>(
  key: K,
  value: DebugOverrides[K]
): Promise<void> {
  cache = { ...cache, [key]: value, expiresAt: Date.now() + TTL_MS };
  await AsyncStorage.setItem(KEY, JSON.stringify(cache));
}
 
export async function clearOverrides(): Promise<void> {
  cache = {};
  await AsyncStorage.removeItem(KEY);
}
 
export const hasActiveOverrides = (): boolean =>
  Object.keys(cache).some((k) => k !== "expiresAt");

// app/_layout.tsx の末尾に重ねる上書きバッジ（internal ビルドのみ）
{isDebugMenuAvailable() && hasActiveOverrides() && (
  <View pointerEvents="none" style={styles.debugBadge}>
    <Text style={styles.debugBadgeText}>OVERRIDE</Text>
  </View>
)}

// src/ads/adUnitIds.ts — 上書きを考慮した広告ユニット解決
import { TestIds } from "react-native-google-mobile-ads";
import { getOverrides } from "../debug/debugOverrides";
import { isDebugMenuAvailable } from "../debug/isDebugMenuAvailable";
 
const PRODUCTION_UNITS = {
  banner: "ca-app-pub-XXXXXXXXXXXXXXXX/NNNNNNNNNN", // 実 ID は設定から注入する
  interstitial: "ca-app-pub-XXXXXXXXXXXXXXXX/NNNNNNNNNN",
  rewarded: "ca-app-pub-XXXXXXXXXXXXXXXX/NNNNNNNNNN",
} as const;
 
type AdKind = keyof typeof PRODUCTION_UNITS;
 
export function resolveAdUnitId(kind: AdKind): string {
  // internal ビルドで forceTestAds が有効なら Google 公式のテスト ID を返す
  if (isDebugMenuAvailable() && getOverrides().forceTestAds) {
    const testIds: Record<AdKind, string> = {
      banner: TestIds.ADAPTIVE_BANNER,
      interstitial: TestIds.INTERSTITIAL,
      rewarded: TestIds.REWARDED,
    };
    return testIds[kind];
  }
  return PRODUCTION_UNITS[kind];
}

// src/entitlements/useEntitlements.ts — 実値と上書きの合成点を 1 つにする
import { getOverrides } from "../debug/debugOverrides";
import { isDebugMenuAvailable } from "../debug/isDebugMenuAvailable";
import { usePurchaseState } from "./usePurchaseState"; // 実課金の状態
import { useRewardAdFree } from "./useRewardAdFree"; // リワード視聴による一時解除
 
export type Entitlements = {
  adFree: boolean;
  premium: boolean;
  source: "purchase" | "reward" | "debug" | "none";
};
 
export function useEntitlements(): Entitlements {
  const purchase = usePurchaseState();
  const rewardAdFree = useRewardAdFree();
 
  // デバッグ上書きが最優先。ただし internal ビルド以外では評価すらしない
  if (isDebugMenuAvailable()) {
    const o = getOverrides().entitlement;
    if (o === "adFree") return { adFree: true, premium: false, source: "debug" };
    if (o === "premium") return { adFree: true, premium: true, source: "debug" };
    if (o === "none") return { adFree: false, premium: false, source: "debug" };
  }
 
  // 実値の合成 — 広告非表示は「購入 or リワード」のどちらでも成立する
  const adFree = purchase.adFree || rewardAdFree.active;
  return {
    adFree,
    premium: purchase.premium,
    source:
      purchase.adFree || purchase.premium
        ? "purchase"
        : rewardAdFree.active
          ? "reward"
          : "none",
  };
}

// src/config/remoteValue.ts — Remote Config 読み出しの唯一の窓口
import remoteConfig from "@react-native-firebase/remote-config";
import { getOverrides } from "../debug/debugOverrides";
import { isDebugMenuAvailable } from "../debug/isDebugMenuAvailable";
 
export function getRemoteValue<T extends string | number | boolean>(
  key: string,
  fallback: T
): T {
  // 上書きがあれば最優先で返す（internal ビルドのみ）
  if (isDebugMenuAvailable()) {
    const o = getOverrides().remoteConfig?.[key];
    if (o !== undefined) return o as T;
  }
  const v = remoteConfig().getValue(key);
  if (typeof fallback === "boolean") return v.asBoolean() as T;
  if (typeof fallback === "number") return v.asNumber() as T;
  return (v.asString() || fallback) as T;
}

// app/debug.tsx — production では中身を読み込まないルート
import { Redirect } from "expo-router";
import { isDebugMenuAvailable } from "../src/debug/isDebugMenuAvailable";
 
export default function DebugRoute() {
  if (!isDebugMenuAvailable()) {
    return <Redirect href="/" />; // 直リンクで叩かれてもホームへ戻す
  }
  // 遅延 require — production バンドルでは到達不能になる
  const DebugMenu = require("../src/debug/DebugMenu").default;
  return <DebugMenu />;
}