Next.js App Router+Vercel+Supabaseにて、花粉情報マップ「Hi-Pollen」をオープンβリリースしました
はじめに
タイトルの通りですが、個人開発として、花粉情報マップ「Hi-Pollen」をオープンβリリースしました。ウェザーニュースのポールンロボで観測された花粉情報を地図上で確認できるWebアプリケーションです。
株式会社ウェザーニューズ御中、お世話になります。
キャプチャイメージは以下。
利用データ
・ウェザーニュースのポールンロボで観測された花粉情報 ・ 国土地理院タイル
主な利用技術
フレームワーク
・Next.js App Router
主要npmパッケージ
・maplibre-gl
・react-map-gl
・pmtiles
・supercluster
・prisma
ホスティング
・Vercel
DB
・Supabase
構成図概略(DNSは省略)
やったこと
・ベースとなる地図情報の表示
・東京都の建物の表示(気になったので)
・花粉情報表示・クラスタリング
学び
・Prismaは最高。
・しかしupsertManyがないので自作する必要あり。
・Prismaの返すPromiseはSQL実行前の状態。Resolveして初めてSQL実行される。
・@updatedAtには@default(now())が必要。ないと行作成時に値が入らない。
・executeRawにて直にSQLを実行すると@updatedAtは動かないので更新処理をSQLに含む必要あり。
・maplibre-glは偉大。
・react-map-glでわからないことがあればmablibre-glでの実装を見て変換するのが良い。(おそらくすべてのラッパーライブラリはそう)
・Next.jsとReactについては、なにもわからない。
改善点・懸念点
・花粉情報(x/㎠)をクラスタリングした際に加算して表示しているが、これは正確ではない。本来は面積当たりの総量を出して再計算すべき。
⇒国土交通省のデータを参照して再計算する予定。
・データ更新頻度を上げたいが、VercelのCron JobsはHobby版では1日1回実行のみ
⇒課金してPro版にするか、代替を探すか
・花粉情報の予測をしたい。しかし、法的観点から違法性があるのではないか。
⇒気象庁曰く
花粉の飛散や、植物の開花などは大気の諸現象ではありませんので予報業務許可の対象外です。
と以下に記載があるので、予測はして良いのか？ わからない。
終わりに・余談
もともと3Dタイルや地図描画に興味があったので、今回試しに作成してみることにしました。とある交通情報のチャレンジに出す予定だった個人開発の地図アプリケーション(期日に間に合わなかった)を本アプリケーションとしてリプレイスしました。何事もやってみるものですね。
npmパッケージが充実していてとても助かりました。
改修を行っていく予定ではありますが、私の都合もあり段階的になると思います。ご了承ください。
俺たちの花粉症との戦いはこれからだ！
参考文献
Discussion