Tweet
Tweet

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

ご静聴ありがとうございました