PJ-MediaDashboard — 開発記録
プロジェクト概要
Google Drive (30TB) をストレージバックエンドとし、Astro + Tailwind CSS v4 + React で構築する「メディア資産管理専用」のフロントエンドダッシュボード。VEED.IO Dashboard リスペクトのライトモードUIデザイン。
技術スタック
- フレームワーク: Astro v6 + React
- スタイル: Tailwind CSS v4
- アイコン: Lucide React
- Drive連携:
gog.exe(gogcli) OAuth認証 - データ取得:
fetch-drive.mjsでビルド前にDriveメタデータ取得 →driveFiles.json
Google Drive フォルダ構成
Ai-work/Media/ (公開共有済み: anyoneWithLink)
├── 01_Image/ 17ファイル
├── 02_Video/ 27ファイル
├── 03_Audio/ 4ファイル
├── 04_PDF/ 0ファイル
└── 05_Slides/ 40ファイル（Google Slides + PPTX）
合計: 88ファイル
実装内容
Phase 1: 基盤構築
- Astro プロジェクト初期化（
PJ-MediaDashboard-260311） - VEED.IO風UI設計（ライトモード、角丸、Blue アクセント）
- サイドバー / FilterTabs / MediaCard / SearchBar / SkeletonCard コンポーネント
- 詳細ページ
[id].astro（動画iframe再生、画像プレビュー、PDF、スライド、オーディオ対応）
Phase 2: Google Drive 連携
gog.exeでDriveフォルダ構成 (Ai-work/Media/01〜05) を作成fetch-drive.mjs: ビルド前にDriveメタデータ取得スクリプトgoogleDrive.ts: データ読み込み + MIME判定 + フォールバック- サムネイルURL自動生成:
lh3.googleusercontent.com/d/{fileId}=w400
Phase 3: ファイルアップロード・整理
- Vault
07_Mediaのファイル → Drive各フォルダへアップロード（14画像 + 21動画） - Drive上の既存 Google Slides 17件 →
05_Slidesに移動 - ローカル
c:\ai_work全体スキャン → 追加アップロード（+6動画, +2画像, +4音声, +9スライド） - 全88ファイルを日本語名にリネーム（67件リネーム、0失敗）
Phase 4: バグ修正
- サムネイル非表示 → Media フォルダ公開共有 +
lh3サムネイルURL - サイドバーフィルタ不動 →
Dashboard.tsx新設（クライアントサイドReact state管理） - ファイルプレビュー403 → 公開共有 +
lh3画像直接表示
運用コマンド
# Driveからデータ取得
npm run fetch
# 開発サーバー起動
npm run dev
# フルビルド（fetch + build）
npm run fullbuildフォルダID一覧
| フォルダ | ID |
|---|---|
| Media (root) | 1KER0xZbjrdd6Aye633Re6yJVZETdmI8f |
| 01_Image | 1eysGQir0AuPhXua_nnkqdoFI_e4h6WXL |
| 02_Video | 16WTnHta3iMBQe745rNbumk3j9rkzuQ-z |
| 03_Audio | 1RaAnUDcqGdRaMvkp0aEmV7ZqwzB75YQr |
| 04_PDF | 1PYMqT9hHb7iG9J7GTocMiQcG6a-ra5Wn |
| 05_Slides | 18mscJgD39_6SeQ-ZwpnHLsCYLPPEn0sH |
今後の拡張
- サムネイル表示改善（動画サムネイルがDrive処理待ちの場合あり）
- 重複ファイルのクリーンアップ
- Cloudflare Pages へのデプロイ
- アップロード機能のUI実装
- ファイル検索の強化（タグ、メタデータ）