Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React Nativeで 位置情報アプリをつくった話
Tsuyoshi Higuchi
PRO
February 21, 2019
Programming
10
4.4k
React Nativeで 位置情報アプリをつくった話
【第2回】ReactNativeにゆかりのあるスタートアップが集う会
https://r-n.connpass.com/event/117895/
Tsuyoshi Higuchi
PRO
February 21, 2019
Tweet
Share
More Decks by Tsuyoshi Higuchi
See All by Tsuyoshi Higuchi
開発現場でのサービスデザインとモデリング
tyshgc
PRO
6
2.1k
Design For User #2 コンポーネント指向から考えるUIと設計・趣旨説明スライド / Design For User #2 Openning Slide
tyshgc
PRO
1
1.1k
メンタルモデルから紐解く オブジェクト指向的コンポーネント設計 / Mental-Model Component Design
tyshgc
PRO
11
4.4k
Designer meets Domain-Driven-Design
tyshgc
PRO
28
2.5k
ReactとLoopbackことはじめ / React.js meets Loopback
tyshgc
PRO
11
3.2k
UCDとDDD - ユースケースからユーザー中心について考える
tyshgc
PRO
21
3.7k
UIデザイナーを取り巻く様々な設計 / Intrinsic meaning of UI Design
tyshgc
PRO
46
12k
React & Go Single Page Apps
tyshgc
PRO
20
5.4k
Rapid React Prototyping : React.jsでUIデザインプロトタイプを作る
tyshgc
PRO
37
9.3k
Other Decks in Programming
See All in Programming
Swift Concurrency in GoodNotes
inamiy
4
1.3k
Step Functions Distributed Map を使ってみた
codemountains
0
100
[2023년 1월 세미나] 데이터 분석가 되면 어떤 일을 하나요?
datarian
0
540
Cloudflare Workersと状態管理
chimame
2
460
新卒2年目がデータ分析API開発に挑戦【Stapy#88】/data-science-api-begginer
matsuik
0
330
ポケモンで学ぶiOS 16弾丸ツアー 🚅
giginet
PRO
1
610
Swift Observation
shiz
3
250
コンピュータビジョンセミナー2 / computer_vision_seminar_libSGM
fixstars
0
310
Qiita Night PHP 2023
fuwasegu
0
830
PHPアプリケーションにおけるアーキテクチャメトリクスについて / Architecture Metrics in PHP Applications
isanasan
1
210
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
430
状態ってなに?🙃
taro28
0
260
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
The Art of Programming - Codeland 2020
erikaheidi
35
11k
Thoughts on Productivity
jonyablonski
49
2.7k
The Invisible Customer
myddelton
113
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
KATA
mclloyd
12
9.7k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
The Mythical Team-Month
searls
210
40k
Facilitating Awesome Meetings
lara
33
4.6k
Happy Clients
brianwarren
90
5.8k
4 Signs Your Business is Dying
shpigford
171
20k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Transcript
React Nativeで 位置情報アプリをつくった話 Tsuyoshi Higuchi @tyshgc 2019.02.21
今回のトピック React Native と Google Mapsを利用 位置情報の追跡・大量のマーカーの取り扱い ユーザの現在地追随アプリを作成した際に得た知見
自己紹介 樋口 剛 Tsuyoshi Higuchi 今日はエンジニアとしてやってきました。 基本はサービスとUIをデザイン(設計)する人ですが インフラとバックエンド以外は基本何でもやります。 Reactは5年くらい、React Native歴は半年程度。 @tyshgc
サービスの紹介 KiiiN - キーン - という現実世界に 金塊「キーン」をばら撒いて それを集めてモノと交換する 位置情報 ×
ロイヤリティプログラムサービス 33,503 33,503
インセンティブを提供し ユーザを特定の場所へ誘導・現実世界の活動を 流動的にすることによって ビジネスの機会をつくろうというサービス
アプリの要件 ❶ユーザの現在地に追随する ❷大量のカスタムマーカーを配置・更新する 現在地の取得の精度・デバイス依存問題 マーカーのレンダリングコスト問題 ISSUE
主に利用している位置情報関連のライブラリ 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
アーキテクチャ 今回は状態管理周りにMobXを採用 社内的にVue.jsユーザが多い & 堅牢性は(設計次第で)劣るが記述量はReduxより少ない コンポーネントはContainer Component Pattern Atomic Designの粒度定義は無駄にファットになるのでいれない
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* ʹؔ͢ΔͷͰ͚Δ
None
None
None
None
位置情報を扱う React Nativeで位置情報といえば Geolocation APIは、Geolocation Web仕様を拡張したもの navigator.geolocation
None
現在地の取得は一部のAndroidデバイスで 取得できたりできなかったり、精度微妙… RN公式でも react-native-geolocation-service を 使えとのこと
Geolocation APIは積極的に使わず react-native-mapsの MapViewコンポーネントの onUserLocationChange を活用 onUserLocationChange: (event=> { const
{ latitude, longitude } = event.nativeEvent.coordinate }) 返り値(緯度・経度)をUsecase経由でStoreへ投げて諸々処理する方向へ
None
None
None
onUserLocationChange は、 showsUserLocationとfollowsUserLocationを trueにしないと返り値を返さない… { showsUserLocation: true, followsUserLocation: true, onUserLocationChange:
(event=> {…}) } ただしこれらをアクティブにするとMap上に青い現在地が表示されてしまう
33,503
また、onUserLocationChange は、 かなり小さい移動も検知するため イベントを呼ぶ回数をgeolibで間引く必要がありました。 { showsUserLocation: true, followsUserLocation: true, onUserLocationChange:
(event=> {…}) }
大量のCustomMarkerと闘う マーカーを独自のイメージに変更したい場合は… <Marker image={画像} coordinate={現在地} />
iOSは表示も周りのインタラクションも激重!! CPUを食いまくるらしくFPSは大幅に低下する
tracksViewChangesでfalseを指定する <Marker image={画像} tracksViewChanges={false} coordinate={現在地} /> falseだと何も表示されないので componentDidMountでMountできたらfalseにする
None
None
マーカーに込み入ったことをする こんな感じにマーカーをしたい場合は… 33,503
<Marker image={画像} tracksViewChanges={false} coordinate={現在地} > <View style={…}><SvgOriginalImage /></View> </Marker> <Marker
/>にchildrenを渡せばいい アプリではSvgのアイコンイメージをマーカーにしようとした
Androidでchildrenが表示されない… iOSとAndroidで微妙に表示の扱いが違うぽい
<Marker …> <Svg width={MARKER_WIDTH} height={MARKER_HEIGHT}> <View style={…}><SvgOriginalImage /></View> </Svg> </Marker>
AndroidはSvgコンポーネントで挟んであげる ※iOSはSvgいれると表示されなくなるので注意
ReactNative所感 ReactNative自体はReact経験者にはやさしい Native Bridgeコードも言うほど障壁高くない ただ、OSSのライブラリはインストール時にコケることが 多く特にXcodeが辛すぎた… AndroidStudioはSDKバージョン周りで最初にコケた…
ご静聴ありがとうございました