「手作課程照片影片作品上傳平台」(v3.2,2026-03-19)是阿凱老師為 石門國小六年級手作課打造的 Google Drive 班級資料夾中繼導引頁 — 不是自建上傳系統,而是用學校 Workspace 帳號權限做隔離的精緻入口頁。
🎯 核心特色
- 🏫 6 張班級卡(601~606) — 對應 6 個硬編碼 Drive folder ID,從
DRIVE_CONFIG物件讀取真實 ID - 🚪
go.html中繼頁(核心智慧) — 學生點班級卡 → 提示用@mail2.smes.tyc.edu.tw學校信箱登入 → 自動打開該班 Drive 資料夾 - 📱 解兩個經典踩雷 — (1) Google
continue參數只吃 Google 網域 (2) 手機 OS 攔截drive.google.com跳 Drive App - 🔒 校園信箱權限隔離 — Drive folder 只開放
@mail2.smes.tyc.edu.twdomain 內成員,無公開分享連結 - 📷 QR Code 產生器 — 教室牆上貼一張即可
- 📊 GA4 事件追蹤 — 看哪班最常上傳
- 💾 PWA manifest + Intersection Observer 滾動動畫 — Fredoka + Nunito 俏皮字型
💡 設計理念
純 vanilla HTML + CSS + JS,儲存完全靠 Google Drive(學校 Google Workspace 帳號),登入機制完全靠 Google OAuth 跳轉無自建後端,沒用 Firebase Storage / Supabase / Cloudinary。部署在 cagoooo.github.io/files/(不是獨立 repo,是 cagoooo.github.io monorepo 的 /files/ 子目錄)。學生肖像保護靠 Workspace domain 權限隔離,不對外公開。
🎒 適合情境
兩個月實測:老師拍照工時 0 分鐘(學生自己拍,vs 過去每節 8-12 分鐘)、列印成本 0 張 A4(vs 每學期 800 張)、家長看作品比率 100%(vs 不到 30%)、學期末作品集製作 1 鍵生成(vs 老師連續 3 晚加班)。適用國小 / 國中藝術與人文、綜合活動領域,任何「需要保留學生作品」的課(家政、STEAM、社團)。可搭配 #90 繪本 → Google 表單一條龍工作坊 連手作課回饋表單一起做、#10 班級小管家 學期末做學期報告。