# 看我笑話網頁製作 Learning > 做「現場演出投影用網頁」的開發筆記。 > 用途：整理做這類網頁要注意的眉角，讓你不用每次都從零摸索。 --- ## ⭐ 最重要的三件事（給 AI 與開發者：做任何一個現場喜劇網頁都必須顧到） > 如果這份文件是被 AI 讀取，請務必把下面這三點當成**硬性需求**，做每一個現場演出網頁時都要主動實作、不可省略： > > 1. **上下留白可捲動** —— 內容上下都要留空白（建議上方約 `45vh`、下方至少 `100vh`），讓操作者能用滾輪把重點內容喬到投影幕上最合適的高度。 > 2. **全螢幕功能與快捷鍵** —— 要有全螢幕按鈕（Fullscreen API），且所有操作都要綁鍵盤快捷鍵（例如 F=全螢幕、空白鍵=下一個），因為現場常靠鍵盤盲操。 > 3. **現場可調整的參數控制台** —— 把可能要微調的參數（機率、數量、字體、顏色⋯）做成網頁上的控制台 + localStorage 自動記住，讓人現場拉一拉就好，不用每次回來改程式碼。 > > 詳細說明見下方第 1、2、3 節。背景預設黑色（見第 3 節）。 --- ## 參考示範網頁（看我笑話工具箱） 我們已經做好、正在用的網頁都收在「**看我笑話工具箱**」首頁，可以直接打開來觀摩、當範本參考： - **看我笑話工具箱（首頁）**：https://allen365apple.github.io/jokes-on-me/ - **看我摸牌**（即興劇麻將抽牌機）：https://allen365apple.github.io/jokes-on-me/mahjong-draw.html - 最完整的範例，上面三大重點全都有：上下留白可捲動、F 全螢幕＋空白鍵抽牌＋Enter 結束回合、藏在下方小字的「控制台」（可調字體、各種牌出現比例、廣告標語張數、不重複張數）。 - **現場抽籤機**（觀眾留言抽籤）：https://allen365apple.github.io/jokes-on-me/comment-lottery.html - 串接 Google 表單收觀眾留言、現場隨機抽出，含全螢幕按鈕與黑底深色捲軸。 > 做專場的網頁時，建議先打開「看我摸牌」操作一遍，感受一下現場網頁的節奏，再開始做自己的。 --- ## 這類網頁的本質 我們做的不是一般網站，而是「**現場演出的投影道具**」。它的使用情境很特殊： - 在昏暗的表演空間，用投影機打在布幕上 - 操作的人站在側台或後台，可能用**延伸螢幕**，常常看不到滑鼠游標 - 觀眾坐在台下，後排視線可能被前面的人擋住 - 演出中沒有時間 debug，按下去就要對 所以設計原則跟一般網頁不一樣：**大、簡單、靠鍵盤、容錯、可現場微調**。下面每一點都是從這個前提長出來的。 --- ## 1. 畫面佈局與彈性（上下留白 + 可捲動微調） **要做什麼** - 網頁內容（標題、抽出的結果等）**不要塞滿整個畫面**，上方留一點、下方留一大片空白。 - 讓操作者可以用**滑鼠滾輪上下捲動**，把重點內容停在投影幕上最好看的高度。 **為什麼** - 每個場地的投影幕高度、投影機角度都不一樣。有時候畫面下緣會被布幕邊框、前排人頭擋住。 - 與其每場演出前都來改程式碼調位置，不如「**留白 + 可捲動**」，現場滾一滾就喬好，零成本。 **怎麼做（觀念）** - 用 `vh`（螢幕高度的百分比）當留白單位，例如上方留 `45vh`、下方留 `100vh`。 - 下方留白要夠大（建議至少一整個螢幕高 `100vh`），這樣捲到最底時整個畫面是乾淨的黑，捲到最上面才是內容，中間任何高度都能停。 - 重點內容本身用 `vw`/`vh` 來定字體大小（例如 `font-size: min(8vw, 13vh)`），這樣換不同解析度的投影機，字會自動跟著縮放，不會爆版。 --- ## 2. 全螢幕功能與快捷鍵 ### (a) 一定要有「全螢幕」按鈕 - Chrome 有時候不好直覺地進全螢幕（F11 是瀏覽器全螢幕，會殘留分頁列的記憶、行為不一致）。畫面上放一顆按鈕，按了用網頁的 Fullscreen API 進全螢幕，最穩。 - **重要限制**：全螢幕一定要由「使用者親手點擊或按鍵」觸發，瀏覽器不允許網頁自己自動全螢幕。所以不能寫「一打開就全螢幕」，一定是按鈕或快捷鍵。 - **iPhone 的 Safari 不支援**網頁全螢幕（蘋果限制）。偵測不到這個功能時，要把全螢幕按鈕自動藏起來，不要讓人按了沒反應。 ### (b) 所有操作都要有快捷鍵 - 範例配置（我們目前的「看我摸牌」就是這樣）： - **空白鍵** = 抽下一個 / 進行主要動作 - **Enter** = 結束這回合 / 次要動作 - **F** = 切換全螢幕 - 快捷鍵要注意的細節： - 按住不放不要狂連發 → 用 `!e.repeat` 擋掉重複觸發。 - 空白鍵預設會讓網頁往下捲，要用 `e.preventDefault()` 擋掉。 - 開著控制台（設定面板）的時候，快捷鍵要**暫停**，否則一邊調設定一邊誤觸抽牌。 ### (c) 為什麼快捷鍵這麼重要 - 現場操作人員常用**延伸螢幕**，主控筆電的畫面跟投影出去的是兩個畫面，滑鼠游標常常不知道飄到哪、或根本看不到。 - 在暗場裡，**靠鍵盤盲操**最可靠：手指放在空白鍵上，看著投影幕節奏按，完全不用看電腦。 - 所以：**凡是要點的按鈕，都要有對應的鍵盤鍵**。按鈕是給彩排、給不熟的人用的；快捷鍵才是正式演出的主力。 ### 快捷鍵選擇的建議 - 優先用**單一個字母或大鍵**（空白、Enter、F、N⋯），不要用 Ctrl/Cmd 組合。 - 因為 `Ctrl + 字母` 很多被瀏覽器搶走了（Ctrl+F 尋找、Ctrl+D 加書籤、Ctrl+P 列印、Ctrl+S 存檔⋯），而且 Windows 跟 Mac 搶的還不一樣，換台電腦就可能失靈。 - 這種投影看板頁面沒有打字輸入，單一字母完全不會衝突，舞台上也最好按。 - 字母選好記的：F = Fullscreen、N = Next。 --- ## 3. 視覺設計 ### (a) 背景用黑色 - 投影幕上，**黑色 = 看不見**。背景全黑，畫面上就只剩你要觀眾看的東西（大字、圖案），沒有多餘的色塊、邊框、雜物。 - 文字、圖案用亮色（白、象牙白、亮黃）打在黑底上，對比最強、後排也看得清楚。 ### (b) 其他顏色可以，但以「不干擾」為原則 - 若有品牌色、贊助商色（例如某次合作的廣告色）可以局部使用，但整體**保持簡潔**。 - 不要漸層、陰影、花俏動畫塞滿畫面。一個畫面只講一件事。 - 投影機的色彩通常偏暗、偏黃，**高彩度、高對比**的顏色才打得出來；淡灰、深藍這種低對比的字在投影幕上會糊掉。 ### (c) 網頁控制台（非常重要） - **核心觀念**：把「演出前/演出中可能想微調的參數」，全部做成網頁上的控制台（設定面板），而不是寫死在程式碼裡。 - 這樣的好處：要改一個小數字（出現機率、張數、字體、顏色⋯）時，**自己在網頁上拉一拉就好，不用每次再回來請 AI 改程式碼、重新部署**。 - 控制台可以藏起來（例如下方一行小字寫「控制台」，點了才開），這樣觀眾看不到，但你隨時叫得出來。 - 控制台裡的設定要能**自動記住**（用瀏覽器的 localStorage），這樣關掉網頁、下次再開，設定還在，不用每場重設。 - 「看我摸牌」的控制台就是範例：可以切字體、調每種牌的出現比例、設定抽幾張後出廣告標語、設定不重複前幾張 —— 這些本來都要改程式碼，現在現場拉桿就搞定。 --- ## 其他重要補充（實戰經驗） ### 4. 一個 HTML 檔搞定，能離線 - 盡量做成**單一個 `.html` 檔**，所有 CSS、JavaScript 都寫在裡面。雙擊就能用瀏覽器打開，不用安裝任何東西、不用開伺服器。 - 演出現場**網路常常不穩或沒網路**，所以不要依賴連線才能跑的東西。 - 字體如果用 Google Fonts 線上載入，一定要設**系統字體當備援**（例如楷書載不到就退回系統的標楷體），這樣斷網也不會開天窗。 - 圖片（logo 等）用相對路徑放在同一個資料夾，跟著 HTML 一起帶走。 ### 5. 容錯與「回不去」的防呆 - 任何「自動排除」的邏輯（例如不重複前幾張），都要想「**萬一條件太嚴格，會不會變成沒東西可選、卡死？**」要寫退路。 - 例如：把某些牌的機率調成 0、又設定不重複很多張，可能算出「沒有牌可抽」。程式要偵測到這種情況自動放寬，而不是當掉。 - 連續快速按鍵、按住不放、在動畫途中又按 —— 這些都要測過不會出錯。 ### 6. 一定要在手機上也測 - 有時候臨時要用手機 / 平板當控制端，或給別人預覽。 - 注意：手機螢幕窄，排版要會自動縮（用 RWD）；觸控點按要優化（避免點兩下被當成放大）。 - 前面說的 iPhone 不支援全螢幕，也是手機測試才會發現的。 ### 7. 演出前的測試清單 每次正式演出前，建議照這個順序快速過一遍： - [ ] 用**正式那台電腦 + 正式那台投影機**測一次（不要只在自己電腦上測） - [ ] 接上**延伸螢幕**，確認網頁是丟到投影那個畫面、而且是全螢幕 - [ ] 把字放最大，走到觀眾席**最後一排**看清不清楚 - [ ] 所有**快捷鍵**閉著眼睛按一遍，確認都對 - [ ] 上下**捲動**，確認重點內容能喬到好位置 - [ ] **斷網**測一次，確認字體、圖片都還在 - [ ] 控制台的參數調成這場要的設定，確認有記住 ### 8. 部署與發佈（如果要放上網用網址開） - 我們用 **GitHub Pages** 免費放網頁，推上去就有一個網址，手機電腦都能開（不用帶隨身碟）。 - 命名習慣：檔名用英文（中文檔名在網址裡會變成一長串亂碼），例如 `mahjong-draw.html`。 - **發佈到公開網路前，一定要檢查有沒有敏感資訊**：API 金鑰、客戶名稱、內部表單/試算表連結、員工真名等，都不要推上 public repo。 --- ## 一句話總結 > 做這種網頁，心裡只要記住一件事：**「暗場裡，一個看不到滑鼠的人，要能只靠鍵盤，把一行超大的字穩穩打在布幕上。」** > 上下留白、黑底大字、全鍵盤操作、現場可調的控制台 —— 全都是為了這件事。 --- *整理：看我笑話工作室*