# 公式サイトからタイムテーブル情報をスクレイピング
# https://frf25.festimetable.info/d1.html からd3.htmlまで
def scrape_timetable():
    performances = []
    for day in range(1, 4):
        url = f"https://frf25.festimetable.info/d{day}.html"
        # BeautifulSoup4でHTML解析
        # アーティスト名、時間、ステージ情報を抽出
        performances.extend(parse_day_schedule(url, day))
    
    return {
        "performances": performances,
        "stages": extract_stage_info(),
        "festival_info": {
            "name": "FUJI ROCK FESTIVAL 2025",
            "dates": ["2025-07-25", "2025-07-26", "2025-07-27"]
        }
    }

// Leafletを使ったインタラクティブマップ
import { MapContainer, TileLayer, Marker, Popup, Polyline } from 'react-leaflet'
 
const MapView = ({ myTimetable, timetableData, selectedDay }) => {
  const venues = [
    { name: "GREEN STAGE", lat: 36.8342, lng: 138.7864 },
    { name: "WHITE STAGE", lat: 36.8350, lng: 138.7870 },
    // ... 他の会場座標
  ]
 
  // 選択したアーティストの会場間移動ルートを計算
  const calculateRoute = () => {
    const selectedPerformances = myTimetable
      .map(id => timetableData.performances.find(p => p.id === id))
      .filter(p => p && p.day === selectedDay)
      .sort((a, b) => a.start_time.localeCompare(b.start_time))
    
    return selectedPerformances.map(perf => 
      venues.find(v => v.name === perf.stage)
    ).filter(Boolean)
  }
 
  return (
    <MapContainer center={[36.8342, 138.7864]} zoom={15}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      {/* 移動ルートの表示 */}
      <Polyline positions={calculateRoute().map(v => [v.lat, v.lng])} />
    </MapContainer>
  )
}

// マイタイムテーブルの永続化
const [myTimetable, setMyTimetable] = useState(() => {
  if (typeof window !== 'undefined') {
    const saved = localStorage.getItem('fujirock2025-mytimetable')
    return saved ? JSON.parse(saved) : []
  }
  return []
})
 
useEffect(() => {
  if (typeof window !== 'undefined') {
    localStorage.setItem('fujirock2025-mytimetable', JSON.stringify(myTimetable))
  }
}, [myTimetable])

# 1. プロジェクト構築（5分）
npx create-next-app@latest fujirock-app --typescript --tailwind
cd fujirock-app
 
# Claude Codeに「shadcn/uiとLeafletを設定して」と指示
# → 自動で必要なパッケージインストール、設定ファイル作成
 
# 2. スクレイピングスクリプト作成（15分）
# Claude Codeに公式サイトURLを渡すだけで
# → 完全動作するPythonスクレイピングコード生成
 
# 3. UI実装（30分）
# 「タイムテーブル表示コンポーネントを作って」
# → レスポンシブ対応、重複チェック機能付きのReactコンポーネント完成
 
# 4. マップ機能（20分）
# 「Leafletでフジロック会場のマップを作って」
# → インタラクティブマップ + ルート計算機能まで実装