$30 off During Our Annual Pro Sale. View Details »

React Nativeで 位置情報アプリをつくった話

React Nativeで 位置情報アプリをつくった話

【第2回】ReactNativeにゆかりのあるスタートアップが集う会
https://r-n.connpass.com/event/117895/

Tsuyoshi Higuchi
PRO

February 21, 2019
Tweet

More Decks by Tsuyoshi Higuchi

Other Decks in Programming

Transcript

  1. React Nativeで
    位置情報アプリをつくった話
    Tsuyoshi Higuchi @tyshgc
    2019.02.21

    View Slide

  2. 今回のトピック
    React Native と Google Mapsを利用
    位置情報の追跡・大量のマーカーの取り扱い
    ユーザの現在地追随アプリを作成した際に得た知見

    View Slide

  3. 自己紹介
    樋口 剛 Tsuyoshi Higuchi
    今日はエンジニアとしてやってきました。
    基本はサービスとUIをデザイン(設計)する人ですが
    インフラとバックエンド以外は基本何でもやります。
    Reactは5年くらい、React Native歴は半年程度。
    @tyshgc

    View Slide

  4. サービスの紹介
    KiiiN - キーン - という現実世界に
    金塊「キーン」をばら撒いて
    それを集めてモノと交換する
    位置情報 × ロイヤリティプログラムサービス
    33,503
    33,503

    View Slide

  5. インセンティブを提供し
    ユーザを特定の場所へ誘導・現実世界の活動を
    流動的にすることによって
    ビジネスの機会をつくろうというサービス

    View Slide

  6. アプリの要件
    ❶ユーザの現在地に追随する
    ❷大量のカスタムマーカーを配置・更新する
    現在地の取得の精度・デバイス依存問題
    マーカーのレンダリングコスト問題
    ISSUE

    View Slide

  7. 主に利用している位置情報関連のライブラリ
    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

    View Slide

  8. アーキテクチャ
    今回は状態管理周りにMobXを採用
    社内的にVue.jsユーザが多い & 堅牢性は(設計次第で)劣るが記述量はReduxより少ない
    コンポーネントはContainer Component Pattern
    Atomic Designの粒度定義は無駄にファットになるのでいれない

    View Slide

  9. 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*
    ʹؔ͢Δ΋ͷͰ෼͚Δ

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. 位置情報を扱う
    React Nativeで位置情報といえば
    Geolocation APIは、Geolocation Web仕様を拡張したもの
    navigator.geolocation

    View Slide

  15. View Slide

  16. 現在地の取得は一部のAndroidデバイスで
    取得できたりできなかったり、精度微妙…
    RN公式でも react-native-geolocation-service を
    使えとのこと

    View Slide

  17. Geolocation APIは積極的に使わず
    react-native-mapsの MapViewコンポーネントの
    onUserLocationChange を活用
    onUserLocationChange: (event=> {
    const {
    latitude,
    longitude
    } = event.nativeEvent.coordinate
    })
    返り値(緯度・経度)をUsecase経由でStoreへ投げて諸々処理する方向へ

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. onUserLocationChange は、
    showsUserLocationとfollowsUserLocationを
    trueにしないと返り値を返さない…
    {
    showsUserLocation: true,
    followsUserLocation: true,
    onUserLocationChange: (event=> {…})
    }
    ただしこれらをアクティブにするとMap上に青い現在地が表示されてしまう

    View Slide

  22. 33,503

    View Slide

  23. また、onUserLocationChange は、
    かなり小さい移動も検知するため
    イベントを呼ぶ回数をgeolibで間引く必要がありました。
    {
    showsUserLocation: true,
    followsUserLocation: true,
    onUserLocationChange: (event=> {…})
    }

    View Slide

  24. 大量のCustomMarkerと闘う
    マーカーを独自のイメージに変更したい場合は…
    image={画像}
    coordinate={現在地}
    />

    View Slide

  25. iOSは表示も周りのインタラクションも激重!!
    CPUを食いまくるらしくFPSは大幅に低下する

    View Slide

  26. tracksViewChangesでfalseを指定する
    image={画像}
    tracksViewChanges={false}
    coordinate={現在地}
    />
    falseだと何も表示されないので
    componentDidMountでMountできたらfalseにする

    View Slide

  27. View Slide

  28. View Slide

  29. マーカーに込み入ったことをする
    こんな感じにマーカーをしたい場合は…
    33,503

    View Slide

  30. image={画像}
    tracksViewChanges={false}
    coordinate={現在地}
    >


    にchildrenを渡せばいい
    アプリではSvgのアイコンイメージをマーカーにしようとした

    View Slide

  31. Androidでchildrenが表示されない…
    iOSとAndroidで微妙に表示の扱いが違うぽい

    View Slide


  32. height={MARKER_HEIGHT}>



    AndroidはSvgコンポーネントで挟んであげる
    ※iOSはSvgいれると表示されなくなるので注意

    View Slide

  33. ReactNative所感
    ReactNative自体はReact経験者にはやさしい
    Native Bridgeコードも言うほど障壁高くない
    ただ、OSSのライブラリはインストール時にコケることが
    多く特にXcodeが辛すぎた…
    AndroidStudioはSDKバージョン周りで最初にコケた…

    View Slide

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

    View Slide