Rork で『自社ブランドの動画配信アプリ』を一人で立ち上げる実装 — HLS配信・サブスク課金・オフライン視聴・解約後の視聴停止まで

-- videos テーブル
CREATE TABLE videos (
  id TEXT PRIMARY KEY,            -- Cloudflare Stream の uid
  title TEXT NOT NULL,
  description TEXT,
  required_plan TEXT NOT NULL,    -- 'free' | 'pro' | 'premium'
  duration_sec INTEGER,
  thumbnail_url TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

// app/components/StreamPlayer.tsx
import { useEvent } from "expo";
import { useVideoPlayer, VideoView } from "expo-video";
import { useEffect, useState } from "react";
import { View, StyleSheet, ActivityIndicator } from "react-native";
 
type Props = {
  videoId: string;
  getSignedUrl: (videoId: string) => Promise<string>;
};
 
export function StreamPlayer({ videoId, getSignedUrl }: Props) {
  const [sourceUrl, setSourceUrl] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  // 視聴権限チェック → 署名付きHLS URL取得
  useEffect(() => {
    let canceled = false;
    (async () => {
      try {
        const url = await getSignedUrl(videoId);
        if (!canceled) setSourceUrl(url);
      } catch (e: any) {
        // 権限エラーはユーザーに原因を明示する(プラン不足 / 未ログイン)
        if (!canceled) setError(e.message ?? "動画を読み込めませんでした");
      }
    })();
    return () => { canceled = true; };
  }, [videoId, getSignedUrl]);
 
  const player = useVideoPlayer(sourceUrl ?? "", (p) => {
    p.loop = false;
    p.allowsExternalPlayback = true; // AirPlay 許可
    p.timeUpdateEventInterval = 1.0; // 再生位置を1秒ごとに購読
  });
 
  // バックグラウンドで音だけ鳴らしたい場合は staysActiveInBackground を有効化
  // ただしApp Store審査でバックグラウンド音声モードの理由説明が必要になるため
  // 「音声教材アプリ」など正当な用途がある場合のみ有効にすること
  // player.staysActiveInBackground = true;
 
  useEvent(player, "statusChange", { status: player.status });
 
  if (error) {
    return <View style={styles.centered}><ErrorNotice message={error} /></View>;
  }
  if (!sourceUrl) {
    return <View style={styles.centered}><ActivityIndicator size="large" /></View>;
  }
 
  return (
    <VideoView
      style={styles.video}
      player={player}
      allowsFullscreen
      allowsPictureInPicture
      contentFit="contain"
      nativeControls
    />
  );
}
 
const styles = StyleSheet.create({
  video: { width: "100%", aspectRatio: 16 / 9, backgroundColor: "#000" },
  centered: { width: "100%", aspectRatio: 16 / 9, alignItems: "center", justifyContent: "center", backgroundColor: "#111" },
});

// workers/api/video-token/route.ts (Cloudflare Workers + Hono 例)
import { Hono } from "hono";
import { getCookie } from "hono/cookie";
import { decode } from "./jwt"; // 自前 JWT 検証
 
type Bindings = {
  STREAM_CUSTOMER_SUBDOMAIN: string;
  STREAM_KEY_ID: string;
  STREAM_SIGNING_JWK: string;      // JWK for HS256
  STRIPE_SECRET: string;
  DB: D1Database;
};
 
const app = new Hono<{ Bindings: Bindings }>();
 
app.post("/video-token/:videoId", async (c) => {
  const videoId = c.req.param("videoId");
  const session = getCookie(c, "session");
  if (!session) return c.json({ error: "unauthorized" }, 401);
 
  // 1) セッションから userId を取り出す
  const user = await decode(session, c.env);
  if (!user) return c.json({ error: "invalid_session" }, 401);
 
  // 2) videos テーブルから必要プランを確認
  const video = await c.env.DB.prepare(
    "SELECT required_plan FROM videos WHERE id = ?"
  ).bind(videoId).first<{ required_plan: string }>();
  if (!video) return c.json({ error: "not_found" }, 404);
 
  // 3) Stripe のサブスク状態を確認(KVキャッシュ付き)
  const plan = await getActivePlan(user.email, c.env);
  if (!canView(plan, video.required_plan)) {
    return c.json({
      error: "upgrade_required",
      currentPlan: plan,
      requiredPlan: video.required_plan,
    }, 403);
  }
 
  // 4) 署名付き JWT を発行(10分有効)
  const token = await signStreamToken(videoId, {
    exp: Math.floor(Date.now() / 1000) + 600, // 10分
    kid: c.env.STREAM_KEY_ID,
    jwk: c.env.STREAM_SIGNING_JWK,
  });
 
  // Cloudflare Stream の HLS マスタープレイリスト URL
  const hlsUrl = `https://${c.env.STREAM_CUSTOMER_SUBDOMAIN}/${token}/manifest/video.m3u8`;
  return c.json({ url: hlsUrl, expiresIn: 600 });
});
 
function canView(active: string | null, required: string) {
  if (required === "free") return true;
  if (!active) return false;
  const rank: Record<string, number> = { pro: 1, premium: 2 };
  return (rank[active] ?? 0) >= (rank[required] ?? 0);
}
 
export default app;

// workers/api/stripe-webhook/route.ts
import { Hono } from "hono";
import Stripe from "stripe";
 
const app = new Hono<{ Bindings: Bindings }>();
 
app.post("/stripe/webhook", async (c) => {
  const sig = c.req.header("stripe-signature")!;
  const body = await c.req.text();
  const stripe = new Stripe(c.env.STRIPE_SECRET, { apiVersion: "2025-05-01" });
 
  let event: Stripe.Event;
  try {
    event = await stripe.webhooks.constructEventAsync(
      body, sig, c.env.STRIPE_WEBHOOK_SECRET,
      undefined, Stripe.createSubtleCryptoProvider()
    );
  } catch (e) {
    return c.json({ error: "signature_failed" }, 400);
  }
 
  switch (event.type) {
    case "checkout.session.completed":
    case "customer.subscription.updated": {
      const sub = event.data.object as Stripe.Subscription | Stripe.Checkout.Session;
      await upsertSubscription(sub, c.env);
      break;
    }
    case "customer.subscription.deleted": {
      // 解約 → KV からエントリ削除
      const sub = event.data.object as Stripe.Subscription;
      const email = await resolveEmail(sub, c.env);
      await c.env.KV.delete(`plan:${email}`);
      break;
    }
    case "invoice.payment_failed": {
      // 支払い失敗 → 3日以内に更新されなければ解約扱いにする運用
      await markPaymentFailed(event, c.env);
      break;
    }
  }
  return c.json({ received: true });
});

// app/lib/offline.ts
import * as FileSystem from "expo-file-system";
import * as Crypto from "expo-crypto";
 
export async function downloadEncryptedVideo(
  videoId: string,
  getDownloadManifest: (id: string) => Promise<{ segments: string[]; key: string }>
) {
  const { segments, key } = await getDownloadManifest(videoId);
  const dir = `${FileSystem.documentDirectory}offline/${videoId}/`;
  await FileSystem.makeDirectoryAsync(dir, { intermediates: true });
 
  // 復号キーはアプリ内のセキュアストレージ(iOS Keychain / Android Keystore)に保存
  await saveKeyToSecureStore(`key:${videoId}`, key);
 
  for (const [index, segmentUrl] of segments.entries()) {
    const path = `${dir}seg_${String(index).padStart(5, "0")}.ts`;
    await FileSystem.downloadAsync(segmentUrl, path);
  }
  return dir;
}
 
async function saveKeyToSecureStore(name: string, key: string) {
  // expo-secure-store で AES キーをデバイスのセキュア領域に保存
  // 絶対に AsyncStorage に置かないこと — ルート化端末で抜ける
}