📱

Capactiorプラグインを使ってネイティブ操作してみた（ジオロケーション編）

Ryota

2024/06/27に公開

こんにちは、今回はCapactiorプラグインを使ってネイティブのジオロケーション機能を操作し、取得した位置情報を住所に変換して表示する方法を紹介します。

はじめに

モバイルアプリでユーザーの位置情報を取得し、それを住所に変換して表示する方法は、多くのアプリで必要とされる機能です。この記事では、SvelteとIonicを使用してその方法を詳しく解説します。

環境のセットアップ

1. ベースプロジェクトの準備

まずは、Svelte、Ionicのベースプロジェクトをセットアップします。過去の私のブログを参考にしていただけると幸いです。こちらで、Capactiorやネイティブアプリのセットアップを行っています。

Svelte×Ionicでモバイルアプリのプロジェクトを作成してみた

2. Geolocationプラグインのインストール

次に、ジオロケーション機能を呼び出すCapacitorのGeolocationプラグインをインストールします。
また、本記事では位置情報を住所に変換する際に、Google MapS APIを利用します。
APIキーを保存するために、dotenvをインストールします。

npm install @capacitor/geolocation
npm install dotenv --save

3. プラグインの同期

プラグインをインストールした後、プロジェクトをネイティブプロジェクトと同期します。

npx cap sync

位置情報の取得

位置情報を取得し、住所に変換するための関数を含む geo.ts ファイルを作成します。

import { Geolocation　} from '@capacitor/geolocation'

interface Coordinates {
  latitude: number
  longitude: number
}
// 現在の位置情報を取得
export const getCurrentPosition = async (): Promise<Coordinates> => {
  const coordinates = await Geolocation.getCurrentPosition()
  return {
    latitude: coordinates.coords.latitude,
    longitude: coordinates.coords.longitude
  }
}

逆ジオコーディング

次に、取得した緯度と経度を使って住所情報を取得します。ここでは、Google Maps APIを使用します。

APIキーを安全に管理するために、.envファイルに環境変数として設定します。

GOOGLE_MAPS_API_KYE=your_api_key

import 'dotenv/config';

// 緯度と経度から住所を取得
export const getAddressFromCoordinates = async (latitude: number, longitude: number): Promise<string> => {
  const response = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${process.env.GOOGLE_MAPS_API_KEY}`)
  const data = await response.json()

  if (data.status === "OK") {
    return data.results[0].formatted_address
  } else {
    throw new Error("住所を取得できませんでした")
  }
}

住所の表示

取得した住所をSvelteコンポーネントで表示します。

App.svelte ファイルを作成し、位置情報を取得して住所を表示するコンポーネントのコードを記述します。

<script lang="ts">
  import { onMount
} from 'svelte';
  import { getCurrentPosition, getAddressFromCoordinates
} from './geo';

  let address: string | null = null;
  let errorMessage: string | null = null;

  onMount(async () => {
    try {
      const { latitude, longitude
    } = await getCurrentPosition();
      address = await getAddressFromCoordinates(latitude, longitude);
  } catch (error) {
      errorMessage = "位置情報を取得できませんでした";
  }
});
</script>

<main>
  <h1>位置情報から住所を取得</h1>
  {#if address !== null}
    <p>住所: {address}</p>
  {:else if errorMessage}
    <p>{errorMessage}</p>
  {:else}
    <p>位置情報を取得中...</p>
  {/if}
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
    margin: 0 auto;
    max-width: 240px;
    }

  h1 {
    color: #ff3e00;
    }

  p {
    font-size: 1.2em;
    }
</style>

プラットフォーム別設定

ユーザーから位置情報を取得するには、iOSとAndroidそれぞれの許可設定を記述しなければなりません。詳細は公式ドキュメントを参照してください（Apple DeveloperおよびAndroid Developer）。

iOS

Info.plistに次のエントリを追加します。

<key>NSLocationWhenInUseUsageDescription</key>
<string>位置情報の使用目的を説明してください</string>

Android

AndroidManifest.xmlに次のパーミッションを追加します。

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />