[日本語 (JA) / English (EN)]

ShikisiMap

Vtuberの敷嶋てとらさんが投稿した動画で紹介されたスポットをまとめたマップウェブサイトです。 現在地周辺のスポット表示や、YouTube動画のプレビューもサポートしています。

主な特徴

• 地図表示: leafletとreact-leafletによるインタラクティブな地図表示
• スポット一覧: サイドバーでスポットを一覧・フィルタ・選択可能
• 現在地マーカー: ブラウザの位置情報に基づく現在地表示
• 軽量メディア埋め込み: react-lite-youtube-embedを用いた動画プレビュー

技術スタック

• フレームワーク: React 19, TypeScript
• ビルド: Vite
• 地図: Leaflet (leaflet, react-leaflet)
• その他: react-window（リスト仮想化）など

クイックスタート

1. DevContainerを使用して開発環境をセットアップする
2. 開発サーバー起動:

npm run dev

ブラウザでViteが表示するアドレス（通常はhttp://localhost:5173）にアクセスしてください。

主なファイル

• src/: ソースコードディレクトリ
  • Map.tsx: 地図コンポーネント
  • Sidebar.tsx: スポット一覧／選択 UI
  • SpotList.tsx, SpotItem.tsx: スポット一覧表示ロジック
  • data.json / mapData.ts: スポットデータ
• docs/spot_guideline.md: スポットの記載ガイドライン

コントリビューション

コントリビューションは大歓迎です！バグ報告、機能提案、プルリクエストなど、お気軽にどうぞ。 コントリビューション時はコントリビューションガイドラインを参照してください。

ライセンス

ライセンスファイルを参照してください。