2018年4月16日

プログラミング

ExpoのLocationで位置情報を取得する【これからはじめるReact Native】

目次

  1. はじめに
  2. Locationの使い方
  3. まとめ

はじめに

アプリ開発において、位置情報を扱うケースは多くあります。
現在地から近いお店情報の取得、現在地から近い人とマッチングなど、様々な使い方がアプリ上でされています。
今回は、React NativeでexpoのLocationを使用し位置情報を取得する方法をご紹介します。

 

Locationの使い方

React Native公式のGeolocationを今回は使わず、Expo用のLocationを使用します。

では、いつものようにsnack expoでプロジェクトを作っていきます。
今回開発するのはこちらのイメージです。
Image uploaded from iOS.png (144.1 kB)

今回のコードはこちらです。

※端末の位置情報を使用する為、シミュレータではなくデバイスでないと正しく位置情報が取得できません。
またExpoのアップデートでiOSの場合にはQRコード経由ではなくなったのでご注意ください。

コードの解説

import { Location, Permissions } from "expo";
まず必要なコンポーネントをロードしています。
Permissions というのはユーザーの権限周りの管理をしています。
今回は「位置情報の使用を許可するか」という確認をユーザーに行い、許可が取れたら位置情報を取得し使用する、という流れの為に使用しています。

  state = {
    locationResult: null
  };

stateのlocationResultにnullを入れて初期化しています。

  componentDidMount() {
    this._getLocationAsync();
  }

componentDidMount つまりコンポーネントがマウントされた後に_getLocationAsyncイベントを実行しています。

  _getLocationAsync = async () => {
   let { status } = await Permissions.askAsync(Permissions.LOCATION);
   if (status !== 'granted') {
     this.setState({
       locationResult: 'Permission to access location was denied',
     });
   }

   let location = await Location.getCurrentPositionAsync({});
   console.log(JSON.stringify(location));
   this.setState({ locationResult: JSON.stringify(location) });
 };

長いので分けて解説していきます。

async ()
こちらはいわゆるasync/await構文です。

async/await構文とは

MDN(Mozilla Developer Network)の解説によるとこうあります。

async 関数が呼び出された場合、 Promise を返します。async 関数が値を返した場合、promise は返された値で解決されます。async 関数が例外や何らかの値をスローした場合、 Promise はスローされた値で拒否されます。
async 関数は、 await 式を含むことができます。 await 式は、async 関数の実行を一時停止し、 Promise の解決を待ちます。そして async 関数の実行を再開し、解決された値を返します。

ちょっとこれだと難しいかもしれませんね。
Promiseとは、わかりやすく言えば「現時点ではわからなくても良い(あとで結果がわかる)値を使うこと」です。
async関数では、await式を持つことができます。このawait式はPromiseの解決を待つことができます。

なぜこんなまどろっこしいことをするかというと、API経由で値を取得する場合など「処理に時間がかかるが値をすぐ使いたい」ときに「一旦処理の結果が返ってくるのを待って!」とストップをかけることができるからです。

今回のケースでいうと、
let { status } = await Permissions.askAsync(Permissions.LOCATION);
こちらはstatusにPermissionsの位置情報を確認した値を代入しています。
「位置情報を取得しても良いですか?」というアラートの結果は、ユーザーの選択を待たなければならずすぐ返ってくるわけではありません。
その状態で次の行の
if (status !== 'granted') {
に進むわけにはいかず、awaitでPromiseの結果を確実に待ってから処理するというわけです。

 if (status !== 'granted') {
     this.setState({
       locationResult: 'Permission to access location was denied',
     });
   }

こちらでは確実に取得したユーザーの位置情報取得に関する確認の結果を持って、拒否された場合にlocationResultにアクセス拒否された旨を伝えています。

let location = await Location.getCurrentPositionAsync({});
getCurrentPositionAsyncで位置情報を取得し、locationに代入しています。

POINT!!

getCurrentPositionAsyncは現在位置を一回だけ取得するメソッドです。 他にも随時(時間や距離のインターバルは設定可能)取得するwatchPositionAsyncといったメソッドもあります。watchPositionAsyncではアプリ起動時の位置情報取得となりますが、アプリ非起動時(バックグラウンド)でも位置情報を取得することを検討中とのことです。詳しくは公式リファレンスをご覧ください。

this.setState({ locationResult: JSON.stringify(location) });
こちらはstatelocationResultに、先程取得した位置情報のJSONデータであるlocationを文字列にして渡しています。

        <Text>
          {this.state.locationResult}
        </Text>

そして最後、locationResult をレンダリングすることで、位置情報が画面上で出てくるというわけです。

まとめ

今回はExpoのLocationをご紹介しました。
以前も解説した通り、ExpoではNative系の機能がそのまま使えない代わりに、ExpoがこのLocationのように代替のAPIを用意してくれています。
またAPIの返り値などでasync/await構文を使う方法も学習しました。
これはかなり多く使われるので理解するようにしてください。

次回からはExpoを使用し、実際にクイズアプリを作りながら解説していきます。

1

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP