/ not for distribution About Me Yuta Katada ENECHANGE株式会社 • 2023/12〜 FlutterエンジニアとしてENECHANGEに入社 ◦ エネルギークラウド事業部/EVユニット ◦ アプリエンジニア • Swift/Kotlin修行中 • 🎾🎮🍺 @ktd_yuta GitHub: Yuta-KTD
/ not for distribution ENECHANGEでのアプリ開発について ENECHANGEではEV充電に関わるアプリを複数開発しています 基本的にそれらのアプリはFlutterを用いてiOS/Androidのクロスプラットフォーム開発をしています ENECHANGE Cloud EV[EV App]より引用: https://enechange.co.jp/e_cloud-ev/application/
/ not for distribution 弊社ではFlutterアプリ上でクラスタリングを実現するために以下ライブラリを使用 google_maps_flutter + google_maps_cluster_manager google_maps_flutter: Google提供のマップ表示公式ライブラリ google_maps_cluster_manager: GoogleMapライブラリで使用されるマーカーを、クラスタリングした状態で受け渡 すことができる Flutterでのクラスタリング実現方法
/ not for distribution クラスタリングを行うことで • ユーザーの目的にマッチした充電器をスムーズに見つけて欲しい • →ユーザーが見つけたい充電器はアプリ提供先顧客ごとに目的も変わるのでは? – ユーザーはなぜその企業のアプリを使用するのか? – 会社が充電器を提供しているのであれば、自社の充電器を使いたいから使っているのでは? クラスタリングは何のため? 特定の充電器を探しやすい仕掛けを作ろう!
/ not for distribution クラスタリングに仕込もうとしてる工夫たち ① クラスタリングするピンとしないピンに分ける 特定の充電器のみをクラスタリングせずにピン表示する <想定したユーザーの行動> 特定の種別(提供者)の充電器を使いたい →少ない操作で見つけたい 青: クラスタリングしない 赤: クラスタリングする(他社) 実装例(※) ※: 公式example( https://github.com/bpillon/google_maps_cluster_manager/blob/master/example/lib/multiple.dart )を参考に実装
/ not for distribution クラスタリングに仕込もうとしてる工夫たち ② クラスタリングをタップした時にズームする クラスタリングをタップした時に、地図を詳細(狭域)表示する 特定の条件のマーカーにフォーカスする <想定したユーザーの行動> クラスタリングをタップする →クラスタリング内のスポットに行きたい (→クラスタリングの中でも特に特定の事業者の充電器にフォーカ スしたい) クラスタリングをタップ →マップ倍率を増やす →特定のマーカーを大きく する
/ not for distribution • ENECHANGEでは今回紹介したEV充電アプリ以外にも、「エネルギーの未来を作る」という ミッションをベースに様々なプロダクトを提供しており、開発エンジニアを募集しています! • https://engineer-recruit.enechange.co.jp/ または「エネチェンジ エンジニア」で検索 一緒にエネルギーの未来を作るメンバーを募集中!