Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Nativeで 位置情報アプリをつくった話
Search
Tsuyoshi Higuchi
PRO
February 21, 2019
Programming
10
5.5k
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
2024 Profile Slide - for フロントエンドのモデル駆動設計
tyshgc
PRO
0
170
開発現場でのサービスデザインとモデリング
tyshgc
PRO
8
3.2k
Design For User #2 コンポーネント指向から考えるUIと設計・趣旨説明スライド / Design For User #2 Openning Slide
tyshgc
PRO
1
1.3k
メンタルモデルから紐解く オブジェクト指向的コンポーネント設計 / Mental-Model Component Design
tyshgc
PRO
11
5.5k
Designer meets Domain-Driven-Design
tyshgc
PRO
28
2.8k
ReactとLoopbackことはじめ / React.js meets Loopback
tyshgc
PRO
11
3.9k
UCDとDDD - ユースケースからユーザー中心について考える
tyshgc
PRO
21
4.2k
UIデザイナーを取り巻く様々な設計 / Intrinsic meaning of UI Design
tyshgc
PRO
46
12k
React & Go Single Page Apps
tyshgc
PRO
20
5.7k
Other Decks in Programming
See All in Programming
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
190
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
220
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
290
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
670
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
220
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
効率的な開発手段として VRTを活用する
ishkawa
1
180
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
Unsuck your backbone
ammeep
671
58k
Why Our Code Smells
bkeepers
PRO
337
57k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Designing for humans not robots
tammielis
253
25k
Optimizing for Happiness
mojombo
379
70k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Scaling GitHub
holman
461
140k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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バージョン周りで最初にコケた…
ご静聴ありがとうございました