YouTube チャンネル @maya_base の公式ポータルサイトです。 最新動画・Shorts・X(@MayaBaseJP)の投稿をまとめて紹介します。
- bun(ランタイム / パッケージマネージャ。Node.js 不使用)
- Astro 7 + TypeScript(strict)— 静的生成、JS は最小限
- Tailwind CSS v4 — CSS-first テーマ(
src/styles/global.cssの@theme) - Embla Carousel — 自動切替カルーセル(WCAG 2.2.2 準拠の一時停止ボタン付き)
- Biome(TS/JSON/CSS)+ Prettier(.astro)— lint / format
- Lighthouse CI — Performance / Accessibility / Best Practices / SEO をゲート(SEO は 100 必須)
詳細は docs/01-tech-stack.md と docs/02-design.md を参照してください。
bun install # 依存関係のインストール
bun run dev # 開発サーバ(http://localhost:4321)| コマンド | 内容 |
|---|---|
bun run fetch |
YouTube RSS から動画一覧を取得し src/data/videos.json を更新 |
bun run build |
静的ビルド(fetch なし・ネットワーク非依存) |
bun run build:full |
fetch + ビルド(本番デプロイ用) |
bun test |
ユニットテスト |
bun run lint / lint:fix |
Biome によるチェック / 自動修正 |
bun run format / format:check |
Prettier(.astro)+ Biome フォーマット |
bun run check |
astro check(型チェック) |
- チャンネル ID の設定:
src/config/site.tsのyoutube.channelIdにUCで始まるチャンネル ID を設定してください(YouTube Studio → 設定 → チャンネル → 詳細設定)。未設定でもチャンネルページから自動解決を試みますが、確定値の設定を推奨します。 - プロフィールの編集:
src/config/site.tsのprofile(名前・肩書き・自己紹介)を実際の内容に書き換えてください。 - 本番 URL の設定: デプロイ先が決まったら
astro.config.mjsのSITE_URLを本番 URL に変更してください(canonical / sitemap / OGP に使われます)。
取得経路は 2 系統あり、YOUTUBE_API_KEY の有無で自動的に切り替わります。
| 経路 | 条件 | 取得範囲 |
|---|---|---|
| YouTube Data API v3 | YOUTUBE_API_KEY を設定 |
全動画(uploads プレイリストを全ページ取得) |
| RSS | 未設定(デフォルト) | 最新 15 件のみ(過去動画は日々のマージで徐々に蓄積) |
- 全動画をサイトに載せたい場合は API キーの設定を推奨します。 RSS は仕様上、最新 15 件しか返さないため、過去の動画をまとめて取得できません。
- API 取得に失敗した場合は自動的に RSS へフォールバックし、全経路が失敗しても既存の
videos.jsonを維持します(ビルドは決して落としません)。
- Google Cloud Console でプロジェクトを作成し、「YouTube Data API v3」を有効化する。
- 認証情報から API キーを発行する(キーの制限で YouTube Data API v3 のみに絞ると安全)。
- ローカル実行:
YOUTUBE_API_KEY=xxxxx bun run fetch - GitHub Actions(定期更新): リポジトリの Settings → Secrets and variables → Actions に
YOUTUBE_API_KEYを登録する(ワークフローは登録済みなら自動で使用します)。
クォータ目安: 全取得は概ね「(動画数 ÷ 50)units」程度で、無料枠(1 日 10,000 units)に対して十分小さい規模です。
- ビルド時に
bun run build:fullを使うと自動で最新化されます。 - GitHub Actions の「動画データの定期更新」ワークフローが毎日 6:00(JST)に取得し、変更があれば
videos.jsonをコミットします(手動実行も可)。- この自動コミットは通常の CI / Lighthouse を経由しません(GITHUB_TOKEN によるプッシュは他のワークフローをトリガーしない GitHub の仕様)。fetch スクリプトは失敗時に既存データを維持するため、壊れたデータが混入するリスクは低い設計です。
- main にブランチ保護(直接プッシュ禁止)を設定する場合は、bot を除外するか PR ベースのフローに変更してください。
- 横動画 / Shorts の判定は自動で行われ、判定結果はキャッシュされます。
- 削除・非公開にした動画は自動では消えません。
src/data/videos.jsonから該当エントリを手動で削除してください。
src/data/x-posts.json に手動で追記します(X API が無料で使えないため)。
{
"account": "MayaBaseJP",
"posts": [
{
"id": "1234567890123456789",
"text": "投稿本文",
"date": "2026-07-11T20:00:00+09:00"
}
]
}idはポスト URL(https://x.com/MayaBaseJP/status/{id})の末尾の数字です。- 表示は新しい順・最大 6 件。形式ミスはビルド時にエラーとして検出されます。
src/config/site.ts の carousel で自動切替の間隔(既定 5 秒)と最大表示件数(既定 6 件)を変更できます。
本番は Cloudflare Workers(wrangler.jsonc の portal)へデプロイしています。静的サイトなので Netlify / Vercel / GitHub Pages などにもそのままデプロイできます。
- ビルドコマンド:
bun run build:full(ビルド環境から youtube.com へアクセスできない場合はbun run build) - 出力ディレクトリ:
dist distは Workers の Assets(ASSETSバインディング)として配信され、/api/push/*だけをworker/index.tsが処理します。
新着動画のプッシュ通知(#157)の購読情報は Workers KV に保存します。既定では KV バインディングを設定していません。有効にする場合のみ、次の手順で実在するネームスペース ID を設定してください。
wrangler kv namespace create PUSH_SUBSCRIPTIONS出力された id を wrangler.jsonc の kv_namespaces に設定します(記述例はファイル内のコメント参照)。
Important
id にプレースホルダや存在しない値を書くと wrangler deploy が KV namespace '...' is not valid [code: 10042] で失敗し、サイト全体のデプロイが止まります。値が用意できないうちは kv_namespaces を追加しないでください。CI では worker/wranglerConfig.test.ts がこれを検査します。
KV 未設定でも静的サイトの配信は通常どおり動作し、/api/push/subscribe と /api/push/unsubscribe のみが 503 を返します(購読ボタン自体も PUBLIC_VAPID_PUBLIC_KEY 未設定ならビルドに含まれません)。通知送信側に必要な Secrets は .env.example / .dev.vars.example を参照してください。
Pull Request ごとに lint → format チェック → 型チェック → テスト → ビルド → Lighthouse CI が実行されます。
- ゲート: SEO = 100、Accessibility / Best Practices ≥ 95、Performance ≥ 80
- Performance の閾値だけ低めなのは、GitHub の共有ランナーの処理速度の揺らぎでスコアが変動するためです(実測ではローカル環境で 4 カテゴリすべて 100)。
numberOfRuns: 5で複数回計測し、既定の楽観的集計(実行のうち最良値)で判定します。