Rork で瞑想タイマーアプリを作ろう — 集中力を高めるマインドフルネスアプリ開発入門

瞑想タイマーアプリを作ってください。以下の機能を含めてください：
 
1. ホーム画面
   - 円形のカウントダウンタイマー（プログレスリング表示）
   - 5分、10分、15分、20分のプリセットボタン
   - 開始/一時停止/リセットボタン
   - 落ち着いた色合いのデザイン（ダークブルー系）
 
2. 履歴画面
   - 日付、瞑想時間、完了/中断の記録
   - 週間の瞑想時間合計を表示
 
3. 設定画面
   - タイマーの長さをカスタム設定
   - 終了時のサウンド選択（ベル、チャイム、なし）
 
ナビゲーションはボトムタブを使用してください。
カラーテーマは落ち着いたダークブルー＋ホワイトでお願いします。

// タイマーの状態管理（Rork が生成するコードの例）
import { useState, useEffect, useRef } from 'react';
 
const useMeditationTimer = (initialMinutes: number) => {
  const [timeLeft, setTimeLeft] = useState(initialMinutes * 60);
  const [isRunning, setIsRunning] = useState(false);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
  useEffect(() => {
    if (isRunning && timeLeft > 0) {
      intervalRef.current = setInterval(() => {
        setTimeLeft((prev) => prev - 1);
      }, 1000);
    } else if (timeLeft === 0) {
      // タイマー終了時の処理
      setIsRunning(false);
      // 完了サウンドを再生
      // セッション記録を保存
    }
 
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [isRunning, timeLeft]);
 
  // 分:秒 形式にフォーマット
  const formatTime = () => {
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  };
 
  return { timeLeft, isRunning, setIsRunning, setTimeLeft, formatTime };
};

// 円形プログレスの計算例
// progress: 0（開始）〜 1（終了）
const progress = 1 - (timeLeft / totalTime);
const circumference = 2 * Math.PI * radius;
const strokeDashoffset = circumference * (1 - progress);
// → SVG の circle 要素に適用

タイマー画面に環境音の再生機能を追加してください：
- 選択肢：雨の音、波の音、鳥のさえずり、無音
- タイマー開始と同時に再生、終了で停止
- 音量調整スライダーを追加
- expo-av を使って実装してください

// expo-av を使った環境音再生（Rork 生成コードの例）
import { Audio } from 'expo-av';
 
const sounds = {
  rain: require('../assets/sounds/rain.mp3'),
  waves: require('../assets/sounds/waves.mp3'),
  birds: require('../assets/sounds/birds.mp3'),
};
 
const playAmbientSound = async (soundKey: string) => {
  const { sound } = await Audio.Sound.createAsync(
    sounds[soundKey],
    {
      isLooping: true,    // ループ再生
      volume: 0.5,        // 初期音量
    }
  );
  return sound;
};

// セッションデータの型定義
interface MeditationSession {
  id: string;
  date: string;           // ISO 8601 形式
  duration: number;       // 秒数
  completed: boolean;     // 完了したかどうか
  soundUsed: string;      // 使用した環境音
}
 
// セッション保存の例
import AsyncStorage from '@react-native-async-storage/async-storage';
 
const saveSession = async (session: MeditationSession) => {
  const existing = await AsyncStorage.getItem('meditation_sessions');
  const sessions = existing ? JSON.parse(existing) : [];
  sessions.push(session);
  await AsyncStorage.setItem('meditation_sessions', JSON.stringify(sessions));
};

履歴画面を改善してください：
- セッションを日付ごとにグループ化して表示
- 各セッションに瞑想時間と完了アイコンを表示
- 画面上部に「今週の合計瞑想時間」をカード形式で表示
- 連続日数（ストリーク）のバッジを追加