AI駆動開発 イベント情報サイト

AI-Driven Development (AIDD) コミュニティのイベント情報を表示する GitHub Pages サイトです。
connpass の RSS (Atom) フィードからイベントデータを自動取得し、React で構築した静的サイトとして公開します。

公開URL: https://ymd65536.github.io/aidd_web/

技術スタック

カテゴリ	技術
フレームワーク	React 18
ビルドツール	Vite 6
スタイリング	Tailwind CSS 3
アイコン	lucide-react
データソース	connpass Atom フィード (https://aid.connpass.com/ja.atom)
ホスティング	GitHub Pages
CI/CD	GitHub Actions

プロジェクト構成

aidd_web/
├── .github/workflows/
│   └── deploy.yml          # GitHub Actions: ビルド & Pages デプロイ
├── public/
│   └── events.json         # ビルド時に自動生成されるイベントデータ
├── scripts/
│   └── fetch-events.mjs    # RSS取得 → JSON変換スクリプト
├── src/
│   ├── App.jsx             # メインコンポーネント（イベント一覧UI）
│   ├── main.jsx            # Reactエントリポイント
│   └── index.css           # Tailwind CSS
├── index.html              # HTMLテンプレート
├── package.json
├── vite.config.js          # Vite設定 (base: /aidd_web/)
├── tailwind.config.js
└── postcss.config.js

データフロー

1. scripts/fetch-events.mjs が connpass の Atom フィードを取得
2. XML をパースし、各エントリから 開催日時・場所・概要・タグ を抽出
3. JSON 形式に変換して public/events.json に出力
4. Vite がビルドし dist/ に静的ファイルを生成（events.json を含む）
5. フロントエンド（React）がビルド済み events.json を fetch して表示

イベントデータの JSON 形式

{
  "id": "386245",
  "title": "【AI駆動開発】AIDDもくもく会 #2",
  "date": "2026/04/11 (土)",
  "time": "13:00 ～ 17:30",
  "location": "東京ガーデンテラス紀尾井町 17F (LODGE)",
  "link": "https://aid.connpass.com/event/386245/",
  "tags": ["もくもく会", "作業会", "知見共有"],
  "summary": "「知る」から「やる」へ。AIツールを使いながら...",
  "status": "募集中"
}

ローカル開発

前提条件

• Node.js 20 以上
• npm

セットアップ

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

# RSSフィードからイベントデータを取得
npm run fetch-events

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

ビルド & プレビュー

# ビルド（自動でRSS取得 → Viteビルド）
npm run build

# ビルド結果をプレビュー
npm run preview

GitHub Pages デプロイ

初回セットアップ

1. GitHub リポジトリの Settings → Pages を開く
2. Source を GitHub Actions に変更する
3. main ブランチにコードを push する

自動デプロイ

以下のタイミングで自動的にビルド & デプロイが実行されます：

• main ブランチへの push 時
• 毎日 UTC 0:00（JST 9:00） にスケジュール実行（RSS データの定期更新）
• GitHub Actions の画面から手動実行（workflow_dispatch）

ライセンス

MIT License