Daiki Urata

ExpoアプリにMapboxを導入する

#mapbox #expo #reactnative

2024/07/26

Table of Contents

はじめに
Expoプロジェクト作成
Mapboxライブラリをインストール
Development Buildを作成する
地図を表示する
おわりに

はじめに

私はよくExpo（React Native）によるモバイルアプリ開発をよく行っていて、今回はタイトルの通りExpoアプリにMapboxを導入して地図を表示してみます。

Expoプロジェクト作成

まずはじめにExpoのプロジェクトを作成します。

今回はページ遷移が特に不要なので、Blankのテンプレートで始めます。

npx create-expo-app@latest --template blank-typescript
? What is your app named? › expo-mapbox-app

作成が完了したら、試しにアプリを起動します。一旦Expo Goで動かしても問題ありません。

cd expo-mapbox-app
npm run start

問題なく起動できたら完了です。

Mapboxライブラリをインストール

ExpoやReact NativeアプリでMapboxを使うには @rnmapbox/maps というライブラリがあります。

このライブラリではExpoでもprebuildせずに、Configプラグインによる導入が可能で手順は公式リポジトリにあります。基本的にこの手順に沿って進めます。

maps/plugin/install.md at main · rnmapbox/maps

A Mapbox react native module for creating custom maps - rnmapbox/maps

github.com

maps/plugin/install.md at main · rnmapbox/maps

npx expo install @rnmapbox/maps

次にapp.jsonを編集します。

{
  "expo": {
    "plugins": [
      [
        "@rnmapbox/maps",
        {
          "RNMapboxMapsVersion": "11.0.0",
          "RNMapboxMapsDownloadToken": "YOUR_MAPBOX_SECRET_TOKEN"
        }
      ]
    ]
  }
}

ここで気をつけないといけないのが、RNMapboxMapsDownloadToken の値です（おそらくiOSで必要？）。 MapboxのダッシュボードからDOWNLOADS:READ scopeを含んだSecret Tokenを発行し、その値を設定する必要があります（sk.で始まる値です）。

詳しくは公式のガイドを参照してください。

Get Started | Maps SDK | iOS

Install and configure the Mapbox Maps SDK for iOS.

docs.mapbox.com

Development Buildを作成する

MapboxライブラリはExpo Goでは動かすことができないため、Development Buildを作成して動かす必要があります。

詳しくはExpoの公式ドキュメントに書かれていますので、参考にしてください。

Configure a development build in cloud

Learn how to configure a development build for a project using EAS Build.

docs.expo.dev

ここでは簡単に手順だけ紹介します。　

npx expo install expo-dev-client

Note

EAS CLIがない場合は以下のコマンドでCLIのインストールとEASへのログインを行ってください。

npm install -g eas-cli
eas login

次にExpoプロジェクトとEASを紐付けます。

eas init

無事にapp.jsonが更新されたら次にEAS Buildの設定ファイルを作成します。

eas build:configure

以下のようなeas.jsonファイルが作られます。

{
  "cli": {
    "version": ">= 10.2.1"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

今回はDevelopment Buildを用意したいので、developmentClient オプションがついているdevelopmentプロファイルでビルドを実行します。

eas build --platform android --profile development

iOSで動かしたい場合は、 --platform オプションをios に変えれば良いですが、iOSの実機で動かしたい場合はApple Developer Accountや動かす端末へprofileのインストールなどが必要となりますのでお気をつけください。詳しくはExpoのドキュメントに書いてあります。

Create and run a cloud build for iOS device

Learn how to configure a development build for iOS devices using EAS Build.

docs.expo.dev

Create and run a cloud build for iOS device

地図を表示する

EAS Buildで無事にDevelopment Buildアプリが作られたら、Androidへインストールしておきます。

そしてApp.tsxを編集して地図を表示させます。

import { StyleSheet, View } from "react-native";
import Mapbox from "@rnmapbox/maps";

Mapbox.setAccessToken(
  "YOUR_ACCESS_TOKEN"
);

export default function App() {
  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <Mapbox.MapView style={styles.map} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  container: {
    height: "100%",
    width: "100%",
  },
  map: {
    flex: 1,
  },
});