Apple HealthKit & Google FitをReact Native Expoで統合する方法

npx create-expo-app MyHealthApp --template blank-typescript
cd MyHealthApp

npx expo install expo-dev-client react-native-health react-native-health-connect expo-build-properties

{
  "expo": {
    "name": "MyHealthApp",
    "slug": "MyHealthApp",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourcompany.myhealthapp",
      "infoPlist": {
        "NSHealthShareUsageDescription": "アクティビティを表示するために健康データへのアクセスが必要です。",
        "NSHealthUpdateUsageDescription": "ワークアウトデータをApple Healthに書き込む必要があります。"
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.yourcompany.myhealthapp",
      "permissions": [
        "android.permission.health.READ_STEPS",
        "android.permission.health.READ_HEART_RATE",
        "android.permission.health.READ_SLEEP"
      ]
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      "react-native-health",
      "expo-health-connect",
      [
        "expo-build-properties",
        {
          "android": {
            "compileSdkVersion": 34,
            "targetSdkVersion": 34,
            "minSdkVersion": 26
          }
        }
      ]
    ]
  }
}

npx expo prebuild

npx expo run:ios

npx expo run:android

// src/hooks/useHealthData.ts

export interface HealthData {
  steps: number;
  heartRate: number;
  sleepHours: number;
}

// src/hooks/useHealthData.ts
import { useState, useEffect } from 'react';
import { Platform } from 'react-native';
import AppleHealthKit, { HealthKitPermissions } from 'react-native-health';
import { initialize, requestPermission, readRecords } from 'react-native-health-connect';

export interface HealthData {
  steps: number;
  heartRate: number;
  sleepHours: number;
}

// Apple HealthKitの許可を定義
const healthKitPermissions: HealthKitPermissions = {
  permissions: {
    read: [
      AppleHealthKit.Constants.Permissions.Steps,
      AppleHealthKit.Constants.Permissions.HeartRate,
      AppleHealthKit.Constants.Permissions.SleepAnalysis,
    ],
    write: [],
  },
};

// Google Health Connectの許可を定義
const healthConnectPermissions = [
  { accessType: 'read', recordType: 'Steps' },
  { accessType: 'read', recordType: 'HeartRate' },
  { accessType: 'read', recordType: 'SleepSession' },
];

export const useHealthData = () => {
  const [healthData, setHealthData] = useState<HealthData | null>(null);
  const [isInitialized, setIsInitialized] = useState(false);

  // ... 関数はここに追加
};

// useHealthDataフック内

const requestPermissions = async (): Promise<boolean> => {
  if (Platform.OS === 'ios') {
    return new Promise((resolve) => {
      AppleHealthKit.initHealthKit(healthKitPermissions, (error, results) => {
        if (error) {
          console.error("HealthKitの初期化中にエラー:", error);
          return resolve(false);
        }
        setIsInitialized(true);
        resolve(true);
      });
    });
  } else if (Platform.OS === 'android') {
    try {
      const isInitialized = await initialize();
      if (!isInitialized) {
        console.error('Health Connectの初期化に失敗しました');
        return false;
      }
      const grantedPermissions = await requestPermission(healthConnectPermissions);
      console.log('許可された権限:', grantedPermissions);
      setIsInitialized(true);
      return true;
    } catch (error) {
      console.error("Health Connectの初期化中にエラー:", error);
      return false;
    }
  }
  return false;
};

// useHealthDataフック内

const fetchTodayStats = async () => {
  if (!isInitialized) {
    console.warn("健康データが初期化されていません。最初に許可をリクエストしてください。");
    return;
  }

  const today = new Date();
  const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0).toISOString();
  const endDate = today.toISOString();

  let steps = 0;
  let heartRate = 0;
  let sleepHours = 0;

  if (Platform.OS === 'ios') {
    // --- iOSデータ取得 ---
    const options = { date: endDate };

    const stepResult = await new Promise<number>((resolve) => {
      AppleHealthKit.getStepCount(options, (err, result) => {
        resolve(result?.value || 0);
      });
    });
    steps = stepResult;
    
    // ... iOS心拍数と睡眠取得はここに追加

  } else if (Platform.OS === 'android') {
    // --- Androidデータ取得 ---
    const stepRecords = await readRecords('Steps', {
      timeRangeFilter: {
        operator: 'between',
        startTime: startDate,
        endTime: endDate,
      },
    });
    steps = stepRecords.reduce((total, record) => total + (record as any).count, 0);

    // ... Android心拍数と睡眠取得はここに追加
  }

  setHealthData({ steps, heartRate, sleepHours });
};

// App.tsx
import React, { useEffect } from 'react';
import { View, Text, Button, StyleSheet, SafeAreaView } from 'react-native';
import { useHealthData, HealthData } from './src/hooks/useHealthData'; // フックが完成したと仮定

export default function App() {
  const { healthData, requestPermissions, fetchTodayStats } = useHealthData();

  useEffect(() => {
    // アプリの起動時に自動的に許可をリクエスト
    requestPermissions().then(success => {
      if (success) {
        fetchTodayStats();
      }
    });
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>マイ健康統計</Text>
      <View style={styles.card}>
        <Stat label="歩数" value={healthData?.steps ?? 'N/A'} />
        <Stat label="心拍数 (bpm)" value={healthData?.heartRate ?? 'N/A'} />
        <Stat label="睡眠 (時間)" value={healthData?.sleepHours ?? 'N/A'} />
      </View>
      <Button title="データを更新" onPress={fetchTodayStats} />
    </SafeAreaView>
  );
}

const Stat = ({ label, value }: { label: string; value: string | number }) => (
  <View style={styles.stat}>
    <Text style={styles.label}>{label}</Text>
    <Text style={styles.value}>{value}</Text>
  </View>
);

const styles = StyleSheet.create({
  // ... container、title、cardなどのスタイルを追加
});