2026年7月23日 星期四

經費支出明細表管理工具-多人用GAS雲端佈署版

經費支出明細表管理工具

多人協作 × 雲端備份 × 一鍵匯出 Word 列印
GAS + HTML | 多人 Web App | 免安裝 | 免費用
📥 立即取得工具(建立副本)點擊後建立副本到自己的雲端硬碟,即可開始使用

📖軟體由來

每個學期,學校的行政工作總少不了「經費支出明細表」的填報。從戶外教學、畢業旅行、校慶活動到社團補助,每一筆支出都需要詳實記錄,層層核章。傳統的做法不外乎用 Word 或 Excel 手動排版,每次都要重新調整格式、對齊欄位、計算總計,遇到多人需要同時填報時,更是衍生出無數個版本的檔案,最後搞得誰也不確定哪個才是最新的。

為了徹底解決這些痛點,我用 GAS(Google Apps Script)搭配 HTML 打造了一套「經費支出明細表管理工具」。它不只是一個表單生成器,而是一個完整的多人協作工作台:支援帳號登入、雲端自動備份、一鍵匯出 Word 文件、列印即用的核章欄位,讓經費核銷從「痛苦的行政負擔」變成「幾分鐘就能搞定的事」。



核心功能總覽

這個工具整合了經費明細表從建立到核銷的完整流程:

👥
多人帳號系統
Admin/User 權限分級,下拉選單登入
☁️
雲端自動備份
每 30 秒自動同步至 Google 試算表
📄
匯出 Word 文件
標楷體排版,A4 直式即印格式
🖨️
一鍵列印
去除 UI 元素,純淨列印輸出
📊
自動加總計算
金額即時運算,大寫國字金額
✍️
核章欄位自訂
承辦人/主計/校長,自由修改名稱
🎯
拖曳排序
Drag & Drop 調整項目順序
🧮
剩餘經費計算
輸入核定經費,自動算出剩餘
📦
JSON 匯入匯出
完整備份與跨帳號搬遷
🎨
卡片色彩標記
右鍵選單自訂明細表卡片顏色
🔍
即時搜尋
關鍵字快速篩選已儲存明細
⚙️
管理者後台
帳號管理、全域視察、批次匯入

🎯實際應用場景

🏫 學校行政:經費核銷不再痛苦

每學期的戶外教學、畢業旅行、校慶活動,都需要填報經費支出明細表。以前用 Word 手動排版,每次都要重新調整表格格式、計算總計、對齊欄位。現在只要登入系統,選擇「開新支出明細」,輸入標題(如「115學年度畢業旅行經費支出明細表」),接著逐筆輸入項目、單位、單價、數量,系統自動計算合計與總計,就這麼簡單。

更方便的是,核章欄位(承辦人、主計、校長)可以自由修改名稱,不同學校的組織編制不同,彈性調整完全沒問題。完成後直接點「📄 下載 docx」,產出的 Word 文件就是標準的 A4 直式格式,標楷體排版,直接拿去列印就能簽核。

👥 多人協作:各做各的,互不干擾

這套工具最大的特色就是「多人 Web App」。每位老師都有自己獨立的帳號,登入後只能看到自己建立的明細表,資料完全隔離。管理者则可以透過後台查看全校所有人的經費明細,需要審閱他人資料時,系統會自動切換到唯讀審閱模式,只能檢視、下載或列印,無法修改,確保資料安全。

管理者還可以批次匯入帳號名單,一次建立全校老師的帳號,不需要逐一設定。開放自主註冊時,還能設定 4 位數驗證碼,防止外人隨意加入。

☁️ 雲端備份:換電腦也不怕

所有資料每 30 秒自動同步到 Google 試算表,就算換了一台電腦、甚至換了瀏覽器,只要打開同一個網址登入,所有明細表就會自動載回來。再也不用擔心「上次做的那份明細表存在哪台電腦」的問題。

系統還提供 JSON 匯出功能,可以完整備份所有明細表資料,或是選擇性地部份匯出。需要搬到另一個帳號時,直接匯入 JSON 檔案即可,完全無痛遷移。

🧮 經費控管:剩餘經費一目瞭然

輸入核定的總經費金額,系統自動計算已支出金額與剩餘經費。在活動執行過程中,隨時可以掌握預算執行情況,避免超支。還能「勾選項目獨立加總」,只計算特定項目的花費,方便做分類統計。

📊與傳統方式的比較

比較項目Word / Excel 手動本工具
格式排版每次手動調整自動生成標準格式
金額計算手動或用 Excel 公式即時自動計算 + 大寫金額
多人使用檔案傳来傳去雲端多人獨立作業
資料備份自己負責每 30 秒自動同步
匯出列印手動排版列印一鍵下載 Word / 列印
跨裝置使用需帶著檔案有瀏覽器就能用
管理者稽核逐一索取檔案後台一鍵視察全校

🔧使用教學:從零開始

🚀 部署步驟(GAS + HTML 一鍵佈署)

  1. 點擊上方按鈕,將試算表建立副本到自己的 Google 雲端硬碟。
  2. 在自己的副本中,點擊「擴充功能」→「Apps Script」開啟指令碼編輯器。
  3. Code.gs 的內容完全覆蓋原本的程式碼。
  4. 在左側檔案列表中新增 HTML 檔案(命名為 Index),貼入前端程式碼。
  5. 首次執行:在上方工具列選擇 doGet 函式,點擊「執行」並通過權限審核。
  6. 點擊右上角「部署」→「新增部署」。
  7. 選擇類型為「網頁應用程式」。
  8. 執行身分:選擇「我 (Me)」(重要!)
  9. 誰可以存取:選擇「任何人 (Anyone)」(重要!)
  10. 點擊「部署」,複製產生的網址,這就是你的工具網址。

⚠️ 首次部署後,若要更新程式碼,需在「新增部署」時選擇「新版本」,才能讓修改生效。

💡 系統首次開啟時,會自動跳出身分初始化畫面,請設定管理者密碼。之後所有使用者即可透過下拉選單選擇帳號登入。

📌 日常操作流程

  1. 登入系統:從下拉選單選擇自己的帳號,輸入密碼登入。
  2. 建立明細表:點擊「➕ 開新支出明細」,輸入標題名稱。
  3. 輸入項目:逐筆輸入支出項目的名稱、單位、單價、數量,系統自動計算合計。
  4. 自動儲存:系統每 30 秒自動備份至雲端,也可手動點「💾 手動儲存」。
  5. 調整順序:直接拖曳表格中的列,即可調整項目順序。
  6. 修改核章:點擊「✍️ 修改核章區」,自訂承辦人、主計、校長的名稱。
  7. 匯出列印:點擊「📄 下載 docx」取得 Word 文件,或「🖨️ 列印」直接列印。

⚙️ 進階功能推薦

  • 計算剩餘經費:輸入核定總經費,系統自動算出還剩多少可以用。
  • 選取加總:勾選特定項目,只計算勾選項目的金額小計。
  • 卡片色彩標記:在明細表清單上按右鍵,可自訂卡片背景顏色,方便分類。
  • 管理者後台:Admin 帳號可批次匯入帳號、查看全校所有人的明細表、遠端列印。
  • JSON 備份:左下角「📦 檔案工具」可匯出/匯入 JSON,完整備份所有資料。
  • 隨機換背景:點擊「🎨 換背景」按鈕,切換不同的淡色系漸層主題。

💡技術亮點

這個工具在技術上使用了以下技術:

Google Apps Script HTML5 Tailwind CSS JavaScript Google Sheets API docx.js CacheService Noto Sans TC

前端使用 Tailwind CSS CDN 快速打造響應式介面,搭配 docx.js 在瀏覽器端直接生成 Word 文件,完全不需要伺服器轉換。後端使用 GAS 的 CacheService 管理 Session Token,確保 6 小時內的登入狀態有效,兼顧安全與效能。

資料儲存採用「同標題覆蓋機制」,同一個使用者對同標題的明細表永遠只保留最新版本,避免試算表中堆積大量重複紀錄。密碼欄位強制設為純文字格式,確保「01」不會被 Google 試算表自動轉成數字「1」。

🤝結語

經費核銷是學校行政中不可或缺的一環,但它不應該成為老師們的負擔。我希望透過這個工具,讓每一位老師都能在幾分鐘內完成一份格式正確、內容完整的經費支出明細表,把省下來的時間留給更重要的教學工作。

程式碼完全開放,大家都可以依照自己學校的需求修改調整。如果你在使用上有任何問題或建議,歡迎留言告訴我。

2026年7月22日 星期三

教師課堂管理整合工具 V5(使用GAS+html可一鍵佈署版)

 

教師課堂管理整合工具 V5

用一個網頁搞定加扣分、作業追蹤、座位表與雲端備份
GAS + HTML | 免安裝 | 免費用 | 雲端同步
📥 取得工具(開啟試算表)點擊後建立副本即可開始使用

📖軟體由來

身為一個每天要處理加扣分、追作業、排座位的老師,我深深感受到課堂管理的瑣碎與耗時。市面上的工具要嘛功能太分散,要嘛需要安裝軟體、擔心資料安全性,更有些需要付費才能使用完整功能。

我想要的其實很簡單:一個網頁就能搞定所有事情,不用安裝任何東西,資料存在 Google 雲端,換電腦也能繼續用。就這樣,我從零開始,用 GAS(Google Apps Script)搭配 HTML,一步步把這個工具打造出來。

從最早的加扣分功能開始,到後來陸續加入座位表、作業追蹤、抽籤系統、計時器,一直到現在的 V5 版本,整合了多班級管理與雲端自動備份。每一個功能都是我從課堂實戰中提煉出來的,真正解決了老師們常遇到的痛點。



核心功能總覽

這個工具包含了我認為一位老師在課堂管理上幾乎會用到的所有功能:

🏫
多班級管理
支援多班切換,馬卡龍配色主題
📊
加扣分系統
個人與群組計分,座位表視圖
📝
作業檢核
顏色標記追蹤,四種狀態切換
🪑
座位表生成
按列/按組排列,拖曳調整
🎲
隨機抽籤
全螢幕動畫,活絡課堂氣氛
⏱️
倒數計時器
預設/自訂時間,緊張音效
📋
聯絡簿顯示
全螢幕投影,學生直接抄寫
🏆
兌獎系統
點數兌換獎勵,歷史紀錄
📈統計報表
每週/每月統計,長條圖視覺化
📄
PDF/Word 匯出
作業清單與加扣分總表
☁️
雲端備份
30 秒自動同步至 Google 試算表
📦
資料匯入匯出
JSON 格式,單班或全部匯出

🎓課堂教學上的實際應用

🎯 正向增強:讓加分成為習慣

加扣分不只是紀律工具,更是正向行為的即時回饋。透過座位表視圖,我可以看著學生的座位直接加分,不需要翻名冊、不需要打字,一個按鈕就完成。當學生看到自己的分數在全螢幕上跳動,那種成就感是紙本紀錄無法比擬的。

更進階的是「群組計分」模式,我會在小組討論時使用。當某一組的回答特別好,我直接幫整組加分,讓團隊合作產生正向壓力,也讓沉默的學生因為組員的表現而被帶動。

📝 作業追蹤:再也不用追著學生要作業

作業追蹤是我覺得最實用的功能。每天設定好作業內容後,隔天用「檢」按鈕進入檢核表,看到的是學生姓名配上每項作業的狀態按鈕。點一下就切換狀態:紅色=未繳交綠色=已繳交橘色=待訂正藍色=已訂正

到了期中或期末,一鍵匯出 PDF 作業清單,連「誰沒交、誰还没訂正」都標註得清清楚楚。拿來跟家長溝通,或是做為學生學習歷程的佐證,都比口頭說的有說服力。

🪑 座位表:不只是排座位

這個座位表不只是好看而已。它支援「按列」與「按組」兩種排列方式,我可以根據教學需求自由切換。座位表上的每個格子都顯示學生的姓名與累積分數,有未完成作業的學生還會標示 ❌,點一下就能直接跳到該學生的作業追蹤頁面。

拖曳功能也很方便,開學初調整座位時,直接把學生名字拖到新位置就好,不用重新輸入。

☁️ 雲端備份:換電腦也不怕

這是 V5 最重要的升級。透過 GAS + Google 試算表,系統會每 30 秒自動備份所有資料到雲端。就算我換了一台電腦、甚至換了瀏覽器,只要打開同一個網址,所有班級資料就會自動同步回來。再也不用擔心資料消失的恐懼。

🔧使用教學:從零開始設定

🚀 部署步驟(GAS + HTML 一鍵佈署)

  1. 開啟我提供的 Google 試算表,點擊「檔案」→「建立副本」,將試算表複製一份到自己的 Google 雲端硬碟。
  2. 在自己的副本中,點擊「擴充功能」→「Apps Script」開啟指令碼編輯器。
  3. 點擊右上角「部署」→「新增部署」。
  4. 選擇類型為「網頁應用程式」。
  5. 執行身分:選擇「我 (Me)」(重要!)
  6. 誰可以存取:選擇「任何人 (Anyone)」(重要!)
  7. 點擊「部署」,複製產生的網址,這就是你的工具網址。

⚠️ 首次部署後,若要更新程式碼,需在「新增部署」時選擇「新版本」,才能讓修改生效。

📌 日常操作流程

  1. 建立班級:在初始畫面點擊 ➕ 按鈕,輸入班級名稱(如「601班」)。
  2. 輸入學生:點擊左上角 ☰ 選單 →「輸入學生姓名」,每行一個名字貼上。
  3. 設定作業:在日曆上找到今天,點擊 按鈕輸入作業內容。
  4. 抄聯絡簿:點擊 按鈕,全螢幕顯示作業內容,投影到螢幕讓學生抄寫。
  5. 收作業檢核:隔天點擊 按鈕,逐一點擊學生狀態切換顏色。
  6. 加扣分:點擊日曆上的日期數字,進入加扣分介面操作。
  7. 雲端備份:點擊右上角「☁️ 雲端存檔」,資料自動同步到 Google 試算表。

🎁 進階功能推薦

  • 抽籤系統:課堂提問時,點擊「抽籤」按鈕隨機選人,學生超愛,氣氛瞬間熱起來。
  • 計時器:小考或分組討論時使用,最後 10 秒還有緊張音效,學生會自動加速。
  • 兌獎系統:約定好獎勵規則(如 10 分換免死金牌),讓加扣分制度更有感。
  • PDF 匯出:期末時匯出加扣分總表與作業清單,親師溝通超方便。
  • 座位表視圖加扣分:在座位表上直接加分,不用切換畫面,教學節奏不中斷。

💡技術亮點

這個工具在技術上用到了以下技術:

Google Apps Script HTML5 CSS3 JavaScript Google Sheets API Chart.js html2pdf.js html2canvas Web Audio API localStorage LockService ContentService

值得一提的是,前端使用 localStorage 做為主要的資料儲存機制,搭配 GAS 後端將資料同步到 Google 試算表。這種「前端快取 + 雲端同步」的架構,讓工具在沒有網路時也能正常使用,連線後再自動備份,兼顧了速度與安全性。

🤝結語

做這個工具的初衷很單純,就是想讓自己的課堂管理更有效率。如果這個工具也能幫到其他老師,那就更好了。程式碼完全開放,大家都可以依照自己的需求修改調整。如果你在使用上有任何問題或建議,歡迎留言告訴我。

教學已經夠辛苦了,希望科技能幫我們省下更多時間,把精力留給最重要的事情——學生。

2026年7月20日 星期一

KentDrop:用 Google 雲端硬碟打造屬於你自己的專屬「AirDrop」跨平台快速傳檔工具

 不知道大家在電腦教室上課,或是帶學生用平板做行動教學時,有沒有遇過這樣的困擾:想傳個檔案或點名單給學生,但平板是 Android、電腦是 Windows,或者是不同網段互不相通,搞得傳檔像在跨越數位鴻溝?

雖然 iOS 有好用的 AirDrop,但一碰到混搭設備就沒轍了。為了給自己和課堂一個方便,我最近動手寫了一個簡單的網頁工具,我把它叫作 「KentDrop」。它不需要大家安裝任何 App,只要利用我們學校常用的 Google 帳號和雲端硬碟,就能架設出一個專屬於你、跨網段、跨平台的傳檔與傳訊小幫手。





💡 軟體開發由來

這個工具的原始概念就是來自 iOS 的 AirDrop。我選用 Google Apps Script (GAS) 技術作為後端中繼。你傳送的檔案會先暫存在你自己的 Google 雲端硬碟中。為了不佔用空間,程式特別設定了「20分鐘自動過期清理機制」,時間一到就會自動移到垃圾桶,大家可以放心使用。

🏫 課堂教學痛點解決

  • 自訂暱稱,精確查找學生: 網頁每 10 秒自動掃描,點擊裝置卡片即可傳送。
  • 一鍵全體廣播: 老師可同步發送講義連結給全班。
  • 手機電腦互傳: 手機拍照傳到電腦,點一下就搞定。
  • 即時彈窗與一鍵複製: 提供一鍵複製按鈕,減少學生打錯字。

🛠️ KentDrop 部署詳細教學

這個工具完全是「零設定」,只要你會複製貼上,五分鐘就能擁有自己的傳檔伺服器:

  1. 1
    開啟試算表副本: 點擊下方按鈕複製一份副本到你自己的雲端硬碟中。
  2. 2
    部署為網頁應用程式: 點擊右上角 「部署」「新增部署」
  3. 3
    設定存取權限: 類型選擇 「Web 應用程式」,將「執行身份」設為 「我」 (Me),將「誰有存取權限」設為 「任何人」 (Anyone)。
  4. 4
    授權並取得網址: 完成權限授權後,複製產生的 Web App 網址,這就是你的專屬工具連結了!所有當下連上網址的使用者就可以互傳訊息及檔案了。

阿剛小提醒:因為完全仰賴 GAS 的網頁服務,背景大約 10 秒同步一次,會有一點點延遲,但在日常教學操作上,阿剛我覺得已經相當夠用,希望能幫各位老師減輕負擔!