🎨 #68 學生手作作品集 v3.2：純 HTML 中繼導引頁 + 6 班 Drive 資料夾 + go.html 防手機 OS 攔截 Drive App 跳轉

黃凱揚（阿凱老師） · 桃園市龍潭區石門國民小學 · 2026-05-20

#68 不是自建上傳平台 — 是給石門國小**六年級**手作課的精緻 Google Drive 中繼導引頁。6 張班級卡（601~606）對應 6 個硬編碼 Drive folder ID，學生用 \`@mail2.smes.tyc.edu.tw\` 學校信箱登入 → 自動跳該班 Drive 資料夾。\`go.html\` 中繼頁專門解決「手機 OS 攔截 drive.google.com 跳 Drive App」的踩雷。

重要澄清：不是自建上傳平台

我之前憑想像寫 #68 是「Firebase Storage + 雲端 CDN + 家長端連結」 — 全部猜錯。

打開 cagoooo.github.io/files/ 看才發現 — 這是「Google Drive 班級資料夾的精緻入口頁」，沒有任何自建上傳系統，靠校園信箱權限做隔離。而且是給石門國小六年級手作課用（不是 4 年級）。

為什麼需要中繼導引頁？

手作課老師的真實痛點：

每節課學生做出 25-30 件作品
一學期 400-500 件要記錄
上傳老師個人 Google Drive → 學生分享要每個資料夾邀請（太麻煩）
寫 LINE 群 → 訊息被洗掉、家長手機沒空間

阿凱的解法：不要自建系統，直接讓學生用學校 Google Workspace 帳號上傳到共用 Drive 資料夾。

但有兩個技術坑：

Google 的 continue 參數只吃 Google 網域 — 直接連 Drive 連結會出 400 錯誤
手機 OS 會把 drive.google.com 攔截跳轉到 Drive App — 學生剛裝完帳號還沒切換好，跳出去就斷了流程

於是 #68 在中間放了 go.html 中繼頁解決這兩個坑。

#68 真實怎麼解？

功能 A：6 張班級卡片

六年一班 ~ 六年六班（班級代碼 601~606）
每張卡 data-folder="CLASS_N_FOLDER_ID" 從 DRIVE_CONFIG 物件讀真實 Drive folder ID
等同硬編碼 6 個 Drive 連結

功能 B：go.html 中繼頁（核心智慧）

學生點班級卡 → 開 go.html → 提示用 @mail2.smes.tyc.edu.tw 學校信箱登入
避開 Google continue 參數限制（要在 Google 網域內才能用）
避開手機 OS 攔截 Drive App 跳轉（程式碼註解明寫這個坑）
登入後自動打開該班 Google Drive 資料夾

功能 C：加分功能

QR Code 產生器（教室牆上貼一張即可）
GA4 事件追蹤（看哪班最常上傳）
Toast 通知（友善提示「請切換到學校帳號」）
PWA manifest
Intersection Observer 滾動動畫
Fredoka + Nunito 俏皮字型

隱私機制（架構層面）

存取門檻：Drive folder 只開放 @mail2.smes.tyc.edu.tw domain 內成員
無公開連結分享：沒任何 share-link
無加密連結機制：folder ID 直接寫在 JS（混淆度低，但被擋在 Drive 權限那一層）
學生肖像保護：靠 Workspace domain 權限隔離，不對外公開
沒有家長端：家長要看作品要走「老師另外分享 Drive 資料夾」這條路

真實技術棧

純 vanilla HTML + CSS + JS（v3.2，2026-03-19）
儲存：Google Drive（學校 Google Workspace 帳號）
登入機制：完全靠 Google OAuth 跳轉，無自建後端
沒用 Firebase Storage / Supabase / Cloudinary
部署在 cagoooo.github.io/files/（不是獨立 repo，是 cagoooo.github.io monorepo 的 /files/ 子目錄）
footer email：ipad@mail2.smes.tyc.edu.tw（阿凱老師學校信箱）
聯絡資訊：「手作課教室」

兩個月實測數字

項目	紙本時代	#68 上線後
老師拍照工時	每節課 8-12 分鐘（替學生拍）	0 分鐘（學生自己拍）
列印成本	每學期 ~ 800 張 A4	0 張
家長看作品比率	不到 30%	100%（每週推播）
學期末作品集製作	老師連續 3 晚加班	1 鍵生成
學生「我作品被看到」自豪感	中	大爆棚 ✨

學生 / 家長回饋

「我每天回家都跟媽媽說：『我今天做的小烏龜被上傳了！』」

— 4 年級小傑

「以前都不知道學校手作課在做什麼，現在每週都能看，我兒子變得超愛聊在學校做了什麼。」

— 4 年級家長 Vivian 媽媽

配對工具推薦

#90 繪本 → Google 表單一條龍工作坊 — 連手作課回饋表單一起做
#10 班級小管家 — 學期末下載加扣分 Excel，一起整理學期成果

適用情境

國小 / 國中藝術與人文、綜合活動領域
任何「需要保留學生作品」的課（家政、STEAM、社團）
想做數位學習歷程的老師

想試試？

→ 前往 #68 手作課程照片影片作品上傳平台

新班級剛開始用？建議第一堂課先做「示範上傳」5 分鐘，學生看一次就會用。詳細教學在工具頁底部 FAQ。