207 Tech Blog

テクノロジーで物流を変える 207 (ニーマルナナ) 株式会社のテックブログ

Mapboxで配達地図を改善していく話

207でソフトウェアエンジニアをやっている岸田 (id:ryo-rm)です。 207では配送員の方向けのアプリ TODOCUサポーター を提供しており、地図のSDKには Mapbox を使っています。

2021年の7月ごろにGoogle マップ / Apple純正マップからMapboxへ移行しました。

今回はMapboxを採用した経緯と、TODOCUサポーターで行っていること、今後の展開について話そうと思います。

移行した経緯とMapbox導入以前のTODOCUサポーターの課題

もともとTODOCUサポーターには課題があり、Android版とiOS版でマップの表示が異なっていました。

TODOCUサポーターはReact Native製アプリなので react-native-maps を利用しており、デフォルト設定のまま地図を表示していました。そのため、AndroidではGoogle マップiOSではApple純正マップ(MapKit)を表示している状況でした。

Apple純正のマップも悪くはないのですが、

  • AndroidiOSでアプリの地図の見た目が大きく異るので統一したい
  • Google Style Generator を使ってスタイルの変更ができない
  • 将来的に地図をいろいろカスタムしたい

といった課題があり、Apple純正マップからGoogle マップへ統一するか、別の地図SDKに移行するかという状況だったのでMapboxを採用しました。
特に "将来的に地図をいろいろカスタムしたい" という点は、リリース後すぐにカスタマイズする機会が訪れました。

Mapboxへ移行後と、地図の編集

アップデート後、「以前と比べて細い道がなくなった」という問い合わせがよく来るようになりました。

チャネルトークの問い合わせのスクリーンショット
チャネルトークの問い合わせ

地図のスタイルは Mapbox Streets Japan をベースにしていて、調査してみると路地などの細い道がなくなっており、配達するには不便な状態になってしまっていました。

Mapboxの方に問い合わせてみると、詳細な道だけのデータソースが存在し、そちらをレイヤーとして表示すると良いという答えを頂いたので早速カスタマイズ。 道の幅も地図のズーム率で可変になって道幅がわからなくなっていたので、同時にカスタマイズしました。

カスタマイズしている様子
カスタマイズしている様子。試行錯誤しながら道の幅を変更した

福富さん( @fukutomy ) と一緒に半日ほど地図のカスタマイズを勉強して公開し、問い合わせをしてくださった方に返信したところ、早速喜びの声が!これにはテンションが上がりました。

頂いた喜びの声。以前にもまして随分見やすくなった。
頂いた喜びの声

今後

207では スキマ便 という配送事業をおこなっており、配送ルートなどを地図に書いたりしています。

例えば熟練者が描いた配送ルートを初心者の配送員の方にアプリ上で表示して配送効率の均一化をする、等を思い描いています。

おわりに

最後に、207ではソフトウェアエンジニアやGISに興味がある方などを募集しています! ちょっと興味あるなと思った方はぜひ以下のリンクからチラ見おねがいします!!

www.notion.so