From be55729482296663da8c96723bfd22080e6762c1 Mon Sep 17 00:00:00 2001 From: yyamashita Date: Wed, 6 May 2026 22:07:53 +0900 Subject: Add Tokyo livehouse event aggregator service Full-stack React Router v7 app that scrapes event listings from major Tokyo live venues (Liquid Room, WWW/WWW X, Shibuya O-EAST, Shinjuku LOFT, Club Quattro) and stores them in SQLite for browsing and search. - Modular scraper architecture: add a new venue by dropping a file in app/scrapers/ and registering it in index.ts - Routes: /events (filter by keyword/venue/date), /events/:id, /venues, GET /api/scrape - EventCard shows artist, date/time, venue, ticket URL, and fee - Post-scrape per-venue Markdown files generated to events/ (dev reference) - /add-livehouse Claude Code skill defined in .claude/commands/ Co-Authored-By: Claude Sonnet 4.6 --- README.md | 147 ++++++++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 95 insertions(+), 52 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 5c4780a..7347bfc 100644 --- a/README.md +++ b/README.md @@ -1,87 +1,130 @@ -# Welcome to React Router! +# 東京ライブハウス イベント情報 -A modern, production-ready template for building full-stack React applications using React Router. +東京の主要ライブハウスのイベント情報を自動収集・集約するフルスタック Web サービス。 -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default) +React Router v7 (SSR) + SQLite + Tailwind CSS で構築。 -## Features +## 機能 -- 🚀 Server-side rendering -- ⚡️ Hot Module Replacement (HMR) -- 📦 Asset bundling and optimization -- 🔄 Data loading and mutations -- 🔒 TypeScript by default -- 🎉 TailwindCSS for styling -- 📖 [React Router docs](https://reactrouter.com/) +- 複数ライブハウスのイベントをスクレイピングで自動取得 +- キーワード・会場・期間によるフィルタリング +- 出演者・日時・場所・チケットURL・料金を一覧表示 +- 会場ごとのイベント Markdown ファイルを自動生成（開発参照用） +- スクレイパーをモジュールとして追加可能な設計 -## Getting Started +## 対応ライブハウス（初期） -### Installation +| 会場 | エリア | +|------|--------| +| LIQUID ROOM | 恵比寿 | +| WWW / WWW X | 渋谷 | +| 渋谷 O-EAST / O-WEST | 渋谷 | +| 新宿 LOFT | 新宿 | +| CLUB QUATTRO | 渋谷 | -Install the dependencies: +## セットアップ -```bash -npm install -``` - -### Development +### 必要環境 -Start the development server with HMR: +- Node.js 20.12 以上（`styleText` API が必要） +- npm ```bash +npm install npm run dev ``` -Your application will be available at `http://localhost:5173`. - -## Building for Production +`http://localhost:5173` にアクセス。 -Create a production build: +### 本番ビルド ```bash npm run build +npm start ``` -## Deployment +## 画面構成 -### Docker Deployment +| パス | 内容 | +|------|------| +| `/events` | イベント一覧（フィルタ付き） | +| `/events/:id` | イベント詳細 | +| `/venues` | 会場一覧 | +| `GET /api/scrape` | 全会場スクレイプ実行 | +| `GET /api/scrape?venue_id=` | 特定会場のみ実行 | -To build and run using Docker: +## 新しい会場を追加する -```bash -docker build -t my-app . +### 1. スクレイパーファイルを作成 -# Run the container -docker run -p 3000:3000 my-app -``` +`app/scrapers/` に新しいファイルを追加し、`Scraper` インターフェースを実装する。 +既存のファイル（例: [`app/scrapers/liquid-room.ts`](app/scrapers/liquid-room.ts)）を参考にする。 -The containerized application can be deployed to any platform that supports Docker, including: +```ts +import type { Scraper, VenueMeta } from "./base"; -- AWS ECS -- Google Cloud Run -- Azure Container Apps -- Digital Ocean App Platform -- Fly.io -- Railway +export const venue: VenueMeta = { + id: "my-venue", // URL 等から小文字ハイフン区切りで + name: "MY VENUE", + url: "https://example.com", + area: "渋谷", +}; -### DIY Deployment +export const scraper: Scraper = { + venue, + async scrape() { + // fetch → cheerio でパース → EventInput[] を返す + }, +}; +``` -If you're familiar with deploying Node applications, the built-in app server is production-ready. +### 2. インデックスに登録 -Make sure to deploy the output of `npm run build` +[`app/scrapers/index.ts`](app/scrapers/index.ts) に追記するだけで自動的に全機能に反映される。 +```ts +import { scraper as myVenue } from "./my-venue"; + +export const ALL_SCRAPERS: Scraper[] = [ + // 既存... + myVenue, +]; ``` -├── package.json -├── package-lock.json (or pnpm-lock.yaml, or bun.lockb) -├── build/ -│ ├── client/ # Static assets -│ └── server/ # Server-side code -``` -## Styling +### Claude Code スキル + +プロジェクト内に `/add-livehouse` スキルを定義済み。 +Claude Code から `/add-livehouse <会場名> ` を実行するとスクレイパー追加を自動的にガイドする。 -This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer. +## プロジェクト構成 + +``` +app/ +├── lib/ +│ ├── db.server.ts # SQLite 操作（better-sqlite3） +│ ├── scraper-runner.server.ts # スクレイプ実行 + Markdown 生成 +│ ├── markdown-writer.server.ts # events/.md 生成（開発参照用） +│ └── venue-meta.server.ts # サーバー専用スクレイパーメタデータ +├── scrapers/ +│ ├── base.ts # Scraper インターフェース定義 +│ ├── index.ts # スクレイパーレジストリ（ここに追加） +│ ├── liquid-room.ts +│ ├── www-shibuya.ts +│ ├── shibuya-o.ts +│ ├── shinjuku-loft.ts +│ └── club-quattro.ts +├── components/ +│ ├── EventCard.tsx # イベントカード（出演者・日時・会場・料金・URL） +│ └── FilterBar.tsx # 検索フィルタ +└── routes/ + ├── events._index.tsx + ├── events.$id.tsx + ├── venues.tsx + └── api.scrape.ts +events/ # スクレイプ後に自動生成される Markdown（開発参照用） +``` ---- +## 注意事項 -Built with ❤️ using React Router. +- 各ライブハウスの HTML 構造はサイトによって異なるため、スクレイパーのセレクタは実際のページを確認しながら調整が必要 +- JavaScript レンダリングが必要なサイトは `fetch` ではなく公式 RSS / API の利用を検討する -- cgit v1.2.3