マップを速く表示するために

※ 下記はGeminiによる本スライドの要約です

課題：ポート増加に伴うマップ表示の遅延
LUUPは電動マイクロモビリティのシェアリングサービスで、アプリ起動時に表示されるマップが重要な役割を担っています。 当初は約50箇所だったポート数が急増し、全ポート情報を読み込む方式では表示に著しい遅延が発生するようになりました。 これによりユーザーが利用を諦める可能性が懸念されました。

対策：必要な情報のみを取得・描画
この課題に対し、以下の2段階で対応しました。

ポート情報の取得:
課題：位置情報や車両数など、時々刻々と変化するポート情報を高頻度で取得する必要がありました。
対策：Geohashという技術を活用し、DBレコードにGeohash情報を含めることで、アプリは現在画面に表示されている範囲に必要なポート情報のみを効率的に取得できるようにしました。

アプリでのポート描画:
課題：Google Maps SDKを利用していましたが、大量のピンを描画するとパフォーマンスが低下します。
対策：画面内に表示されているピンのみを描画し、画面外に出たピンはマップから削除することで、描画負荷を軽減しました。
これらの工夫により、ポート表示速度は改善されました。

さらなるポート増加と継続的改善
しかし、2023年5月時点で約3,000箇所だったポート数は、現在13,000箇所以上にまで増加しています。 パフォーマンスを維持・向上させるため、以下の取り組みを進めています。

計測と評価: ポートが表示されるまでの時間をSLI（サービスレベル指標）として設定し、SLO（サービスレベル目標）を定義。 ダッシュボードで状況を可視化し、客観的な評価を可能にしました。

今後の対策: ポート情報のキャッシュや、ローディング表示の改善、ユーザーにとって真に必要なポートのみを表示するUI/UXの改善などを検討中です。
LUUPは今後もポート数の増加が見込まれるため、継続的なパフォーマンス計測と改善を通じて、ユーザー体験の維持・向上を目指しています。

Transcript

1. 機密・専有情報 株式会社Luupによる個別の明示的な承諾を得ることなく、この資料を使用することを固く禁じます。 マップを速く表示するために 大坪 敦 (@tsuboyan) 2025/05/22 - Mobility Night #3
2. Luup, Inc. - Confidential and Proprietary 2 ⾃⼰紹介 2020.04~ • 新卒⼊社 • iOSエンジニア 2023.11~ • iOSエンジニア 株式会社Luup Software Development 部 iOS エンジニア ⼤坪 敦 (@tsuboyan)
3. Luup, Inc. - Confidential and Proprietary 3 今日のイベントテーマは “マップビジュアライゼーショ ン”
4. • LUUP のマップが抱える課題 • 課題の解決に向けて • 今後の話 今日の内容
5. Luup, Inc. - Confidential and Proprietary 5 LUUPについて
7. 街じゅうに設置された「ポート」を起点に アプリひとつで好きな場所で乗り降りできる、 電動マイクロモビリティのシェアリングサービス
8. • アプリを起動するとまずマップ画面が表示される ◦ ホーム画面に相当する重要な画面 LUUPアプリについて
9. LUUPアプリについて • アプリを起動するとまずマップ画面が表示される ◦ ホーム画面に相当する重要な画面 • マップから出発・返却ポートを選択して、 予約することで、車両に乗ることができる (予約せず車両のQRをスキャンして乗ることも可)
10. Luup, Inc. - Confidential and Proprietary 10 LUUP の マップが抱える課題
11. ポートの増加によって、マップの要素の読み込み時間が増加😥 • サービス開始当初は約50ポート ◦ しばらくの間は、全件のポートを取得しても問題なかった • 日を追うごとにポート数は増加し、表示に時間がかかるように ◦ ポートの表示に何秒、何十秒とかかってしまうとユーザが利用を諦める 可能性も
12. Luup, Inc. - Confidential and Proprietary 12 ポートを速く 表示するために 🤔
13. 1. ポート情報の取得 • 位置情報 (緯度経度) • 停車可能な車両の種類、許容量 • 停車中の車両の台数 • 割引情報など 2. ポートの描画 • ピンの種類・画像の決定 • アプリのフィルター設定による絞り込み • Google Maps SDKのピン描画APIの呼び出し ポートピンの表示に必要な 2ステップ
14. 1. ポート情報の取得 • 位置情報 (緯度経度) • 停車可能な車両の種類、許容量 • 停車中の車両の台数 • 割引情報など 2. ポートの描画 • ピンの種類・画像の決定 • アプリのフィルター設定による絞り込み • Google Maps SDKのピン描画APIの呼び出し ポートピンの表示に必要な 2ステップ
15. 1. ポート情報の取得 • 位置情報 (緯度経度) • 停車可能な車両の種類、許容量 • 停車中の車両の台数 • 割引情報など 2. ポートの描画 ポートピンの表示に必要な 2ステップ 時事刻々と変化する
16. • 時事刻々とポート情報が変化するため、高頻度で取得する必要がある
17. • 時事刻々とポート情報が変化するため、高頻度で取得する必要がある • LUUPアプリでは、アプリの起動直後とマップの指によるドラッグ後などに最 新のポートを取得しています
18. • 高頻度で取得するため、一度に取得するポートの数はなるべく少なくしたい • はじめは全ポートを取得していたが、これを高頻度で実施するのは無理
19. • 高頻度で取得するため、一度に取得するポートの数はなるべく少なくしたい • はじめは全ポートを取得していたが、これを高頻度で実施するのは無理 表示に必要なポートのみを取得・描画する
20. 表示に必要なポートとは 今画面に表示されている領域 + αの範囲
21. Geohash を活用 • Geohash は、地図を格子状に分割し、その1区画を短い文字列で表現できるもの • たとえば、東京駅周辺は Geohash 6桁では「xn76ur」と表現される 表示に必要なポートだけをどうやって取得するか
22. 表示に必要なポートだけをどうやって取得するか • ポートのDBレコードにGeohashを含めている • アプリからは、マップの表示に必要な Geohash のクエリを発行することで、必要なポート情報を取 得する ポート名 ポートの住所 緯度 経度 … Geohash 東京駅Aポート 東京都hoge 35.6 139.6 … xn76ur 東京駅Bポート 東京都fuga 35.4 139.3 … xn76ur … … … … … … 大阪駅ポート 大阪府piyo 34.9 135.8 … za65ab
23. 表示に必要なポートだけをどうやって取得するか • ポートのDBレコードにGeohashを含めている • アプリからは、マップの表示に必要な Geohash のクエリを発行することで、必要なポート情報を取 得する ポート名 ポートの住所 緯度 経度 … Geohash 東京駅Aポート 東京都hoge 35.6 139.6 … xn76ur 東京駅Bポート 東京都fuga 35.4 139.3 … xn76ur … … … … … … 大阪駅ポート 大阪府piyo 34.9 135.8 … za65ab
24. ポートピンの表示に必要な 2ステップ 1. ポート情報の取得 • 位置情報 • 停車可能な車両の種類、許容量 • 停車中の車両の台数 • 割引情報など 2. アプリでのポートの描画 Geohashを用いて、必要なポートだけを取得 できるように
25. ポートピンの表示に必要な 2ステップ 1. ポート情報の取得 • 位置情報 • 停車可能な車両の種類、許容量 • 停車中の車両の台数 • 割引情報など 2. アプリでのポートの描画 • ピンの種類・画像の決定 • アプリのフィルター設定による絞り込み • Google Maps SDKのピン描画APIの呼び出し
26. アプリでのポートの描画 • マップには Google Maps SDK を利用 ◦ ポートピンを大量に表示するとその分、描画パフォーマンスも落ちる • 画面内にあるピンのみを描画して、画面外となったピンをマップから削除することでパフォーマンス の低下を抑えている
27. ポートピンの表示に必要な 2ステップ 1. ポート情報の取得 • 位置情報 • 停車可能な車両の種類、許容量 • 停車中の車両の台数 • 割引情報など 2. アプリでのポートの描画 • ピンの種類・画像の決定 • アプリのフィルター設定による絞り込み • Google Maps SDKのピン描画APIの呼び出し Geohashを用いて、周囲のポートだけを取 得できるように 地図画面領域内だけ描画するように
28. これらの工夫により、無事にポートの表示が速くなりました！めでたし 👏 ユーザ様からも ``ポートの表示が遅かったのが、快適になりました!`` という声が届いた🙌
29. Luup, Inc. - Confidential and Proprietary 29 が、しかし
30. この実装を取り入れた 2023年5月頃 全国のポート数：約 3000 2023.5.1, 3,000ポート突破と東京 /大阪/京都でのポート数 No.1（※1）を記念した「 Wでもらえ LUUP」キャンペーンを開催 | Luup（ループ） | 電動キックボードシェア /シェアサイクルアプリ , https://luup.sc/news/2023-05-01-campaign/
31. 現在は...
32. 1 LUUPとは 展開エリア 全国ポート数 13,000 箇所以上 展開都市 東京 横浜 神⼾ 京都 ⼤阪 名古屋 宇都宮 東京 ⼤阪 横浜 京都 名古屋 神⼾ 宇都宮 ※2025年4⽉時点 広島 広島 仙台 仙台 福岡 福岡 etc. 北九州
33. ポートが増えるのは嬉しいことだが、対応しなければ じわりじわり、とパフォーマンスが落ちる
34. Luup, Inc. - Confidential and Proprietary 34 パフォーマンス 維持・向上に向けて
35. まずは、ポートが表示されるまでの時間を計測・評価できるように
36. ポートが表示されるまでの時間を計測 アプリが起動してから、ポートが表示されるまでの時間を計測して、記録するように アプリ起動 ポートの取得 ポートの描画 ポートの表示にかかる時間 (t)
37. 計測した時間を評価するために
38. 計測した時間を評価するために LUUP では、SREチーム主導でアプリの起動時間や操作にかかった時間を計測・評価できるように する取り組みを進めている 評価したい対象の値について、SLI, SLOを定義 • SLI（Service Level Indicator）：サービスのパフォーマンスを測るための定量的な指標 • SLO（Service Level Objective）：SLIに基づいて定めるサービスの目標値 今回の場合についても、ポートが表示されるまでの時間 (t) を SLI として設定した
39. 計測した時間を評価するために • ポートの表示までの時間を確認できるダッシュボードを作成 ◦ プラットフォームやアプリバージョンごとに色分けし、特定の環境でパフォーマンスが悪 化していないかも確認できるように ポート表示 にかかる 時間 (t)
40. パフォーマンスの変化を客観的に計測できるように 🎉
41. • ポート情報のキャッシュ • マップやポートピンの UI / UX の改善 ◦ ポート情報が読み込み中であることがわかるように ◦ ユーザにとって必要なポートだけが表示されるように さらなる対策を検討中
42. 課題：ポート数が増加しており、マップに表示のパフォーマンス低下が問題に 対策： ◦ ポートを取得する範囲を限定 (geohash の活用) ◦ 画面に見えているポートのみ描画、これ以外を削除 ◦ ポートの表示時間をSLIとして計測し、評価・改善できる状態に 今後： ◦ ポート数はますます増加する ◦ パフォーマンス計測を継続し、適度にポート情報をキャッシュできるようにしたり、 UI/UXを改善することでユーザ体験の維持・向上を図りたい まとめ
43. このLTに関連する記事は、 Luup Developers Blog に掲載中！随時更新中です！ アプリの地図上へたくさんのピンを描画する技術 https://zenn.dev/luup_developers/articles/ios-moro-20231215