2019/07/12Expoで端末のGPSを利用して緯度・経度を取得する
Expoを利用して作成したスマホアプリで、端末のGPSを利用した処理を実装しました。その手順をメモしておきます。
とても簡単でした。Expo便利です。 ストアにアップする際の権限周りの設定についても記載しています。
概要
- 必要なモジュールをインポート
- 端末から権限を取得して位置情報を取得
- ストアにアップする際の権限周りの設定
必要なモジュールのインポート
import Constants from 'expo-constants';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';位置情報取得に必要なのが「expo-location」で、それを使う際に端末から権限をもらう必要があります。その際に他のモジュールも一緒に利用します。
端末から権限を取得して位置情報を取得
公式のドキュメントの書き方を真似して書いています。これで位置情報のオブジェクトが取得出来ます。
componentDidMount() {
if (Platform.OS === 'android' && !Constants.isDevice) {
this.setState({
errorMessage: 'Oops, this will not work on Sketch in an Android emulator. Try it on your device!',
});
} else {
this._getLocationAsync();
}
}
_getLocationAsync = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
this.setState({
errorMessage: '位置情報の取得が許可されませんでした。',
});
}
let location = await Location.getCurrentPositionAsync({});
};緯度・経度のみでなく高度や速度、方角も取得できていました。詳細は以下のドキュメントをご確認ください。
https://docs.expo.io/versions/latest/sdk/location/#type-location
以下のようなオブジェクトが取得できます。
{
timestanp: 時刻,
coords:{
latitude:緯度,
longitude:経度,
altitude:高度,
heading:方角,
speed:速度,
accuracy:精度,
}
}ストアにアップする際の権限周りの設定
今回の機能では以下のように「LOCATION」で権限を要求しています。
let { status } = await Permissions.askAsync(Permissions.LOCATION);このことからストアにアップする際にも権限を利用することを知らせる必要があります。 これはapp.jsonに書くことになります。
今回の機能が何に対応しているのかわからなかったので調べてみました。
以下のページに表としてまとめらているので、これを参考に「ACCESS_COARSE_LOCATION」「ACCESS_FINE_LOCATION」を今回は指定しました。
https://docs.expo.io/versions/latest/sdk/permissions/
"android": {
"permissions": [
"ACCESS_COARSE_LOCATION",
"ACCESS_FINE_LOCATION"
],
}注意点
非同期による処理なのでそのことを理解しておきましょう。 もしも画面がアンマウントされている状態でstateを変更すると黄色い警告を発します。
私はcomponentWillUnMount() を使って、コンポーネントがアンマウントされた場合はフラグをONにして、フラグがONの場合は非同期処理の結果でsetStateは空振りするように対応しました。
おわりに
こんな感じでとても簡単に実装ができました。方角なんかも取得できるので、色々とできそうな気がします。 GoogleのAPIを用意しておけば地図情報なんかも取得できそうでした。機会があればやってみます。
