Leaflet Demo - 衛星追跡アプリケーション

リアルタイム衛星軌道表示機能を持つLeafletベースのWebアプリケーションです。

📋 プロジェクト概要

このプロジェクトには2つのバージョンがあります：

v1: Vue.jsフロントエンドのみ
v2: Vue.js + ASP.NET Core + SQL Server フルスタック

🌟 主な機能

リアルタイム衛星追跡: 衛星位置の自動更新表示
インタラクティブマップ: 通常地図/航空写真の切り替え
衛星選択: 左サイドバーでの絞り込み・検索可能な衛星リスト
複数選択: 複数の衛星を同時に追跡
IPジオロケーション: ユーザー位置での地図中心設定
国/地名選択: 階層ドロップダウンでの位置ナビゲーション
日本語UI: PC専用の日本語インターフェース

📁 プロジェクト構造

leaflet-demo-vue/
├── README.md                    # このファイル
├── frontend/                    # Vue.jsフロントエンド
│   ├── README.md               # フロントエンド詳細説明
│   ├── src/
│   ├── package.json
│   └── ...
└── backend/                     # ASP.NET Core バックエンド (v2のみ)
    ├── README.md               # バックエンド詳細説明
    ├── SatelliteTrackingApi/
    └── ...

🚀 クイックスタート

v1 (フロントエンドのみ)

# リポジトリをクローン
git clone https://github.com/tosihide/leaflet-demo.git
cd leaflet-demo

# v1ブランチに切り替え
git checkout devin/1753575000-v1-frontend-only

# フロントエンドディレクトリに移動
cd frontend

# 依存関係をインストール
npm install

# 開発サーバーを起動
npm run dev

# ブラウザで http://localhost:5173 にアクセス

v2 (フルスタック)

# リポジトリをクローン
git clone https://github.com/tosihide/leaflet-demo.git
cd leaflet-demo

# v2ブランチに切り替え
git checkout devin/1753761248-v2-fullstack

# バックエンドを起動 (別ターミナル)
cd backend/SatelliteTrackingApi
dotnet run

# フロントエンドを起動 (別ターミナル)
cd frontend
npm install
npm run dev

# ブラウザで http://localhost:5173 にアクセス

📖 詳細なセットアップ手順

各バージョンの詳細なセットアップ手順については、以下のREADMEファイルを参照してください：

🛠️ 技術スタック

フロントエンド

Vue.js 3 (Composition API)
TypeScript
Vue-Leaflet
Leaflet
Lucide Vue Next (アイコン)
Vite (ビルドツール)

バックエンド (v2のみ)

ASP.NET Core 8.0 Web API
Entity Framework Core
SQL Server (インメモリデータベース)
C#

🌐 ブランチ情報

devin/1753575000-v1-frontend-only: v1フロントエンドのみ
devin/1753761248-v2-fullstack: v2フルスタック版

📝 開発者向け情報

必要な環境

Node.js 18+ (フロントエンド)
.NET 8.0 SDK (バックエンド - v2のみ)
現代的なWebブラウザ

ビルド

# フロントエンド本番ビルド
cd frontend
npm run build

# バックエンドビルド (v2のみ)
cd backend/SatelliteTrackingApi
dotnet build

🤝 貢献

このプロジェクトは学習目的で作成されました。改善提案やバグレポートは歓迎します。

📄 ライセンス

このプロジェクトはMITライセンスの下で公開されています。