Flutterにおけるマップ/ピン描画 2024/10/24 Katada Yuta Flutterアプリケーション上での過密なピン情報の表示に挑戦

INDEX 自己紹介 ENECHANGEでのモバイルアプリ開発について ピン表示をまとめる（クラスタリング）仕組み クラスタリングはなんのため？ クラスタリングに仕込んだ工夫たち まとめ（宣伝） 1 2 3 4 5 6

3 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution About Me Yuta Katada ENECHANGE株式会社 ● 2023/12〜 FlutterエンジニアとしてENECHANGEに入社 ○ エネルギークラウド事業部/EVユニット ○ アプリエンジニア ● Swift/Kotlin修行中 ● 🎾󰝱🎮🍺 @ktd_yuta GitHub: Yuta-KTD

ENECHANGEでのモバイルアプリ開発に ついて プロダクト紹介

5 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution ENECHANGEでのアプリ開発について ENECHANGEではEV充電に関わるアプリを複数開発しています 基本的にそれらのアプリはFlutterを用いてiOS/Androidのクロスプラットフォーム開発をしています ENECHANGE Cloud EV[EV App]より引用: https://enechange.co.jp/e_cloud-ev/application/

6 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution ※ 2024/10/24時点 ENECHANGEでのアプリ開発について 膨大な充電器スポットのピン情報（全国20,654箇所※）を モバイル端末の小さい画面で表示したい クラスタリングやってみよう👌

ピン表示をまとめる仕組み（クラスタリ ング）について

8 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution 通常マップ（クラスタリングをしない） クラスタリングを適用したマップ ピン表示をまとめる仕組み（クラスタリング）について ● シンプル ● 表示ピンの詳細情 報は見えない ● ユーザーにズーム を誘導できる ● （処理も表示も）煩雑 ● ピンが重なり合って表 示情報が見えない 「マーカークラスタリング」と呼ばれる、近接するマーカーを統合する機能（※） ※: Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=ja

9 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution 弊社ではFlutterアプリ上でクラスタリングを実現するために以下ライブラリを使用 google_maps_flutter　＋　google_maps_cluster_manager google_maps_flutter: Google提供のマップ表示公式ライブラリ google_maps_cluster_manager: GoogleMapライブラリで使用されるマーカーを、クラスタリングした状態で受け渡 すことができる Flutterでのクラスタリング実現方法

10 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution Flutterでのクラスタリング実現方法 google_maps_cluster_managerは内部的にはジオハッシュ(※)を用いてクラスタリングを実現している クラスタリングの範囲の操作はジオハッシュの桁数を変えて表現している ジオハッシュとは？ 地球上の座標を分割し、文字列に落とし込んだもので、桁数によってその分割範囲を操作できる 例: ジオハッシュxn7より、xn76u の方が高精度な（狭い）範囲を表現している（※位置関係は参考） ※: https://en.wikipedia.org/wiki/Geohash xn7 xn76u

クラスタリングは何のため？ UX観点からクラスタリングの目的を再考する

12 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution クラスタリングは何のため？ 🎉クラスタリング実装完了🎉 これだけでユーザーが充電器を探しやすくなったのか？🤔

13 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution クラスタリングを行うことで • ユーザーの目的にマッチした充電器をスムーズに見つけて欲しい • →ユーザーが見つけたい充電器はアプリ提供先顧客ごとに目的も変わるのでは？ – ユーザーはなぜその企業のアプリを使用するのか？ – 会社が充電器を提供しているのであれば、自社の充電器を使いたいから使っているのでは？ クラスタリングは何のため？ 特定の充電器を探しやすい仕掛けを作ろう！

クラスタリングに 仕込んだ仕込もうとしてる工夫たち 1. クラスタリングするピンとしないピンに分ける 2. クラスタリングをタップした時にズームする

15 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution クラスタリングに仕込もうとしてる工夫たち ① クラスタリングするピンとしないピンに分ける

16 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution クラスタリングに仕込もうとしてる工夫たち ① クラスタリングするピンとしないピンに分ける 特定の充電器のみをクラスタリングせずにピン表示する <想定したユーザーの行動> 特定の種別（提供者）の充電器を使いたい →少ない操作で見つけたい 青: クラスタリングしない 赤: クラスタリングする（他社） 実装例（※） ※: 公式example( https://github.com/bpillon/google_maps_cluster_manager/blob/master/example/lib/multiple.dart )を参考に実装

17 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution クラスタリングに仕込もうとしてる工夫たち ② クラスタリングをタップした時にズームする

18 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution クラスタリングに仕込もうとしてる工夫たち ② クラスタリングをタップした時にズームする クラスタリングをタップした時に、地図を詳細（狭域）表示する 特定の条件のマーカーにフォーカスする <想定したユーザーの行動> クラスタリングをタップする →クラスタリング内のスポットに行きたい （→クラスタリングの中でも特に特定の事業者の充電器にフォーカ スしたい） クラスタリングをタップ →マップ倍率を増やす →特定のマーカーを大きく する

19 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution クラスタリングに仕込もうとしてる工夫たち ② クラスタリングをタップした時にズームする マーカーをタップした際のメソッドに以下を仕込む ・フォーカス対象の指定 ・特定倍率までズームする

まとめ

21 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution • モバイルアプリという制約の中でいかにユーザーに目的の地理空間情報にアクセスしてもらえ るか？ • その仕組みの一つとしてマーカークラスタリング機能を導入！ • 弊社ではクラスタリングを通して何ができるのか？何がしたいのかを考察した結果👉 – クラスタリングをしないピンをあえて作る – クラスタリングをタップした時の挙動を工夫 まとめ 上記機能を随時追加予定！今後の反響に期待...！

22 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential / not for distribution • ENECHANGEでは今回紹介したEV充電アプリ以外にも、「エネルギーの未来を作る」という ミッションをベースに様々なプロダクトを提供しており、開発エンジニアを募集しています！ • https://engineer-recruit.enechange.co.jp/ または「エネチェンジ エンジニア」で検索 一緒にエネルギーの未来を作るメンバーを募集中！

エネルギーの未来をつくる CHANGING ENERGY FOR A BETTER WORLD