東京都建築物環境計画書のデータで物件サイトを作ってみた

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

作ったもの:

概要

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

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

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

東京都建築物環境計画書サイト:

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

新建築のスペック情報の例:

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

(参考)
Bosco Verticaleで一番好きなサイト:

One Manhattan Squareで一番好きなサイト:

構成

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で表示しました。 地図ページ

道路情報

引っ越して良かった街は道路が整備されていた感覚があるので、道路情報周りを見やすくしたく思いました。

明治期系のデータ

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

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

用途地域、地価、学区

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

これらのデータをタイル形式で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