Rork Max で作るAI動画編集アプリ実装ガイド — 字幕自動生成・ハイライト抽出・Stripe課金を一気通貫で実装する

// services/videoUpload.ts
import * as tus from 'tus-js-client';
import { supabase } from './supabaseClient';
 
const PROJECT_ID = 'YOUR_PROJECT_ID';
 
// 大きなファイルでは直接ストレージホスト名（*.storage.supabase.co）を使う
const RESUMABLE_ENDPOINT =
  `https://${PROJECT_ID}.storage.supabase.co/storage/v1/upload/resumable`;
 
export interface PickedVideo {
  uri: string;   // expo-image-picker が返す file:// URI
  name: string;
  type: string;  // 'video/mp4' など
}
 
export async function uploadVideoResumable(
  file: PickedVideo,
  bucketName: string,
  objectName: string,
  onProgress: (percent: number) => void
): Promise<string> {
  const { data: { session } } = await supabase.auth.getSession();
  if (!session) {
    throw new Error('サインインが必要です');
  }
 
  return new Promise<string>((resolve, reject) => {
    const upload = new tus.Upload(file as unknown as tus.UploadInput, {
      endpoint: RESUMABLE_ENDPOINT,
      retryDelays: [0, 3000, 5000, 10000, 20000],
      headers: {
        authorization: `Bearer ${session.access_token}`,
        // 同じパスを上書きしてよい場合のみ
        // 'x-upsert': 'true',
      },
      uploadDataDuringCreation: true,
      removeFingerprintOnSuccess: true,
      metadata: {
        bucketName,
        objectName,
        contentType: file.type,
        cacheControl: '3600',
      },
      // 6MB 固定。サーバー側の実装がこの値を前提にしているため変更しない
      chunkSize: 6 * 1024 * 1024,
      onError: (error) => {
        reject(error instanceof Error ? error : new Error(String(error)));
      },
      onProgress: (uploaded, total) => {
        onProgress(Math.round((uploaded / total) * 100));
      },
      onSuccess: () => resolve(objectName),
    });
 
    // 前回の中断が残っていれば、そこから再開する
    upload.findPreviousUploads().then((previous) => {
      if (previous.length > 0) {
        upload.resumeFromPreviousUpload(previous[0]);
      }
      upload.start();
    });
  });
}

// components/VideoUploader.tsx
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, ActivityIndicator, StyleSheet } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { uploadVideoResumable } from '../services/videoUpload';
import { triggerVideoProcessing } from '../services/videoProcessing';
import { planHighlightRoute } from '../utils/videoValidation';
 
interface VideoUploaderProps {
  onJobStarted: (jobId: string) => void;
}
 
export function VideoUploader({ onJobStarted }: VideoUploaderProps) {
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);
  const [statusMessage, setStatusMessage] = useState('');
  const [error, setError] = useState<string | null>(null);
 
  const pickAndUpload = async () => {
    setError(null);
 
    const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!permissionResult.granted) {
      setError('動画へのアクセス許可が必要です。設定から許可してください。');
      return;
    }
 
    const pickerResult = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['videos'],
      quality: 1,
      videoMaxDuration: 300, // 最大5分
    });
 
    if (pickerResult.canceled || !pickerResult.assets?.[0]) return;
 
    const asset = pickerResult.assets[0];
    if (!asset.uri || !asset.fileName) {
      setError('動画ファイルの読み込みに失敗しました。別の動画をお試しください。');
      return;
    }
 
    // 100MB の境界でハイライト検出の経路が変わる（後述の planHighlightRoute）
    const { error: validationError, route } = planHighlightRoute(asset);
    if (validationError || !route) {
      setError(validationError ?? 'この動画は処理できません。');
      return;
    }
 
    setUploading(true);
    setStatusMessage('動画をアップロード中...');
 
    const objectName = `videos/${Date.now()}_${asset.fileName.replace(/[^a-zA-Z0-9._-]/g, '_')}`;
 
    let path: string;
    try {
      path = await uploadVideoResumable(
        { uri: asset.uri, name: asset.fileName, type: asset.mimeType ?? 'video/mp4' },
        'video-uploads',
        objectName,
        (p) => {
          setProgress(p);
          setStatusMessage(`アップロード中... ${p}%`);
        }
      );
    } catch (err) {
      const message = err instanceof Error ? err.message : '不明なエラー';
      setError(`アップロードに失敗しました: ${message}`);
      setUploading(false);
      return;
    }
 
    setStatusMessage('AI処理を開始中...');
 
    const { jobId, error: processingError } = await triggerVideoProcessing(path, {
      // Gemini へ URL を渡すか Files API へ上げるかを Edge Function に伝える
      highlightRoute: route,
    });
    if (processingError) {
      setError('AI処理の開始に失敗しました。時間をおいて再試行してください。');
      setUploading(false);
      return;
    }
 
    onJobStarted(jobId);
    setStatusMessage(`AI処理中... 完了時に通知します`);
    setUploading(false);
    setProgress(0);
  };
 
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={pickAndUpload}
        disabled={uploading}
        style={[styles.button, uploading && styles.buttonDisabled]}
        accessibilityRole="button"
        accessibilityLabel="動画を選んでAI編集を開始"
      >
        {uploading ? (
          <ActivityIndicator color="#fff" />
        ) : (
          <Text style={styles.buttonText}>動画を選んでAI編集を開始</Text>
        )}
      </TouchableOpacity>
 
      {statusMessage ? (
        <Text style={styles.statusText}>{statusMessage}</Text>
      ) : null}
 
      {progress > 0 && uploading ? (
        <View style={styles.progressBar}>
          <View style={[styles.progressFill, { width: `${progress}%` }]} />
        </View>
      ) : null}
 
      {error ? (
        <Text style={styles.errorText}>{error}</Text>
      ) : null}
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { padding: 20 },
  button: {
    backgroundColor: '#1a1a2e',
    padding: 16,
    borderRadius: 12,
    alignItems: 'center',
  },
  buttonDisabled: { backgroundColor: '#999' },
  buttonText: { color: '#fff', fontWeight: '700', fontSize: 16 },
  statusText: { marginTop: 12, color: '#555', textAlign: 'center' },
  progressBar: {
    marginTop: 8,
    height: 6,
    backgroundColor: '#eee',
    borderRadius: 3,
    overflow: 'hidden',
  },
  progressFill: { height: '100%', backgroundColor: '#3498db' },
  errorText: { marginTop: 12, color: '#e74c3c', textAlign: 'center' },
});

// supabase/functions/process-video/index.ts
import { serve } from 'https://deno.land/std@0.177.0/http/server.ts';
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
 
const OPENAI_API_KEY = Deno.env.get('OPENAI_API_KEY') ?? '';
const GEMINI_API_KEY = Deno.env.get('GEMINI_API_KEY') ?? '';
const SUPABASE_URL = Deno.env.get('SUPABASE_URL') ?? '';
const SUPABASE_SERVICE_ROLE_KEY = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? '';
 
interface Highlight {
  start: number;
  end: number;
  reason: string;
}
 
interface ProcessingJob {
  jobId: string;
  storagePath: string;
  userId: string;
  options: {
    generateSubtitles: boolean;
    detectHighlights: boolean;
    language: string;
  };
}
 
serve(async (req: Request) => {
  if (req.method !== 'POST') {
    return new Response('Method Not Allowed', { status: 405 });
  }
 
  let job: ProcessingJob;
  try {
    job = await req.json() as ProcessingJob;
  } catch {
    return new Response(JSON.stringify({ error: 'Invalid request body' }), {
      status: 400,
      headers: { 'Content-Type': 'application/json' },
    });
  }
 
  const supabase = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY);
 
  await supabase.from('processing_jobs').update({
    status: 'processing',
    started_at: new Date().toISOString(),
  }).eq('id', job.jobId);
 
  try {
    const { data: signedUrlData, error: urlError } = await supabase.storage
      .from('video-uploads')
      .createSignedUrl(job.storagePath, 7200); // 2時間有効（長い動画の処理に対応）
 
    if (urlError || !signedUrlData) {
      throw new Error(`ストレージURLの取得に失敗: ${urlError?.message}`);
    }
 
    // ①: Whisper APIによる字幕生成（音声のみ取り出してサイズ削減）
    let transcriptionVtt: string | null = null;
    if (job.options.generateSubtitles) {
      // 動画から音声を取り出す処理は別Workerに委任するか
      // 小さい動画の場合は直接Whisperに送る
      const videoResponse = await fetch(signedUrlData.signedUrl);
      if (!videoResponse.ok) {
        throw new Error(`動画ファイルの取得に失敗: ${videoResponse.status}`);
      }
      const videoBlob = await videoResponse.blob();
 
      // Whisper APIのファイルサイズ上限は25MB
      if (videoBlob.size > 25 * 1024 * 1024) {
        console.warn(`ファイルサイズが上限超過: ${videoBlob.size} bytes — 字幕生成をスキップ`);
      } else {
        const formData = new FormData();
        formData.append('file', videoBlob, 'audio.mp4');
        formData.append('model', 'whisper-1');
        formData.append('language', job.options.language || 'ja');
        formData.append('response_format', 'vtt'); // タイムスタンプ付きVTT形式
 
        const whisperResponse = await fetch('https://api.openai.com/v1/audio/transcriptions', {
          method: 'POST',
          headers: { 'Authorization': `Bearer ${OPENAI_API_KEY}` },
          body: formData,
        });
 
        if (!whisperResponse.ok) {
          const errText = await whisperResponse.text();
          throw new Error(`Whisper API エラー (${whisperResponse.status}): ${errText}`);
        }
 
        transcriptionVtt = await whisperResponse.text();
      }
    }
 
    // ②: Gemini Flashによるハイライトシーン検出
    let highlights: Highlight[] = [];
    if (job.options.detectHighlights) {
      const geminiBody = {
        contents: [{
          parts: [
            {
              file_data: {
                mime_type: 'video/mp4',
                file_uri: signedUrlData.signedUrl,
              },
            },
            {
              text: `この動画を分析し、最も重要・印象的なハイライトシーンを最大5つ選んでください。
選定基準: 感情的なピーク、重要な発言、アクションシーン、笑い・驚きの瞬間
動画全体の20〜40%がハイライトに含まれるよう調整してください。
以下のJSON形式のみで回答してください（他のテキストは不要）:
{"highlights":[{"start_sec":数値,"end_sec":数値,"reason":"日本語で理由"}]}`,
            },
          ],
        }],
        generationConfig: {
          responseMimeType: 'application/json',
          maxOutputTokens: 1024,
          temperature: 0.3,
        },
      };
 
      const geminiResponse = await fetch(
        `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${GEMINI_API_KEY}`,
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(geminiBody),
        }
      );
 
      if (geminiResponse.ok) {
        const geminiData = await geminiResponse.json();
        const jsonText = geminiData?.candidates?.[0]?.content?.parts?.[0]?.text ?? '{}';
        try {
          const parsed = JSON.parse(jsonText);
          highlights = (parsed.highlights ?? []).map((h: { start_sec: number; end_sec: number; reason: string }) => ({
            start: h.start_sec,
            end: h.end_sec,
            reason: h.reason,
          }));
        } catch {
          console.warn('Geminiレスポンスのパースに失敗 — ハイライトなしで続行');
        }
      } else {
        console.warn(`Gemini APIエラー: ${geminiResponse.status} — ハイライトなしで続行`);
      }
    }
 
    // 結果をDBに保存（Realtimeが変更を検知してアプリに通知）
    await supabase.from('processing_jobs').update({
      status: 'completed',
      completed_at: new Date().toISOString(),
      result: {
        transcription_vtt: transcriptionVtt,
        highlights,
        video_url: signedUrlData.signedUrl,
      },
    }).eq('id', job.jobId);
 
    return new Response(JSON.stringify({
      success: true,
      jobId: job.jobId,
      hasTranscription: !!transcriptionVtt,
      highlightCount: highlights.length,
    }), { headers: { 'Content-Type': 'application/json' } });
 
  } catch (err) {
    const errorMessage = err instanceof Error ? err.message : '不明なエラー';
    console.error('Edge Function エラー:', errorMessage);
 
    await supabase.from('processing_jobs').update({
      status: 'failed',
      error_message: errorMessage,
      completed_at: new Date().toISOString(),
    }).eq('id', job.jobId);
 
    return new Response(JSON.stringify({ error: errorMessage }), {
      status: 500,
      headers: { 'Content-Type': 'application/json' },
    });
  }
});

// hooks/useProcessingStatus.ts
import { useEffect, useState, useCallback } from 'react';
import { supabase } from '../services/supabaseClient';
 
export type JobStatus = 'pending' | 'processing' | 'completed' | 'failed';
 
interface Highlight {
  start: number;
  end: number;
  reason: string;
}
 
interface ProcessingResult {
  transcription_vtt: string | null;
  highlights: Highlight[];
  video_url: string;
}
 
export function useProcessingStatus(jobId: string | null) {
  const [status, setStatus] = useState<JobStatus>('pending');
  const [result, setResult] = useState<ProcessingResult | null>(null);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
  const fetchCurrentStatus = useCallback(async () => {
    if (!jobId) return;
    const { data } = await supabase
      .from('processing_jobs')
      .select('status, result, error_message')
      .eq('id', jobId)
      .single();
 
    if (data) {
      setStatus(data.status as JobStatus);
      setResult(data.result as ProcessingResult | null);
      setErrorMessage(data.error_message as string | null);
    }
  }, [jobId]);
 
  useEffect(() => {
    if (!jobId) return;
 
    // 初回状態取得
    fetchCurrentStatus();
 
    // Realtimeサブスクリプション
    const channel = supabase
      .channel(`processing-job-${jobId}`)
      .on(
        'postgres_changes',
        {
          event: 'UPDATE',
          schema: 'public',
          table: 'processing_jobs',
          filter: `id=eq.${jobId}`,
        },
        (payload) => {
          const updated = payload.new as {
            status: JobStatus;
            result: ProcessingResult | null;
            error_message: string | null;
          };
          setStatus(updated.status);
          setResult(updated.result);
          setErrorMessage(updated.error_message);
        }
      )
      .subscribe((subStatus) => {
        if (subStatus === 'SUBSCRIPTION_ERROR') {
          // Realtimeが切れた場合はポーリングにフォールバック
          console.warn('Realtimeサブスクリプションに失敗 — ポーリングに切り替え');
        }
      });
 
    // フォールバック: 30秒おきにポーリング（Realtime切断対策）
    const pollInterval = setInterval(fetchCurrentStatus, 30000);
 
    return () => {
      supabase.removeChannel(channel);
      clearInterval(pollInterval);
    };
  }, [jobId, fetchCurrentStatus]);
 
  return { status, result, errorMessage };
}

// constants/creditCosts.ts
export const CREDIT_COSTS = {
  SUBTITLE_GENERATION_PER_MIN: 2,   // 字幕生成: 1分あたり2クレジット
  HIGHLIGHT_DETECTION: 5,            // ハイライト検出: 5クレジット固定
  EXPORT_HD: 3,                      // HD書き出し: 3クレジット
  EXPORT_4K: 8,                      // 4K書き出し: 8クレジット
} as const;
 
export const CREDIT_PACKAGES = [
  { credits: 30, priceJpy: 300, priceId: 'price_XXXXXXXXXX_30' },
  { credits: 100, priceJpy: 800, priceId: 'price_XXXXXXXXXX_100' },
  { credits: 300, priceJpy: 2000, priceId: 'price_XXXXXXXXXX_300' },
] as const;

-- supabase/migrations/001_credit_deduct_function.sql
CREATE OR REPLACE FUNCTION deduct_credits(
  p_user_id UUID,
  p_amount INTEGER,
  p_description TEXT
)
RETURNS BOOLEAN
LANGUAGE plpgsql
SECURITY DEFINER
AS $$
DECLARE
  v_current_credits INTEGER;
BEGIN
  -- 行ロックで競合を防ぐ
  SELECT credits INTO v_current_credits
  FROM user_credits
  WHERE user_id = p_user_id
  FOR UPDATE;
 
  IF v_current_credits IS NULL OR v_current_credits < p_amount THEN
    RETURN FALSE; -- クレジット不足
  END IF;
 
  UPDATE user_credits
  SET credits = credits - p_amount,
      updated_at = NOW()
  WHERE user_id = p_user_id;
 
  -- 使用履歴を記録
  INSERT INTO credit_transactions (user_id, amount, description, created_at)
  VALUES (p_user_id, -p_amount, p_description, NOW());
 
  RETURN TRUE;
END;
$$;

// utils/videoValidation.ts
const MAX_DURATION_SECONDS = 30 * 60;             // 長さの上限（応答時間とコスト由来）
const EXTERNAL_URL_LIMIT = 100 * 1024 * 1024;     // 署名付き URL 経路の上限
const FILES_API_LIMIT = 2 * 1024 * 1024 * 1024;   // Files API の上限
 
export type HighlightRoute = 'signed-url' | 'files-api';
 
export interface VideoPlan {
  error: string | null;
  route: HighlightRoute | null;
}
 
export function planHighlightRoute(asset: ImagePicker.ImagePickerAsset): VideoPlan {
  // asset.duration はミリ秒
  if (asset.duration && asset.duration > MAX_DURATION_SECONDS * 1000) {
    return {
      error: `動画が長すぎます（最大 ${MAX_DURATION_SECONDS / 60} 分）。トリミングしてからお試しください。`,
      route: null,
    };
  }
 
  const size = asset.fileSize ?? 0;
 
  if (size > FILES_API_LIMIT) {
    return { error: 'ファイルサイズが大きすぎます（最大 2GB）。', route: null };
  }
 
  // 100MB を境に、URL を渡すか Files API へ上げるかを分ける
  return { error: null, route: size > EXTERNAL_URL_LIMIT ? 'files-api' : 'signed-url' };
}

// utils/vttParser.ts
export interface Cue {
  startTime: number; // 秒
  endTime: number;
  text: string;
}
 
export function parseVTT(vttString: string): Cue[] {
  const cues: Cue[] = [];
  const blocks = vttString.split('\n\n').filter(Boolean);
 
  for (const block of blocks) {
    const lines = block.trim().split('\n');
    // タイムコード行を探す（例: 00:00:12.500 --> 00:00:15.000）
    const timecodeIndex = lines.findIndex(l => l.includes('-->'));
    if (timecodeIndex === -1) continue;
 
    const timecodeLine = lines[timecodeIndex];
    const [startStr, endStr] = timecodeLine.split('-->').map(s => s.trim());
    
    const parseTime = (t: string): number => {
      const parts = t.replace(',', '.').split(':');
      const seconds = parseFloat(parts[parts.length - 1]);
      const minutes = parseInt(parts[parts.length - 2] || '0', 10);
      const hours = parseInt(parts[parts.length - 3] || '0', 10);
      return hours * 3600 + minutes * 60 + seconds;
    };
 
    const text = lines.slice(timecodeIndex + 1).join('\n').trim();
    if (!text) continue;
 
    cues.push({
      startTime: parseTime(startStr),
      endTime: parseTime(endStr),
      text,
    });
  }
 
  return cues;
}