Flutterで保育園のマップアプリを作ってみた
はじめに
先日初めてFlutterでマップアプリ 「保育園のちず」 をリリースしました。
どのようにして「保育園のちず」を作ったのかまとめようと思います。
対象の読者
- Flutterでマップアプリを作ってみたい方
- Flutter x Firebaseでアプリを作ってみたい方
どんなアプリ？
自宅周辺の認可・認可外保育園を検索できるマップアプリです。全国約2万件以上の保育園を掲載しています。
どうして作ろうと思った？
職場で産休に入る方を見送った後にふと、保活も今後始めるのかなぁと何気なく思いました。そういえば保活って大変、大変って聞くけど何が大変なのか自分には分かりませんでした。何が大変なのか知りたいそんな好奇心がきっかけでした。
事前調査
保活の実態調査
まずアプリを作成する前に保活に関する調査を行いました。厚生労働省の『保活』の実態に関する調査を閲覧し調査しました。
保活の実態調査結果
調査の結果、保活は多くの人が大変だと感じている事と 情報収集 が苦労や負担だと感じている事が分かりました。
出典：「保活」の実態に関する調査の結果 P.8（https://www.mhlw.go.jp/file/06-Seisakujouhou-11900000-Koyoukintoujidoukateikyoku/hokatsu-chousa_1.pdf）
出典：「保活」の実態に関する調査の結果 P.9（https://www.mhlw.go.jp/file/06-Seisakujouhou-11900000-Koyoukintoujidoukateikyoku/hokatsu-chousa_1.pdf）
保活の情報収集方法調査
次に既存の情報収集方法は何なのか？調べてみる事にしました。
厚生労働省の「『保活』・『保育制度全般』についての御意見」の募集結果を閲覧し調査しました。
保活の情報収集方法調査結果
主に2つの情報収集方法がある事が分かりました。
- 市役所に行って情報収集
- インターネットによる情報収集
出典：「『保活』・『保育制度全般』についての御意見」の募集結果 P.4（https://www.mhlw.go.jp/file/06-Seisakujouhou-11900000-Koyoukintoujidoukateikyoku/hokatsu-chousa_1.pdf）
出典：「『保活』・『保育制度全般』についての御意見」の募集結果 P.5（https://www.mhlw.go.jp/file/06-Seisakujouhou-11900000-Koyoukintoujidoukateikyoku/hokatsu-chousa_1.pdf）
出典：「『保活』・『保育制度全般』についての御意見」の募集結果 P.6（https://www.mhlw.go.jp/file/06-Seisakujouhou-11900000-Koyoukintoujidoukateikyoku/hokatsu-chousa_1.pdf）
アプリで解決する事
調査結果から、 情報収集 絞ってアプリを作成すると決めました。情報収集を楽に簡単にできるようする事を目指します。したがって以下の2点を作りきってリリースをすると決めました。
- 現在位置から周辺の保育園検索
- 保育園に電話で問い合わせ
開発
Flutterを使ったマップアプリの作成までの流れを紹介します。
また保育園のちずのアーキテクチャを紹介します。
保育園情報の収集
保育園の情報は各都道府県や自治体の公式HPから集めました。47都道府県分すべて集めました。開発の中で一番ここがしんどかったです。Cloud Firestoreに保育園情報を格納しました。各自治体からの保育園情報CSVを整形して、Firebase Admin SDKを使いバッチ書き込みを行いました。
CSVで保育園情報を提供してくれる場合はさほど苦労はしませんが、PDFやWEBでの情報提供のみの場合はしんどいです。PDFからCSVへの変換やWEBの情報からCSVへの変換等苦労がありました。
アプリ開発
開発は以下のステップに分けて行いました。
- GoogleMapの表示
- GoogleMapにマーカーを表示
- マーカーをタップしたら保育園情報を表示
- FirestoreのデータでGoogleMap上にマーカーを表示
- 電話での問い合わせ
GoogleMapの表示
マップの表示にはgoogle_maps_flutterを使用しました。Readmeの通りに実装すればマップ表示はできると思います。
このパッケージの使い方やどんな事ができるのかざっくり把握するのに動画をいくつか見て学習を行いました。
- How to Use Google Maps in Flutter Apps - Part 1
- #Google' Flutter Tutorial - Google Maps (coderzheaven.com)
GoogleMapにマーカーを表示
公式のサンプルコードを参考に実装を行いました。
特にハマったところはありませんでした。
マーカーをタップした後はshowModalBottomSheetを使って保育園情報を表示しました。
FirestoreのデータでGoogleMap上にマーカーを表示
任意の場所にマーカー表示する事はできるようになったので、Firestoreのデータを取得してマーカーを表示してみます。Firestoreのデータ取得はFirebase for Flutterを参考にしました。
このあたりの動画も参考になると思います。
- Flutter - Retrieving markers from Firestore
- Flutter Google Maps + Firestore Geolocation - Build the next Uber?
電話での問い合わせ
url_launcherを使用しました。
アーキテクチャ
Cloud Firestore、Firebase、Google アナリティクスを使用しています。
さらにCrashlytics、Performance、を使用して、アプリケーションの全体的な品質を保証しています。
保育園情報が間違っている可能性もあると思い、ユーザーから報告できる仕組みを導入しています。どれだけのユーザーが報告してくれるかも分からないので最初は、Google Formを使って簡易的に実装しました。ある程度ユーザーが報告してくれるような感じになったら、この部分も作り込もうと思っています。
さいごに
保活の情報収集で悩んでいる方達に向けて 保育園のちず というアプリを作るまでの過程を書いてみました。Flutterでマップアプリを作る際の参考にしていただけたら嬉しいです。
もしよかったら触って見てください。
▼ iPhoneの方はこちら
▼ Androidの方はこちら
Discussion