【Nuxt.jsで近くのお店を探すアプリを作成】#3 現在位置の取得

Web

今回の目標

前回はaxiosを用いて実際にグルメサーチAPIからお店の一覧を取得しました。

【Nuxt.jsで近くのお店を探すアプリを作成】#2 外部APIへのリクエスト
Nuxt.jsで外部APIにアクセスするにはaxiosを使用します。この記事ではaxiosを使用して、ホットペッパーのAPIからお店の情報を取得する方法を説明します。

今回はグルメサーチAPIに送信する現在位置の取得について説明していきます。

現在位置の取得方法

ブラウザで現在位置を取得するには、Geolocation API というのを使用します。Geolocation APIのブラウザ毎の対応状況は以下になります。

Geolocation APIは、NavigatorインターフェースにあるGeolocationオブジェクトによって使用可能になります。Geolocation APIが対応しているかどうかは、Geolocationオブジェクトが取得できるかで判断できます。

if (!navigator.geolocation) {
  alert('対応していないブラウザです');
}

getCurrentPosition()

現在位置を取得するには、GeolocationオブジェクトのgetCurrentPositionメソッドを使用します。

navigator.geolocation.getCurrentPosition(success, error, options)

const success = (position) => {
  console.log(position)
}

const error = (error) => {
  console.log(error)
}

const options = {
  enableHighAccuracy: true,
  timeout: 1000,
  maximumAge: 0
}

引数は次の通りです。

  • success

第一引数には、現在位置の取得に成功した場合のコールバック関数を設定します。コールバック関数の引数として、現在位置の情報を持つPositionオブジェクトを受け取ります。

Positionオブジェクトは以下の情報を持ちます。今回使用するのは緯度と経度の値のみです。

coords.latitude現在位置の緯度。
coords.longitude現在位置の経度。
coords.altitude現在位置の高度。取得できない場合はnull。
coords.accuracy緯度、経度の精度。メートル単位で表す。
coords.altitudeAccuracy高度の精度。メートル単位で表す。取得できない場合はnull。
coords.headingデバイスの方角。北:0、東:90、南:180、西:270。
coords.speedがnullの場合はnull。
coords.speedデバイスの速度。取得できない場合はnull。
timestamp現在位置を取得した時間。
  • error

第二引数には、現在位置の取得に失敗した場合のコールバック関数を設定します。必要ない場合は省略できます。 コールバック関数の引数として、PositionErrorオブジェクトを受け取ります。

PositionErrorオブジェクトは以下の情報を持ちます。

codeエラーコード。
1:ユーザーの許可なし
2:内部エラー
3:タイムアウト
messageデバッグ用のエラーメッセージ。
  •  options

第三引数には、現在位置の取得オプションとしてPositionOptionsオブジェクトを設定します。すべてデフォルトでいい場合は省略できます。

PositionOptionsオブジェクトに以下の情報を設定します。

enableHighAccuracyfalsetrueを設定することで位置情報の取得の精度を上げる。
ただしデバイスに負荷がかかり、消費電力の増加や位置計測に時間がかかる場合がある。
timeoutInfinity位置取得のタイムアウト時間(ミリ秒)。
maximumAge0キャッシュの有効期限(ミリ秒)。設定した時間の間はキャッシュから位置情報を取得する。

位置の偽装

少し余談になってしまいますが、ChromeではDevToolsから位置の偽装ができます。(偽装というとなんか悪い感じがする…。)

DevTools右側のメニュー(三点リーダー)から「More tools」>「Sensors」を選択します。

表示された画面にGeolocationという項目があるので適当な場所を選択します。今回はTokyoにしています。さらに位置を変更したい場合はLatitudeとLongitudeを変更します。

Nuxt.js(Vue.js)への適用

Geolocation APIは、createdの後に参照できるようになります。今回はページ表示のタイミングで取得したいので、mountedに実装します。

Vue.jsのライフサイクルフックについて知らない方はこちらの記事を読んでいただけると幸いです。

【Vue.js】ライフサイクルフックの基本を利用方法と共に解説!
Vueにはライフサイクルと言って、インスタンスの生成から破棄までの間に実行される関数がいくつかあります。Vueで開発する上では必要不可欠な知識なので、具体的な利用例を基に基本を学んでいきましょう。

ではmountedで位置情報を取得してみましょう。

export default {
  mounted() {
    navigator.geometric.getCurrentPosition((position) => {
      //位置情報を取得した後の処理
      console.log(position);
      //ここからAPIの送信処理を定義する
    }, (err) => {
      //エラーが発生した場合の処理
      console.log(err)
    })
  }
}

ページを表示した際に現在位置の取得を許可するか聞かれると思いますので許可してください。拒否した場合はエラーとなります。コンソールにPositionオブジェクトの情報が表示されればとりあえずは成功です。

では取得した現在位置を使用して、前回行ったAPIへの送信をしてみましょう。

export default {
  layout: 'test',
  data() {
    return {
      shops: [],
      error: false
    }
  },
  methods: {
    //レスポンス後の処理
    setShop(res) {
      this.shops = res.data.results.shop
    },
    //エラーが発生した場合の処理
    setError(err) {
      console.log(err)
      this.error = true
    }
  },
  mounted() {
    navigator.geolocation.getCurrentPosition((position) => {
      //APIからデータを取得
      this.$axios.get('http://localhost:3000/api/gourmet/v1/', {
        //パラメータの設定 
        params: { 
          key: process.env.apikey,
          lat: position.coords.latitude,   //取得した緯度を設定
          lng: position.coords.longitude,  //取得した経度を設定
          format: 'json' 
        } 
      }).then(this.setShop).catch(this.setError)
    }, this.setError)
  }
}

お店の情報が表示されたでしょうか。エラー処理はsetErrorで統一しています。

まとめ

  • 現在位置の取得はnavigator.geolocation.getCurrentPosition()を使用しましょう
  • 現在位置の情報はPositionオブジェクトとして取得できます
  • Nuxt.js(Vue.js)ではcreatedの後に取得可能になります

↓↓↓次回↓↓↓

【Nuxt.jsで近くのお店を探すアプリを作成】#4 async/await
非同期処理を連続して行う場合には、コーディング的に読みにくくなることがあります。今回はそれを解決する方法であるasync/awaitについて少し説明します。また非同期処理についても少し触れます。

 

- Nuxt.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました