MasterSlides

問題

慈濟基金會的講座、會議內容多半寫在 Google Docs，播放時要用繁體中文，而且常是直書：由上而下、由右至左。負責準備的同仁不是工程師，常常只有上台前十分鐘把當天要播的幾份文件排好；一般簡報軟體對直書中文的支援又很有限。

我做了什麼

MasterSlides 把一份公開分享的 Google Doc 變成可分頁的簡報。同仁貼上連結、填好日期、標題和報告人，就得到一份可切換直書或橫書的簡報。畫面上的 QR code 一掃，手機就變成遙控器，可以翻頁、開雷射筆聚光、放大圖片。後台列出文件與公開狀態，刪除前先確認。簡報也能匯出 PDF 和可編輯的 PPTX。

運作方式

• 伺服器把文件匯出成 Markdown、轉成 HTML，圖片搬到檔案儲存，每個 doc id 只存一筆；重新匯入會連同圖片一起覆蓋。
• 日期、標題、報告人另存成欄位，由伺服器依此組出格式統一的第一頁。
• 分頁器把元素一個個放進「最後真正會顯示的那一頁」。一旦 scrollWidth 或 scrollHeight 顯示溢出，就把元素收回、另開新頁；單一段落太長時，用二分搜尋就地切開文字。字級、方向或視窗大小改變時重新分頁。
• 播放端和手機訂閱 drust 上每個房間各自的 WebSocket 頻道，指令由伺服器端點發佈。
• 同一套處理程式同時跑在 Bun 開發伺服器與 Cloudflare Pages Functions 上。

關鍵決策

• 排版交給瀏覽器。 分頁前後換過五種做法：Paged.js、CSS 多欄、用 pretext 以 canvas 量字、在隱藏容器裡二分搜尋，最後才是直接在真正顯示的頁面裡量。隱藏容器的做法在窄螢幕上會把直書最後一行切掉；改成在實際渲染的地方量測，兩邊就不會再不一致。
• 自行託管教育部標準楷書。 各平台內建的楷體在 macOS 和 iPad 上呈現不一，自帶字型才能確保每台裝置看起來一樣。
• 發佈 token 只留在伺服器。 瀏覽器只用匿名 token 訂閱頻道；對房間發佈指令需要 service token，這把 token 從不離開伺服器。
• 從 Supabase 搬到 drust。 早期版本用 Express 和 Socket.io，之後改跑在自架 Supabase 上。2026 年 5 月底先搬儲存，6 月初再搬即時通訊，都搬到自己寫的 BaaS。

成果

原始碼公開在 GitHub：2026 年 1 月到 6 月由我一人完成；8 份設計規格各配一份實作計畫，74 個測試涵蓋轉換、分頁、儲存與播放清單。開發方式是用 Claude Code 跑 spec → plan → implement → review 的循環。