プロジェクト紹介：React Nativeで軽い眠りから起こすスマートアラーム作り方

---
title: "Smart Alarm——加速度センサーベースの睡眠追跡モバイルアプリ開発"
excerpt: "スマートフォンの加速度センサーを活用して睡眠周期を推定し、最適なタイミングで起こすReact Nativeアプリの構築方法を学びます。"
keywords: "Smart Alarm, 睡眠追跡, 加速度センサー, React Native, モバイルアプリ開発"
author: "Health Tech Team"
date: "2024-03-15"
category: "テクノロジーと健康"
---

目覚まし時計で咄嗟に目を覚まし、ぼんやりとして混乱した経験はありませんか？この感覚は「睡眠慣性」と呼ばれ、深い睡眠周期中に起こされた結果であることが多くあります。もしアラームが最適なタイミングで起きてくれるよう inteligently 待ってくれる라면 어떨까요？これが「Smart Alarm」のアイデアです——スマートフォンの加速度センサーを活用して睡眠周期を推定し、最も浅い睡眠段階で起こすモバイルアプリです。

このプロジェクトでは、そのようなアプリの開発工程をご紹介します。加速度センサーベースの睡眠追跡の科学、加速度センサーデータ解釈の課題、そしてReact Nativeを使用した段階的な実装を探求します。このプロジェクトは、モバイル開発、データサイエンス、ヘルステクノロジーが見事に融合したものであり、ポケットの中の力を活用して私たちのウェルビーイングを改善する実践的な方法を提供します。

**前提条件：**
*   React NativeとJavaScript（ES6+）への精通していること。
*   テスト用の物理デバイス（シミュレーターには加速度センサーがありません）。
*   Node.jsとReact Native開発環境がセットアップされていること。

## 問題の理解

従来の目覚まし時計はシンプルです。睡眠状態に関係なく、設定された時刻に鳴ります。しかし、私たちの睡眠は循環しており、浅睡眠、深い睡眠、REM睡眠の間を移動しています。浅い睡眠段階から目覚める方がはるかに自然に感じられ、より爽快感があります。

睡眠ラボの高度な機器がなくても睡眠段階を判定できることが課題です。ここで加速度センサーの出番です。電話機をベッドに置くことで、夜間の動きを検出できます。核となる考え方は、浅い睡眠段階ではより多く動き、深い睡眠中は比較的静止しているということです。

加速度センサーベースの追跡は臨床的な方法ほど正確ではありませんが、睡眠パターンを推定する信頼できる方法です。コンシューマーアプリケーションにおいて、信頼性の高い方法を提供します。私たちの方法は、このモーションデータをキャプチャし、低い活動期間と高い活動期間を特定するために処理し、この情報を使用して適切なタイミングでアラームをトリガーします。

## 前提条件

コーディングを開始する前に、環境を準備しましょう。

- **React Nativeプロジェクト：**
  プロジェクトをお持ちでない場合は、Expoを使用して作成してください：
  ```bash
  npx create-expo-app SmartAlarm
  cd SmartAlarm

// src/components/SleepTracker.js
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Accelerometer } from 'expo-sensors';

const SleepTracker = () => {
  const [data, setData] = useState({ x: 0, y: 0, z: 0 });
  const [subscription, setSubscription] = useState(null);

  const _subscribe = () => {
    setSubscription(
      Accelerometer.addListener(accelerometerData => {
        setData(accelerometerData);
      })
    );
    // Set the update interval for the accelerometer
    Accelerometer.setUpdateInterval(1000); // 1 second
  };

  const _unsubscribe = () => {
    subscription && subscription.remove();
    setSubscription(null);
  };

  useEffect(() => {
    _subscribe();
    return () => _unsubscribe();
  }, []);

  const { x, y, z } = data;
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Accelerometer:</Text>
      <Text style={styles.text}>x: {Math.round(x)} y: {Math.round(y)} z: {Math.round(z)}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
  },
});

export default SleepTracker;

// src/components/SleepTracker.js (更新版)
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { Accelerometer } from 'expo-sensors';

const SleepTracker = () => {
  const [movementData, setMovementData] = useState([]);
  const [isTracking, setIsTracking] = useState(false);
  const [subscription, setSubscription] = useState(null);

  const startTracking = () => {
    setIsTracking(true);
    setSubscription(
      Accelerometer.addListener(({ x, y, z }) => {
        // Calculate magnitude of movement
        const magnitude = Math.sqrt(x ** 2 + y ** 2 + z ** 2);
        // We are interested in the change from the force of gravity (1)
        const movement = Math.abs(magnitude - 1);
        setMovementData(prevData => [...prevData, { movement, timestamp: new Date() }]);
      })
    );
    Accelerometer.setUpdateInterval(2000); // 2 seconds
  };

  const stopTracking = () => {
    setIsTracking(false);
    subscription && subscription.remove();
    setSubscription(null);
    // Here you would typically process the movementData
    console.log('Final Movement Data:', movementData);
  };

  useEffect(() => {
    return () => {
      subscription && subscription.remove();
    };
  }, [subscription]);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        {isTracking ? 'Tracking Sleep...' : 'Ready to Track'}
      </Text>
      <Button title={isTracking ? "Stop Tracking" : "Start Tracking"} onPress={isTracking ? stopTracking : startTracking} />
    </View>
  );
};

// Styles remain the same
const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    text: {
      fontSize: 18,
      marginBottom: 20,
    },
  });

export default SleepTracker;

// src/components/SmartAlarm.js
import React, { useState, useEffect } from 'react';
import { View, Text, Button, Alert } from 'react-native';
import { Accelerometer } from 'expo-sensors';

const WAKE_UP_WINDOW_MINUTES = 30;
const MOVEMENT_THRESHOLD = 0.1; // This will need tuning

const SmartAlarm = () => {
  const [targetAlarmTime, setTargetAlarmTime] = useState(null);
  const [inWakeUpWindow, setInWakeUpWindow] = useState(false);
  const [subscription, setSubscription] = useState(null);

  useEffect(() => {
    // Check every second if we are in the wake up window
    const interval = setInterval(() => {
      if (targetAlarmTime) {
        const now = new Date();
        const windowStart = new Date(targetAlarmTime.getTime() - WAKE_UP_WINDOW_MINUTES * 60000);
        if (now >= windowStart && now <= targetAlarmTime) {
          if (!inWakeUpWindow) {
            console.log("Entering wake-up window. Starting to monitor for movement.");
            setInWakeUpWindow(true);
            startMonitoring();
          }
        } else if (now > targetAlarmTime) {
            console.log("Target alarm time passed. Firing alarm.");
            fireAlarm();
        }
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [targetAlarmTime, inWakeUpWindow]);

  const setAlarm = () => {
    const targetTime = new Date();
    targetTime.setMinutes(targetTime.getMinutes() + 1); // For demo, set alarm 1 minute from now
    setTargetAlarmTime(targetTime);
    Alert.alert("Alarm Set", `Will look for light sleep between ${new Date(targetTime.getTime() - WAKE_UP_WINDOW_MINUTES * 60000).toLocaleTimeString()} and ${targetTime.toLocaleTimeString()}`);
  };

  const startMonitoring = () => {
    setSubscription(
      Accelerometer.addListener(({ x, y, z }) => {
        const magnitude = Math.sqrt(x ** 2 + y ** 2 + z ** 2);
        const movement = Math.abs(magnitude - 1);

        if (movement > MOVEMENT_THRESHOLD) {
          console.log(`Movement detected (${movement.toFixed(2)}). Firing smart alarm!`);
          fireAlarm();
        }
      })
    );
    Accelerometer.setUpdateInterval(2000);
  };

  const fireAlarm = () => {
    stopMonitoring();
    Alert.alert("Good Morning!", "Woke you up during a light sleep phase.");
    setTargetAlarmTime(null);
    setInWakeUpWindow(false);
  };

  const stopMonitoring = () => {
    subscription && subscription.remove();
    setSubscription(null);
  };

  return (
    <View>
      <Button title="Set Smart Alarm for 1 Minute from Now" onPress={setAlarm} />
      {targetAlarmTime && <Text>Alarm set for: {targetAlarmTime.toLocaleTimeString()}</Text>}
    </View>
  );
};

export default SmartAlarm;