推しアイデア
桜が減っている実態を知る人は少ない。写真・場所・時間を投稿してもらい、桜の現在地を可視化できないか。楽しむ行為が、自然と桜の記録になる仕組みを目指した。
サクラアップ
―
開花しているサクラを記録に残そう！
作った背景
サクラの高齢化や温暖化で、サクラが減少しています。少なくなったサクラを維持したい。
推し技術
Overpass API (OpenStreetMap) 桜の座標を他のAPIでは取得が難しいところ、Overpass APIで座標を取得できた。
プロジェクト詳細
アプリ名:サクラアップ
アプリ概要: ユーザーが桜の写真・場所・時間を投稿し、開花状況をリアルタイムで地図上に共有するWebアプリ。投稿が蓄積されることで、桜の現在地を可視化し、記録・保全にもつなげる。
サクラの現状 温暖化と高齢化で桜が減っていく...
対策 サクラを場所と時間と一緒に、写真で記録する。
機能 写真を時間と場所を一緒に投稿。
時間と場所を写真で確認可能
いいね機能、写真でお気に入りの写真登録
サインアップ・ログインで投稿
技術
- 使用したマップ
表示するマップ→OpenStreetMap (OSM)
桜の木の座標を取得：Overpass API
Googleマップが適切ではない理由
桜に関する情報を全て持ってきてしまう
- react-leaflet-clusterを使用
マーカークラスターを使用すると、密集したマーカーをクリックやズームで、収束、展開することができる。
React Leaflet は、React.js フレームワークと Leaflet ライブラリを組み合わせた地図コンポーネントの作成を容易にするためのライブラリです。この記事では、多数のマーカーを扱う際に便利なマーカークラスターを react-leaflet-cluster を使って実装していきます。
- Debounce処理
地図を動かすためにAPIを叩くと負荷がかかるため、「動きが止まって3秒後に実行する」という負荷軽減の設計パターンを取り入れている。
今回の桜APPでは`setTimeout` を使って処理をしている →setTimeoutは 「指定した時間が経った後に、一度だけ処理を実行する」 関数
技術スタック フロントエンド:React 18 / TypeScript / Tailwind CSS 地図 : Leaflet + React-Leaflet / OpenStreetMap サクラスポットの取得: Overpass API ビルド: Vite
