Expoを使ったGPS情報取得の実装

Expo

React Native

React Nativeで作成するスマホアプリで、端末のGPSを利用して位置情報を取得する処理の実装の紹介です。案の定ですが、Expoを利用することで簡単に実装できます。

以下GPSを利用した位置情報を取得する処理の実装です。

expo-location

ドキュメントは以下
https://docs.expo.io/versions/v36.0.0/sdk/location/

こんな感じ

Androidのみですが、GPSを使って現在地の緯度・経度を取得するアプリを作成しました。

シンプルなアプリで、端末のGPSで取得した緯度・経度の情報にメモをつけて保存できます。他のアプリへの共有や、JSON形式にして出力などの機能もつけています。データが多くなると管理が大変なのでタグで検索を行える機能もあります。

google play GPSメモ

インストール

npm にてインストールを行います。ExpoのSDKを利用しているのであれば「expo」コマンドでインストールすることでSDKのバージョンに適したものがインストールされます。

expo install expo-location

app.jsonに設定を追加

パーミッションを設定する必要が有ります。以下をapp.jsonに追加します。

    "android": { 
      "permissions": [
        "ACCESS_COARSE_LOCATION",
        "ACCESS_FINE_LOCATION"
      ], 
    }

実装

以下実装の例です。権限の取得や位置情報のリクエストは非同期で行われます。

今回はasyncとawaitを使って同期的に処理を進めています。
getCurrentPositionAsyncは本来promiseを返すので、awaitを使い処理が完了してからデータを受け取るようにしています。もちろん.then()での実装も可能です。
返り値はオブジェクトです。ドキュメントに情報が有りますのでそちらを参考にして取得しましょう。特に気をつけることはありません。タイムスタンプがついていて、位置情報として方位や速度も一緒に取得します。

import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

~~~
  componentDidMount() {
    this._getLocationAsync();
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        submitMessage: '位置情報の取得が許可されませんでした。',
      });
    }else if(status === 'granted'){
      let location = await Location.getCurrentPositionAsync({});

      this.longitude = '経度:' + JSON.stringify(location.coords.longitude);
      this.latitude = '緯度:' + JSON.stringify(location.coords.latitude);
    }
  };
~~~

オプションで精度の調整や、キャッシュする時間の設定を渡すことができます。

ちなみにですが、expoのSDKのバージョン36なら「expo-permission」ではなく「expo-location」で権限を取得できるようになるらしいです。Loacation.getPermissionsAsync()で済むようです。試す機会があれば、実験して追記しておきます。