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

Nuxt 3 と Leaflet を使用して構築されており、SPA(Single Page Application)として設計されています。

🌐 デモサイト (GitHub Pages)

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

• 🌡️ 気温: 暑い場所・寒い場所をグラデーションで表示
• ☔ 降水量: 雨の強さを色とサイズで表現
• 🍃 風向・風速: 風の強さと向きを矢印で表示
• ⛄ 積雪深: 積雪量を円の大きさで表現
• 💧 湿度: 空気の乾燥具合を表示

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

• 観測所名(読み仮名)
• 現在の測定値
• 📈 推移グラフリンク: 気象庁公式サイトの詳細グラフへ一発アクセス
• ⭐️ お気に入り登録: よく見る地点を登録

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

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

• 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