⛅ アメダスマップ (AMeDAS Visualizer)

気象庁の公開データを利用して、日本全国のアメダス観測所における現在の気象状況（気温、降水量、風向・風速、日照時間、積雪深、湿度）を地図上に可視化するWebアプリケーションです。

Nuxt 4 と Leaflet を使用して構築されており、SPA（Single Page Application）として設計されています。スマートフォンでは地図を最大限に活かすボトムシート、PCではサイドバーと、画面幅に応じてUIが切り替わります。

🌐 デモサイト (GitHub Pages)

✨ 主な機能

🗺️ 多彩なデータの可視化

以下の気象データを地図上で確認できます。データ種別を切り替えると、地図上のマーカーの色や大きさが変化し、状況を一目で把握できます。

• 🌡️ 気温: 暑い場所・寒い場所をグラデーションで表示
• ☔ 降水量: 10分間 / 1時間 / 3時間 / 24時間の雨の強さを色とサイズで表現
• 🍃 風速: 風の強さを色とサイズで表現
• ⛄ 雪: 積雪深と6/12/24時間の降雪量を表示
• 💧 湿度: 空気の乾燥具合を表示
• ☀️ 日照時間: 1時間あたりの日照を表示

種目を選んでから期間を選ぶ2段階の切り替えになっており、目的のデータへ素早く到達できます。

🔍 地点検索

地点名は漢字でも読み仮名でも検索できます（例: 「名古屋」「なごや」「ナゴヤ」）。候補を選ぶと地図がその地点へ移動し、詳細が開きます。

🔄 自動更新

アメダスの更新に合わせて定期的にデータを取り直します。バックグラウンドから復帰した際にも鮮度を確認し、必要なら再取得します（パネルから無効化も可能）。

📊 詳細情報の確認

地図上の観測所マーカーをクリックすると、以下の詳細情報が表示されます。

• 観測所名（読み仮名）
• 選択中のデータの測定値と、その地点で同時に観測されている他の項目（気温・風速・降水量・湿度・日照）
• 📈 推移グラフリンク: 気象庁公式サイトの詳細グラフへ一発アクセス
• ⭐️ お気に入り登録: よく見る地点を登録（登録地点は地図上に値が常時表示されます）

🏆 ランキングとリスト

• ランキング: 現在のデータ値が高い順（または低い順）に全国トップ30を表示します。
• お気に入り: 登録した地点の最新データを一覧で確認できます。

リストの項目をクリックすると、地図がその地点へ自動的に移動します。

🛠️ 技術スタック

• Framework: Nuxt 4 (Vue 3, TypeScript)
• Map Library: Leaflet
• State Management: Pinia
• Styling: Tailwind CSS
• Deployment: GitHub Pages (GitHub Actionsによる自動デプロイ)

🚀 ローカルでの開発・実行

前提条件

• Node.js (v18以上推奨)
• npm

手順

1. リポジトリのクローン

   git clone https://github.com/GenbuHase/AMeDAS_Visualizer.git
   cd AMeDAS_Visualizer

2. 依存関係のインストール

   npm install

3. 開発サーバーの起動

   npm run dev

   ブラウザで http://localhost:3000 にアクセスしてください。

4. 静的サイトの生成

   npm run generate

   .output/public ディレクトリに静的ファイルが生成されます。

⚠️ 注意事項

データ出典について

本アプリケーションは、気象庁のWebサイトで公開されているデータを利用しています。

出典: 気象庁 Japan Meteorological Agency

本アプリは気象庁の公認アプリではありません。また、気象庁APIおよびデータ形式は変更される可能性があるため、将来的に動作しなくなる可能性があります。

📄 ライセンス

MIT License