Rork で作る水分摂取トラッカーアプリ — 記録・リマインダー・グラフ分析の実装チュートリアル

水分摂取トラッカーアプリを作ってください。
 
画面構成:
1. ホーム画面 — 今日の水分摂取量を円形プログレスバーで表示。
   150ml / 250ml / 500ml のクイック追加ボタン。
2. 履歴画面 — 過去7日間の摂取量を棒グラフで表示。
3. 設定画面 — 1日の目標量（ml）を設定。
 
デザイン:
- 水色を基調としたクリーンなUI
- ボトムタブナビゲーション（ホーム / 履歴 / 設定）
 
データ:
- AsyncStorage でローカル保存

データモデルを以下のように設計してください:
 
- WaterLog: { id: string, amount: number, timestamp: string }
- DailyRecord: { date: string, logs: WaterLog[], totalAmount: number }
- Settings: { dailyGoal: number, reminderInterval: number }
 
AsyncStorage に保存するキー:
- @water_logs — 日付ごとの記録（直近30日分）
- @settings — ユーザー設定
 
アプリ起動時に AsyncStorage からデータを読み込んでステートに反映してください。

// stores/waterStore.ts の主要部分（期待される生成コード）
import AsyncStorage from '@react-native-async-storage/async-storage';
 
const STORAGE_KEY = '@water_logs';
 
// データ保存
const saveLogs = async (logs: Record<string, DailyRecord>) => {
  await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(logs));
};
 
// データ読み込み
const loadLogs = async (): Promise<Record<string, DailyRecord>> => {
  const data = await AsyncStorage.getItem(STORAGE_KEY);
  return data ? JSON.parse(data) : {};
};

ホーム画面の円形プログレスバーを改善してください:
 
- SVG で描画（react-native-svg 使用）
- 目標達成率に応じて色が変化（0-50%: 水色, 50-80%: 青, 80-100%: 濃い青, 100%: 緑）
- 中央に「750 / 2000 ml」のように現在値/目標値を表示
- 達成時にアニメーション付きのお祝い表示
- プログレスバーのアニメーション（値が増えるときスムーズに動く）

// components/CircularProgress.tsx の期待される出力例
import Svg, { Circle } from 'react-native-svg';
import { Animated } from 'react-native';
 
interface CircularProgressProps {
  current: number;   // 現在の摂取量
  goal: number;      // 目標量
  size?: number;     // コンポーネントのサイズ
}
 
export default function CircularProgress({ current, goal, size = 200 }: CircularProgressProps) {
  const radius = (size - 20) / 2;
  const circumference = 2 * Math.PI * radius;
  const progress = Math.min(current / goal, 1);
  const strokeDashoffset = circumference * (1 - progress);
 
  // 達成率に応じた色の決定
  const getColor = () => {
    if (progress >= 1) return '#22c55e';    // 緑（達成）
    if (progress >= 0.8) return '#1e40af';  // 濃い青
    if (progress >= 0.5) return '#3b82f6';  // 青
    return '#7dd3fc';                        // 水色
  };
 
  return (
    <Svg width={size} height={size}>
      {/* 背景の円 */}
      <Circle cx={size/2} cy={size/2} r={radius}
        stroke="#e5e7eb" strokeWidth={10} fill="none" />
      {/* 進捗の円 */}
      <Circle cx={size/2} cy={size/2} r={radius}
        stroke={getColor()} strokeWidth={10} fill="none"
        strokeDasharray={circumference}
        strokeDashoffset={strokeDashoffset}
        strokeLinecap="round"
        rotation={-90} origin={`${size/2}, ${size/2}`} />
    </Svg>
  );
}

リマインダー通知機能を追加してください:
 
- 設定画面で通知間隔を選択（30分 / 1時間 / 2時間 / 3時間）
- 起床時間〜就寝時間の間だけ通知（デフォルト: 8:00〜22:00）
- 通知メッセージ例:「水分補給の時間です 💧 今日の目標まであと 750ml」
- 目標達成済みの日は通知をスキップ
- expo-notifications を使用

// utils/notifications.ts の期待される出力例
import * as Notifications from 'expo-notifications';
 
export async function scheduleWaterReminder(intervalHours: number) {
  // 既存の通知をキャンセル
  await Notifications.cancelAllScheduledNotificationsAsync();
 
  // 新しいリマインダーをスケジュール
  await Notifications.scheduleNotificationAsync({
    content: {
      title: '水分補給の時間です 💧',
      body: '健康のために、コップ1杯の水を飲みましょう',
      sound: 'default',
    },
    trigger: {
      type: Notifications.SchedulableTriggerInputTypes.TIME_INTERVAL,
      seconds: intervalHours * 3600,
      repeats: true,
    },
  });
}

履歴画面を以下のように実装してください:
 
- 過去7日間の水分摂取量を棒グラフで表示
- react-native-chart-kit または victory-native を使用
- 各バーに摂取量（ml）のラベルを表示
- 目標ラインを点線で表示
- 目標達成日はバーの色を緑に変更
- 週間平均と達成率を画面上部に表示

// screens/HistoryScreen.tsx の期待される出力例（抜粋）
import { BarChart } from 'react-native-chart-kit';
import { Dimensions } from 'react-native';
 
const screenWidth = Dimensions.get('window').width;
 
// 過去7日間のデータを整形
const chartData = {
  labels: ['月', '火', '水', '木', '金', '土', '日'],
  datasets: [{
    data: weeklyData.map(d => d.totalAmount),
    colors: weeklyData.map(d =>
      // 目標達成日は緑、未達成は青
      (opacity = 1) => d.totalAmount >= dailyGoal
        ? `rgba(34, 197, 94, ${opacity})`
        : `rgba(59, 130, 246, ${opacity})`
    ),
  }],
};
 
return (
  <BarChart
    data={chartData}
    width={screenWidth - 32}
    height={220}
    yAxisSuffix="ml"
    chartConfig={{
      backgroundColor: '#ffffff',
      backgroundGradientFrom: '#ffffff',
      backgroundGradientTo: '#f0f9ff',
      decimalPlaces: 0,
      color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
    }}
    fromZero
    showValuesOnTopOfBars
  />
);

以下のUX改善を行ってください:
 
1. クイック追加ボタンにハプティックフィードバックを追加（expo-haptics）
2. 水を追加した時にスプラッシュアニメーション（Lottie）
3. 目標達成時に紙吹雪エフェクト
4. ダークモード対応
5. カスタム水分量の入力モーダル（150/250/500ml以外の量を追加したい場合）