Rork Max で AI 面接コーチアプリを作る：音声録音・Claude 評価・進捗管理の実装ガイド

// hooks/useInterviewRecorder.ts
import { useEffect, useState } from 'react';
import {
  useAudioRecorder,
  useAudioRecorderState,
  AudioModule,
  RecordingPresets,
  setAudioModeAsync,
} from 'expo-audio';
 
const MAX_DURATION_SEC = 180; // 回答は 3 分で打ち切る
 
export function useInterviewRecorder() {
  // 録音ファイルは既定でキャッシュ領域に置かれ、端末の空きが減ると OS に消されます。
  // 評価が終わるまでは確実に残したいので、document 側を指定します。
  const recorder = useAudioRecorder({
    ...RecordingPresets.HIGH_QUALITY,
    directory: 'document',
  });
  const state = useAudioRecorderState(recorder, 250);
  const [permissionGranted, setPermissionGranted] = useState(false);
 
  useEffect(() => {
    (async () => {
      const status = await AudioModule.requestRecordingPermissionsAsync();
      setPermissionGranted(status.granted);
      // iOS は allowsRecording の既定が false なので、明示しないと録音が始まりません
      await setAudioModeAsync({ playsInSilentMode: true, allowsRecording: true });
    })();
  }, []);
 
  const start = async () => {
    if (!permissionGranted) {
      throw new Error('マイクの使用許可が必要です');
    }
    await recorder.prepareToRecordAsync();
    // record() は Promise を返しません（await しても何も待ちません）
    recorder.record({ forDuration: MAX_DURATION_SEC });
  };
 
  const stop = async (): Promise<string> => {
    await recorder.stop();
    // 録音セッションを開いたままにすると、他アプリの再生に干渉します
    await setAudioModeAsync({ allowsRecording: false });
 
    const uri = recorder.uri; // 状態オブジェクト側は uri ではなく url なので注意
    if (!uri) {
      throw new Error('録音ファイルが見つかりません');
    }
    return uri;
  };
 
  return {
    isRecording: state.isRecording,
    durationSec: Math.floor(state.durationMillis / 1000),
    permissionGranted,
    start,
    stop,
  };
}

// Cloudflare Workers: src/index.ts
interface Env {
  OPENAI_API_KEY: string;
  ANTHROPIC_API_KEY: string;
  SUPABASE_URL: string;
  SUPABASE_SERVICE_KEY: string;
}
 
interface EvaluationResult {
  transcription: string;
  scores: {
    relevance: number;      // 質問への適切さ (0-10)
    specificity: number;    // 具体性・エピソード (0-10)
    structure: number;      // 論理構成 (0-10)
    language: number;       // 言語表現 (0-10)
  };
  overall: number;          // 総合スコア (0-100)
  strengths: string[];      // 良かった点
  improvements: string[];   // 改善すべき点
  rewrittenAnswer: string;  // AIが書き直した模範回答
  tips: string;             // 一言アドバイス
}
 
export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const corsHeaders = {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    };
 
    if (request.method === 'OPTIONS') {
      return new Response(null, { headers: corsHeaders });
    }
 
    if (request.method !== 'POST') {
      return new Response('Method Not Allowed', { status: 405 });
    }
 
    try {
      const formData = await request.formData();
      const audioFile = formData.get('audio') as File;
      const questionText = formData.get('question') as string;
      const industry = formData.get('industry') as string ?? '一般';
      const level = formData.get('level') as string ?? '中途採用';
 
      if (!audioFile || !questionText) {
        return new Response(
          JSON.stringify({ error: '音声ファイルと質問テキストは必須です' }),
          { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
        );
      }
 
      // Step A: Whisper API で文字起こし
      const whisperFormData = new FormData();
      whisperFormData.append('file', audioFile, 'recording.m4a');
      whisperFormData.append('model', 'whisper-1');
      whisperFormData.append('language', 'ja');
      whisperFormData.append('response_format', 'json');
 
      const whisperResponse = await fetch('https://api.openai.com/v1/audio/transcriptions', {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${env.OPENAI_API_KEY}` },
        body: whisperFormData,
      });
 
      if (!whisperResponse.ok) {
        const errorText = await whisperResponse.text();
        throw new Error(`Whisper API エラー: ${errorText}`);
      }
 
      const { text: transcription } = await whisperResponse.json() as { text: string };
 
      if (!transcription || transcription.trim().length < 10) {
        return new Response(
          JSON.stringify({ error: '音声が短すぎるか、認識できませんでした。もう一度録音してください。' }),
          { status: 422, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
        );
      }
 
      // Step B: Claude Messages API で評価
      const evaluationPrompt = buildEvaluationPrompt(questionText, transcription, industry, level);
 
      const claudeResponse = await fetch('https://api.anthropic.com/v1/messages', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-api-key': env.ANTHROPIC_API_KEY,
          'anthropic-version': '2023-06-01',
        },
        body: JSON.stringify({
          model: 'claude-sonnet-4-6',
          max_tokens: 2000,
          messages: [{ role: 'user', content: evaluationPrompt }],
        }),
      });
 
      if (!claudeResponse.ok) {
        throw new Error(`Claude API エラー: ${claudeResponse.status}`);
      }
 
      const claudeData = await claudeResponse.json() as {
        content: Array<{ text: string }>;
        stop_reason: string;
      };
 
      // 打ち切られた応答をパースしても、壊れた JSON しか出てきません。
      // stop_reason は API が教えてくれるので、文字列を見る前にここで分岐します。
      if (claudeData.stop_reason === 'max_tokens') {
        return new Response(
          JSON.stringify({ error: '評価が途中で切れました。もう一度お試しください。', retryable: true }),
          { status: 503, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
        );
      }
 
      const rawText = claudeData.content[0]?.text ?? '';
      const evaluation = extractEvaluation(rawText); // 実装は次の章
      evaluation.transcription = transcription;
 
      return new Response(JSON.stringify(evaluation), {
        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
      });
 
    } catch (error) {
      console.error('処理エラー:', error);
      return new Response(
        JSON.stringify({ error: '評価処理中にエラーが発生しました。しばらく後にお試しください。' }),
        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
      );
    }
  }
};
 
function buildEvaluationPrompt(
  question: string,
  answer: string,
  industry: string,
  level: string
): string {
  return `あなたは${industry}業界の採用面接の専門家です。${level}の求職者の面接回答を評価してください。
 
【面接質問】
${question}
 
【応募者の回答（音声認識テキスト）】
${answer}
 
以下の形式で厳密にJSONのみを返してください。説明文は不要です。
 
{
  "scores": {
    "relevance": <質問への適切さ 0-10>,
    "specificity": <具体的エピソード・数値の有無 0-10>,
    "structure": <STAR法等の論理構成 0-10>,
    "language": <語彙・表現の適切さ 0-10>
  },
  "overall": <総合スコア 0-100>,
  "strengths": ["良かった点1", "良かった点2"],
  "improvements": ["改善点1", "改善点2", "改善点3"],
  "rewrittenAnswer": "この回答をより良くした場合の模範例を150文字程度で",
  "tips": "この回答者へのワンポイントアドバイスを50文字以内で"
}
 
評価基準：
- relevance: 質問に直接答えているか、的外れな内容はないか
- specificity: 「チームをリードしました」ではなく「5人のチームで売上120%を達成しました」のように具体的か
- structure: 結論→理由→エピソード→結論の流れがあるか
- language: 「えー」「あのー」のような言い淀みが多くないか（音声認識テキストに反映される）
 
厳しく、しかし建設的に評価してください。`;
}

// src/extract-evaluation.ts
export class IncompleteEvaluationError extends Error {}
 
function isEvaluation(value: unknown): value is EvaluationResult {
  const v = value as EvaluationResult;
  return !!v && typeof v === 'object'
    && !!v.scores && typeof v.overall === 'number'
    && Array.isArray(v.improvements) && typeof v.tips === 'string';
}
 
export function extractEvaluation(text: string): EvaluationResult {
  // コードフェンスは外側だけ剥がします（中身の波括弧は数え直すので触りません）。
  // 正規表現リテラルにバッククォートを直接書かずに済むよう、コードポイントで組み立てます
  const fence = new RegExp('\\u0060{3}(?:json)?\\s*([\\s\\S]*?)\\u0060{3}', 'g');
  const unfenced = text.replace(fence, '$1');
 
  for (let i = unfenced.indexOf('{'); i !== -1; i = unfenced.indexOf('{', i + 1)) {
    let depth = 0;
    let inString = false;
    let escaped = false;
 
    for (let j = i; j < unfenced.length; j++) {
      const c = unfenced[j];
      if (escaped) { escaped = false; continue; }
      if (c === '\\') { escaped = true; continue; }
      if (c === '"') { inString = !inString; continue; }
      if (inString) continue;
 
      if (c === '{') {
        depth++;
      } else if (c === '}' && --depth === 0) {
        try {
          const value = JSON.parse(unfenced.slice(i, j + 1));
          if (isEvaluation(value)) return value; // 形まで合って初めて採用します
        } catch {
          // この塊は使えないので、次の { から探し直します
        }
        break;
      }
    }
  }
  throw new IncompleteEvaluationError('評価 JSON を取り出せませんでした');
}

// lib/session-manager.ts
import { createClient } from '@supabase/supabase-js';
 
const supabase = createClient(
  process.env.EXPO_PUBLIC_SUPABASE_URL!,
  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!
);
 
export interface PracticeSession {
  id: string;
  user_id: string;
  question_id: string;
  question_text: string;
  transcription: string;
  scores: {
    relevance: number;
    specificity: number;
    structure: number;
    language: number;
  };
  overall: number;
  strengths: string[];
  improvements: string[];
  rewritten_answer: string;
  tips: string;
  industry: string;
  level: string;
  created_at: string;
}
 
export async function saveSession(
  userId: string,
  questionText: string,
  questionId: string,
  evaluation: Omit<PracticeSession, 'id' | 'user_id' | 'created_at'>
): Promise<PracticeSession> {
  const { data, error } = await supabase
    .from('practice_sessions')
    .insert({
      user_id: userId,
      question_id: questionId,
      question_text: questionText,
      transcription: evaluation.transcription,
      scores: evaluation.scores,
      overall: evaluation.overall,
      strengths: evaluation.strengths,
      improvements: evaluation.improvements,
      rewritten_answer: evaluation.rewritten_answer,
      tips: evaluation.tips,
      industry: evaluation.industry,
      level: evaluation.level,
    })
    .select()
    .single();
 
  if (error) {
    console.error('セッション保存エラー:', error);
    throw new Error('練習結果の保存に失敗しました');
  }
 
  return data as PracticeSession;
}
 
export async function getUserProgress(
  userId: string,
  questionId?: string,
  limit = 20
): Promise<PracticeSession[]> {
  let query = supabase
    .from('practice_sessions')
    .select('*')
    .eq('user_id', userId)
    .order('created_at', { ascending: false })
    .limit(limit);
 
  if (questionId) {
    query = query.eq('question_id', questionId);
  }
 
  const { data, error } = await query;
 
  if (error) {
    throw new Error(`進捗データの取得に失敗しました: ${error.message}`);
  }
 
  return (data ?? []) as PracticeSession[];
}
 
// 特定の質問に対する改善トレンドを計算
export function calculateImprovementTrend(sessions: PracticeSession[]): {
  trend: 'improving' | 'stable' | 'declining';
  percentChange: number;
} {
  if (sessions.length < 2) {
    return { trend: 'stable', percentChange: 0 };
  }
 
  // 最新3回と以前3回を比較
  const recent = sessions.slice(0, 3);
  const earlier = sessions.slice(-3);
 
  const recentAvg = recent.reduce((sum, s) => sum + s.overall, 0) / recent.length;
  const earlierAvg = earlier.reduce((sum, s) => sum + s.overall, 0) / earlier.length;
 
  const percentChange = ((recentAvg - earlierAvg) / earlierAvg) * 100;
 
  return {
    trend: percentChange > 5 ? 'improving' : percentChange < -5 ? 'declining' : 'stable',
    percentChange: Math.round(percentChange),
  };
}

// components/RecordingScreen.tsx（抜粋）
import { useRevenueCat } from '../hooks/useRevenueCat';
import { useSessionCount } from '../hooks/useSessionCount';
 
export function RecordingScreen() {
  const { isPremium } = useRevenueCat();
  const { todayCount } = useSessionCount();
 
  const FREE_DAILY_LIMIT = 3;
  const canRecord = isPremium || todayCount < FREE_DAILY_LIMIT;
 
  const handleRecord = async () => {
    if (!canRecord) {
      // RevenueCat のペイウォールを表示
      await Purchases.presentOfferingIfEligibleForIntroOffer();
      return;
    }
    // 録音処理を開始
    await startRecording();
  };
 
  return (
    // ...UI...
    <TouchableOpacity
      onPress={handleRecord}
      disabled={/* 録音処理中 */false}
    >
      {!canRecord && (
        <Text>本日の無料練習回数（{FREE_DAILY_LIMIT}回）を使い切りました</Text>
      )}
    </TouchableOpacity>
  );
}

// Cloudflare Workers: src/authorize.ts
import { createClient } from '@supabase/supabase-js';
 
const FREE_DAILY_LIMIT = 3;
 
// JST の当日 0 時を ISO 文字列で返します（UTC の日付境界とは 9 時間ずれます）
function startOfTodayJst(): string {
  const jst = new Date(Date.now() + 9 * 60 * 60 * 1000);
  const midnightUtc = Date.UTC(jst.getUTCFullYear(), jst.getUTCMonth(), jst.getUTCDate());
  return new Date(midnightUtc - 9 * 60 * 60 * 1000).toISOString();
}
 
type AuthResult =
  | { ok: true; userId: string }
  | { ok: false; status: number; error: string };
 
export async function authorize(request: Request, env: Env): Promise<AuthResult> {
  const jwt = request.headers.get('Authorization')?.replace(/^Bearer\s+/i, '');
  if (!jwt) {
    return { ok: false, status: 401, error: 'ログインが必要です' };
  }
 
  const supabase = createClient(env.SUPABASE_URL, env.SUPABASE_SERVICE_KEY);
  const { data, error } = await supabase.auth.getUser(jwt);
  if (error || !data.user) {
    return { ok: false, status: 401, error: 'セッションが無効です' };
  }
  const userId = data.user.id;
 
  // 課金状態は RevenueCat の Webhook で profiles テーブルへ書き込んでおきます。
  // アプリから「プレミアムです」と申告させないのが肝心なところです。
  const { data: profile } = await supabase
    .from('profiles')
    .select('is_premium')
    .eq('id', userId)
    .single();
 
  if (profile?.is_premium) {
    return { ok: true, userId };
  }
 
  const { count } = await supabase
    .from('interview_sessions')
    .select('id', { count: 'exact', head: true })
    .eq('user_id', userId)
    .gte('created_at', startOfTodayJst());
 
  if ((count ?? 0) >= FREE_DAILY_LIMIT) {
    return { ok: false, status: 402, error: '本日の無料練習回数を使い切りました' };
  }
  return { ok: true, userId };
}

const auth = await authorize(request, env);
if (!auth.ok) {
  return new Response(JSON.stringify({ error: auth.error }), {
    status: auth.status,
    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
  });
}