もともと物件が好きだったのですが、東京都建築物環境計画書のデータが素晴らしかったのでそちらをもとに物件サイトを作ってみました。

作ったもの:
https://placeof.app

概要

• 東京都建築物環境計画書のサイトに掲載されている物件データを、見やすいように一覧化し検索できるようにする。
• 詳細ページでは、国土数値情報や国土地理院などの地図情報も見られるようにする
• 物件を通り過ぎた人や住んでいる人が写真を投稿出来るようにする
• その物件の構造物的スペック情報・地図情報・住み心地情報を組み合わせて良い感じの物件サイトにしていきたい

東京都建築物環境計画書とは?

東京都の新築マンション等の環境に関する情報が公表される制度です。もともとは環境分野の何らかの要請で作られた制度だと思われますが、環境分野に関わらず非常に細かい物件のスペック情報が載っています。

東京都建築物環境計画書サイト:
https://www7.kankyo.metro.tokyo.lg.jp/building/area_select.html

この情報に見慣れてくると、建築雑誌「新建築」に掲載されている物件スペック情報が物足りなくなるような不思議な感覚！？になり、ひとまずこのデータに地図情報ぐらいを組み合わせてみたくなりました。

ミラノの"Bosco Verticale"なりマンハッタンの"One Manhattan Square"なり世界の有名物件の不動産屋のサイトを見ていてもここまで詳しく物件スペック情報が掲載されてはいなく、世界的に見ても相当面白いデータだと思います。

(参考)

新建築のスペック情報の例:
https://data.shinkenchiku.online/articles/SK_2018_02_078-0/

Bosco Verticaleで一番好きなサイト:
https://www.jamesedition.com/real_estate/milano-italy/exclusive-apartment-inside-the-bosco-verticale-11290346

One Manhattan Squareで一番好きなサイト:
https://www.serhant.com/new_developments?tab=current&building_id=41

構成

Nuxt.js + Typescript + Firestoreで作りました。ひとまずスタティックなサイトなのでSSGしたものをFirebase Hostingに載せています(ISRっぽいことをしたいのですが、上手く進まなければCloud Runに移行してSSRする予定です)。
地図情報はOpenLayersで描画しています。Leafletと出来ることはほぼ変わらないと思いますが、描画速度が少し早い気がしました。
東京都からのデータ取得部分はGCPのCloud TasksやCloud Functionsを使いました。
検索部分はn-gramしたデータでFirestore使ってます。難しい集約クエリ使わないならば今のままで良いかなと思ってます。検索結果数が表示できないのは残念なのですが、そもそも検索結果数が多すぎて既存の不動産サイトが使いにくい気もしているのでひとまず良いかなという感じです。

スクレイピング

東京都のオープンデータカタログ にはデータが無かったので、ひとまずスクレイピングしました。
スクレイピングする際は東京都のサーバーに負荷を掛けないようにCloud Tasksで数分間に1回程度走る設定にして、一度取得したものはCloud Storageに入れました。

パース処理が非常に面倒くさかったので、もし同じ作業をしてみたい方がいれば、ひとまず全データを先に取得してしまったほうが良いかと思います。

地図情報

↑で取得した物件データ周辺の地図情報をtophapみたいにしたく、ハザードマップ等々をopenlayersで表示しました。

道路情報

引っ越して良かった街は道路が整備されていた感覚があるので、道路情報周りを見やすくしたく思いました。
https://qiita.com/frogcat/items/3d795c5cbe026c372bf4
を参考に「地理院地図Vector（仮称）提供実験」のデータを使って、ひとまず「道路の方角」や「幅員3m以上の道路」などを可視化してみました。個人的には、「4m以上の道路」のデータが欲しかったのですが、色々な経緯があり幅員3m以上のデータしかないようでした。
いずれにせよ、この作業を通じて、道路の整備状況でその自治体が分かる感覚が深まっています。知らない土地に引っ越すことになるときのことを想定して、色々工夫してみたいなと思ってます。

明治期系のデータ

国土地理院のデータを見ていて、「明治期の湿地」が面白そうだったので、こちらも地図に追加しました。
この地図タイルはPNGタイルとして配信されているため、クリックイベント時に情報をポップアップさせるために下記を参考に処理を追加しました。
https://gsj-seamless.jp/labs/datapng/gridpngtile.html

明治期のデータが案外その街を説明することが分かったので、引き続き色々な明治系のデータを追加していきたいなと思っています。

用途地域、地価、学区

用途地域、地価、学区などの情報も一覧で見たかったため、「国土地図情報ダウンロードサービス」から適宜取得しました。その際に非常に助かったのが、こちらの一括DLツールです。
https://qiita.com/mits003/items/2c8c77514a09aee99cc0

これらのデータをタイル形式でgithub pagesで配信したく、色々加工作業が必要でした。ただ、ローカルのMacでは一晩掛けても終わらなかったので、しょうがなく大きめのインスタンスを数時間借り下記のような作業をしました。よく考えればGCP上で作業しているので、そのままCloud Storageにコピーして、それの公開権限を変えれば良かった気もしますが、ひとまずこんな感じのことをしました。

//google cloud storageにコマンド一つでアクセスするためにもろもろ設定
gcloud init

//https://cloud.google.com/compute/docs/disks/local-ssd
//ローカルSSDをマウント
lsblk 
sudo mkfs.ext4 -F /dev/nvme0n1
sudo mkdir -p /mnt/disks/workspace
sudo mount /dev/nvme0n1 /mnt/disks/workspace
sudo chmod a+w /mnt/disks/workspace
echo UUID=`sudo blkid -s UUID -o value /dev/disk/by-id/google-local-ssd-0` /mnt/disks/workspace ext4 discard,defaults,nofail 0 2 | sudo tee -a /etc/fsta
b

//必要なパッケージをインストール
sudo apt-get update && sudo apt-get install git make g++ libsqlite3-dev zlib1g-dev python3-pip wget unzip libnss3

//tippecanoneはローカルビルド
git clone https://github.com/mapbox/tippecanoe.git
cd tippecanoe
make -j
sudo make install

//nodeインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
source ~/.bashrc
nvm install v14.18.2 //ship2jsonのnodeのversionは16系だと動かなかった
nvm use v14.18.2

//ship2json 
npm install -g shapefile

//google cloud storageから国土数値情報のダウンロードファイルを持ってくる
gsutil cp gs://{BUCKET_NAME}/{FILE_NAME} {OUT_PUT_DIR}

//shapeファイルをgeojsonにする
find . -name "~~*.shp" -print0 | xargs -0 -I {} shp2json --encoding SHIFT-JIS {} >> geojson/~~.geojson

//geojsonからタイルを作る
tippecanoe --drop-densest-as-needed --maximum-tile-bytes=10000000 --no-tile-compression -z19 -Z10 -e ${OUTPUT_DIR} -l ${LABEL} geojson/*.geojson

//作ったタイルをgithubにpush
for d in */ ; do
    for n in "$d"*; do
        echo "$n"
        git add "$n"
        git commit -m "$n"
        git push origin master
	//git prune 
    done         
done

ElasticSearchだとそのままタイル形式で配信出来るみたいなので、結構便利かもです。https://qiita.com/Kanahiro/items/5a05baf4f8d1ebc5e2c2

おわりに

不動産の物件=構造物みたいなサイトにしていきたいです。