Daiki Urata Table of Contents
はじめに
私はよく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プラグインによる導入が可能で手順は公式リポジトリにあります。基本的にこの手順に沿って進めます。
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.で始まる値です）。
詳しくは公式のガイドを参照してください。
Development Buildを作成する
MapboxライブラリはExpo Goでは動かすことができないため、Development Buildを作成して動かす必要があります。
詳しくはExpoの公式ドキュメントに書かれていますので、参考にしてください。
ここでは簡単に手順だけ紹介します。
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のドキュメントに書いてあります。
地図を表示する
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,
},
});
ここのアクセストークンは pk. で始まるものを入れました。scopeはデフォルトのままで大丈夫でした。
では動かしてみます。動かし方は最初と同じで npm run start で良いですが、expo-dev-client をインストールしたので、Development Buildモードでの起動で始まります。
これで無事に地図が表示されました。
おわりに
アクセストークンさえあれば簡単に地図表示ができたので、開発体験的には良かったです。 今回は地図をアプリ上に表示させるところまでが目標でしたが、マーカーやヒートマップ表示など地図のカスタマイズまでできなかったので、後でもうちょっと遊んでみたいと思います！
Daiki Urata
フロントエンド/モバイルアプリなどを主に開発しています。
