見出し画像

待機児童を可視化するサイト作り始めた(企画〜地図のフィージビリティスタディまで)

田畑浩平 | Flutter Engineer

先日、Twitterを見ていたらこんなツイートが。

正直、「家の購入」という人生最大級の意思決定を下すことに大いに関連しうる情報が、行政から「正確に」「わかりやすく」提供されていないことには憤りしか感じませんし、👇の退職エントリにおいて

画像1

と書いたように、認証・認可保育園のスクレイピング&可視化したサイトを作ろうとは考えていたので、その練習として地方別・都道府県別・市区町村別に待機児童数を可視化するサイトの制作に挑戦し始めました。

サービス設計

サービス開発をはじめるにあたり、

・「誰のために何を作ろうとしているか」をいつでも確認できるようにする
・デザイナー、エンジニアなどの協力してくれる人達と
　・サービスの目的を共有しやすくする
　・成果物のイメージの共有しやすくする
ために

・解決しようとしている問題は何か
・ユーザーペインは何か
・どのようなアプローチで解決しようとするか
(メモ左側)をまず書き出し、

それに加えて
・画面イメージ(メモ右上)
・操作イメージ(メモ右下)
などを書き出しました。

画像2

フィージビリティスタディ

なんとなくではありますが、作りたいもののイメージが固まってきました。
次にするべきは「そもそも、これは実現可能なアイディアなのか？」の確認です。

・そもそも、既知の技術で実現できるのか？
・そもそも、アイディアを実現するためのデータは取得できるのか？

あたりを検証していきます。

画像3

ざっと考えた感じ
・地図の図形情報、位置情報のデータ
・それを描画するための技術
・市区町村ごとの待機児童のデータ

が手に入れば実現できそうです。

地図描画のフィージビリティスタディ

描画技術

まずは、「地図を描画できて安価で仕える技術があるか」「描画のためのデータが入手できるか」をペアで検証していきます。
(両方が入手できなければ実現できないため)

まずは描画技術の検証から。
最初は、「javascript 地図 描画」という検索ワードで調べていたのですが、Google Map APIばかり出てくるので、

「javascript 地図 データビジュアライズ」という検索ワードで検索し直してみます。

検索結果をざっくり見てみましたが、D3.jsというJavaScriptのライブラリを使えば描画は実現できそうです。
(+日本語、英語の情報が多いので詰まっても解決できそうです。)

描画用データの入手

似た内容に取り組んだ方々の知見がQiitaに投稿されていたので見てみると、Shapefile/GeoJSON/TopoJSONなる形式のファイルが入手できれば、やりたいことは実現できそうです(D3.jsはGeoJSON/TopoJSONに対応しており、それらはShapefileから変換できるらしい)。

Shapefileは国土交通省国土政策局国土情報課が日本の全市区町村のデータを公開してくれており、

Shapefile→GeoJSON/TopoJSONの変換はQGISという無料アプリで実現できそうなので、どちらも入手しておきます。

データの検証(スピード優先で雑に)

ここまでで
・国交省による市区町村データ
・国交省のデータをD3.jsに対応したデータに変換できるQGISアプリ

が入手できましたが、これらは
・壊れていないデータで
・ちゃんと目的のファイル形式に変換できるアプリ

なのでしょうか。
D3.jsで実際に描画してみても良いですが、僕はiOSアプリ開発が本職なので、D3.jsを使った検証を行うと、検証自体に時間がかかってしまいます。

他に楽で早い方法がないか色々調べてみると、GitHubにGeoJSON/TopoJSONをアップロードすると、表示されるようです。

というわけで、GeoJSON/TopoJSONをそれぞれアップロードしてみます。

無事、GitHub上でGeoJSON/TopoJSONが表示され、国交省のデータ・QGISに問題がなさそう(GitHubは表示にD3.jsを使っていないので確実に問題がないかはまだわからない)なことがサクッと確認できました！

まとめ

ここまでで「地図の描画ができそう」「自分で実装できなくはなさそう」ということがわかりました。

次は実際に自分で実装できるかを検証していきたいと思います。

サポートする代わりに個人開発はじめましょ！ iOS👇 https://developer.apple.com/jp/support/enrollment/ Android👇 https://play.google.com/apps/publish/signup/