今回は、ReactNativeで歩数計を実装する方法について紹介していきます。
本記事を見ることで以下のような歩数計を実装することができます。
1. 概要
ReactNativeだと、expoのAPIである Pedometer を使うことによって歩数計を簡単に実装することができます。
1.1 Pedometerとは
ユーザーの歩数を取得し、歩数計の更新をしてくれるAPI
公式ドキュメント
2. インストール方法
以下のコマンドでインストールします
|
1 |
expo install expo-sensors |
3. サンプルコード
公式ドキュメント を参考に作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
import React from 'react'; import { Pedometer } from 'expo-sensors'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component { constructor(props) { super(props); this.state = { isPedometerAvailable: 'checking', pastStepCount: 0, currentStepCount: 0, }; } componentDidMount() { this._subscribe(); } componentWillUnmount() { this._unsubscribe(); } _subscribe = () => { this._subscription = Pedometer.watchStepCount(result => { this.setState({ currentStepCount: result.steps, }); }); Pedometer.isAvailableAsync().then( result => { this.setState({ isPedometerAvailable: String(result), }); }, error => { this.setState({ isPedometerAvailable: 'Could not get isPedometerAvailable: ' + error, }); } ); const end = new Date(); const start = new Date(); start.setDate(end.getDate() - 1); Pedometer.getStepCountAsync(start, end).then( result => { this.setState({ pastStepCount: result.steps }); }, error => { this.setState({ pastStepCount: 'Could not get stepCount: ' + error, }); } ); }; _unsubscribe = () => { this._subscription && this._subscription.remove(); this._subscription = null; }; render() { return ( <View style={styles.container}> <Text style={styles.text}> 歩数計が機能しているか </Text> <Text style={styles.text}> {this.state.isPedometerAvailable} </Text> <Text style={[styles.text, { marginTop: 30 }]}> 設定した日付間の歩数を取得 </Text> <Text style={styles.text}> {this.state.pastStepCount} </Text> <Text style={[styles.text, { marginTop: 30 }]}> 歩数計 </Text> <Text style={styles.text}> {this.state.currentStepCount} </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 15, alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 24, } }); |
4. ソースコードについて解説
機能は大きく分けて以下の3つに分けることができます。
4.1 歩数計が機能しているか
Pedometer.isAvailableAsync()
デバイスで歩数計が有効になっているかどうかを返します。
PC上のシミュレータでは、値はfalseで返ってきます。
確認したい場合は、自分のスマホでの実機で確認できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
Pedometer.isAvailableAsync().then( result => { this.setState({ isPedometerAvailable: String(result), }); }, error => { this.setState({ isPedometerAvailable: 'Could not get isPedometerAvailable: ' + error, }); } ); ・・・ render() { return ( <Text style={styles.text}> 歩数計が機能しているか </Text> <Text style={styles.text}> {this.state.isPedometerAvailable} </Text> ・・・ ); } ・・・ |
4.2 設定した日付間の歩数を取得
Pedometer.getStepCountAsync(start, end)
2つの日付間の歩数を取得します。
以下の引数を設定する。
| start（Date） | ステップを測定する範囲の開始を示す日付。 |
| end（Date） | ステップを測定する範囲の終了を示す日付。 |
過去7日間分のデータのみが保存され、取得される。
と公式ドキュメントに記載があるので、iOSの場合は、7日間しか値を保存できないみたいですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
const end = new Date(); const start = new Date(); start.setDate(end.getDate() - 1); Pedometer.getStepCountAsync(start, end).then( result => { this.setState({ pastStepCount: result.steps }); }, error => { this.setState({ pastStepCount: 'Could not get stepCount: ' + error, }); } ); ・・・ render() { return ( ・・・ <Text style={[styles.text, { marginTop: 30 }]}> 設定した日付間の歩数を取得 </Text> <Text style={styles.text}> {this.state.pastStepCount} </Text> ・・・ ); } ・・・ |
4.3 歩数計
Pedometer.watchStepCount(callback)
ユーザーの歩数情報を取得、更新する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
this._subscription = Pedometer.watchStepCount(result => { this.setState({ currentStepCount: result.steps, }); }); ・・・ render() { return ( ・・・ <Text style={[styles.text, { marginTop: 30 }]}> 歩数計 </Text> <Text style={styles.text}> {this.state.currentStepCount} </Text> ); } ・・・ |
