Slide 1
Slide 1 text
React Nativeで
位置情報アプリをつくった話
Tsuyoshi Higuchi @tyshgc
2019.02.21
Slide 2
Slide 2 text
今回のトピック
React Native と Google Mapsを利用
位置情報の追跡・大量のマーカーの取り扱い
ユーザの現在地追随アプリを作成した際に得た知見
Slide 3
Slide 3 text
自己紹介
樋口 剛 Tsuyoshi Higuchi
今日はエンジニアとしてやってきました。
基本はサービスとUIをデザイン（設計）する人ですが
インフラとバックエンド以外は基本何でもやります。
Reactは5年くらい、React Native歴は半年程度。
@tyshgc
Slide 4
Slide 4 text
サービスの紹介
KiiiN - キーン - という現実世界に
金塊「キーン」をばら撒いて
それを集めてモノと交換する
位置情報 × ロイヤリティプログラムサービス
33,503
33,503
Slide 5
Slide 5 text
インセンティブを提供し
ユーザを特定の場所へ誘導・現実世界の活動を
流動的にすることによって
ビジネスの機会をつくろうというサービス
Slide 6
Slide 6 text
アプリの要件
❶ユーザの現在地に追随する
❷大量のカスタムマーカーを配置・更新する
現在地の取得の精度・デバイス依存問題
マーカーのレンダリングコスト問題
ISSUE
Slide 7
Slide 7 text
主に利用している位置情報関連のライブラリ
https://github.com/react-native-community/react-native-maps
react-native-maps
https://github.com/manuelbieh/Geolib
geolib
https://github.com/neuberoliveira/react-native-gps-state
react-native-gps-state
Slide 8
Slide 8 text
アーキテクチャ
今回は状態管理周りにMobXを採用
社内的にVue.jsユーザが多い & 堅牢性は（設計次第で）劣るが記述量はReduxより少ない
コンポーネントはContainer Component Pattern
Atomic Designの粒度定義は無駄にファットになるのでいれない
Slide 9
Slide 9 text
Container Component
Model
UseCase A
User Event 1
User Event 2
UseCase B
User Event 1
User Event 2
Domain Store = [
State,
State,
…
]
Presentational Store = [
State,
State,
…
]
Stores
MobX
࣮ମԽ
Model
Element
Component
Element
Component
1SPWJEFSܦ༝Ͱ
ঢ়ଶมߋ࣌ʹ
ࣗಈͰ͢
API / Realm / NativeAPI
!BDUJPONFUIPEΛୟ͍ͯ4UBUFͷঢ়ଶΛมߋ
1SPQTͰͱ6TF$BTFΛ͢
6TF$BTFͷ
ΠϕϯτΛୟ͘
4UPSFαʔϏευϝΠϯʹؔ͢Δͷͱ
1SFTFOUBUJPOBM (6*
ʹؔ͢ΔͷͰ͚Δ
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
位置情報を扱う
React Nativeで位置情報といえば
Geolocation APIは、Geolocation Web仕様を拡張したもの
navigator.geolocation
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
現在地の取得は一部のAndroidデバイスで
取得できたりできなかったり、精度微妙…
RN公式でも react-native-geolocation-service を
使えとのこと
Slide 17
Slide 17 text
Geolocation APIは積極的に使わず
react-native-mapsの MapViewコンポーネントの
onUserLocationChange を活用
onUserLocationChange: (event=> {
const {
latitude,
longitude
} = event.nativeEvent.coordinate
})
返り値（緯度・経度）をUsecase経由でStoreへ投げて諸々処理する方向へ
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
onUserLocationChange は、
showsUserLocationとfollowsUserLocationを
trueにしないと返り値を返さない…
{
showsUserLocation: true,
followsUserLocation: true,
onUserLocationChange: (event=> {…})
}
ただしこれらをアクティブにするとMap上に青い現在地が表示されてしまう
Slide 22
Slide 22 text
33,503
Slide 23
Slide 23 text
また、onUserLocationChange は、
かなり小さい移動も検知するため
イベントを呼ぶ回数をgeolibで間引く必要がありました。
{
showsUserLocation: true,
followsUserLocation: true,
onUserLocationChange: (event=> {…})
}
Slide 24
Slide 24 text
大量のCustomMarkerと闘う
マーカーを独自のイメージに変更したい場合は…
Slide 25
Slide 25 text
iOSは表示も周りのインタラクションも激重!!
CPUを食いまくるらしくFPSは大幅に低下する
Slide 26
Slide 26 text
tracksViewChangesでfalseを指定する
falseだと何も表示されないので
componentDidMountでMountできたらfalseにする
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
マーカーに込み入ったことをする
こんな感じにマーカーをしたい場合は…
33,503
Slide 30
Slide 30 text
にchildrenを渡せばいい
アプリではSvgのアイコンイメージをマーカーにしようとした
Slide 31
Slide 31 text
Androidでchildrenが表示されない…
iOSとAndroidで微妙に表示の扱いが違うぽい
Slide 32
Slide 32 text
AndroidはSvgコンポーネントで挟んであげる
※iOSはSvgいれると表示されなくなるので注意
Slide 33
Slide 33 text
ReactNative所感
ReactNative自体はReact経験者にはやさしい
Native Bridgeコードも言うほど障壁高くない
ただ、OSSのライブラリはインストール時にコケることが
多く特にXcodeが辛すぎた…
AndroidStudioはSDKバージョン周りで最初にコケた…
Slide 34
Slide 34 text
ご静聴ありがとうございました