GAS + HTML 一鍵佈署 ・ 免伺服器 ・ 免寫程式
軟體由來
在學校工作，常常需要製作「成果網站」：領域成果展、課程成果、評鑑資料、學生活動作品集……樣樣都要放在網路上給大家瀏覽。
最偷懶的做法，就是把雲端硬碟資料夾的「共用連結」直接當成網站連結交出去。但這樣一來，訪客看到的就只是一堆資料夾與檔名的列表，既不好看，也不夠專業。更麻煩的是，有些公文會特別要求：不可以用雲端硬碟的方式來呈現網站成果。
為了同時滿足「好看」與「合規定」，我寫了這套工具──「雲端典藏庫」。做法很單純：把程式的試算表複製一份，放到成果資料夾中，再部署成網頁，原本平凡的雲端硬碟資料夾，就會化身為一個乾淨漂亮的網站，檔案可以直接在頁面上預覽，也可以一鍵下載。
沒有自己的伺服器？沒關係。
不懂網頁程式？也不用怕。
只需要一個 Google 帳號，就能做出專屬的成果典藏網站。
課堂教學應用
這套工具非常適合學校各種需要「對外展示」的情境，不用花任何經費，也不用申請伺服器空間：
成果評鑑
將評鑑佐證資料、教學成果整理成網頁，取代零散的資料夾共用連結，呈現更專業。
學生作品集
把學生的作品、照片、報告統一收進資料夾，家長與訪客可輕鬆線上瀏覽下載。
教材資源庫
將各科教材、研習講義、會議資料分類存放，成為全校共用的數位資源中心。
活動紀實
活動照片、影片、新聞稿直接展示，點開即可預覽，不必再逐一傳檔給家長。
整個網站會「跟著資料夾走」：試算表放在哪一個資料夾，網站的首頁就顯示那一個資料夾的內容，子資料夾可以繼續往內層瀏覽，就像逛一個真正的網站一樣。資料夾與檔案隨時更新，網站內容也同步呈現，不必重新部署。
功能特色
五種視覺主題
極光、深色玻璃、透白玻璃、淡藍海洋、淡橘晚霞，一鍵切換網站風格。
檔案線上預覽
點擊檔案直接彈出預覽視窗，PDF、文件、試算表、簡報、影片皆可即時檢視。
一鍵下載
每張檔案卡片都附下載按鈕，訪客可直接儲存所需檔案。
圖片縮圖牆
圖片類檔案自動顯示縮圖，滑鼠移過還有放大效果，瀏覽更直覺。
快取與預載入
資料夾內容自動快取並於背景預載，再次瀏覽近乎秒開。
麵包屑導覽
多層資料夾以麵包屑呈現，隨時回到上一層或大廳。
公告區塊
可在網站頂端顯示公告文字與超連結，重要訊息一眼可見。
手機也能用
響應式設計，電腦、平板、手機瀏覽都舒服。
使用詳細教學
建立副本後，先別急著部署，讓我們先認識一下「控制台」──也就是試算表裡的兩個工作表：
- 系統設定
網站的大腦。在這裡設定網站標題、副標題、公告內容、視覺主題，以及是否顯示 Google 原生檔案（文件、試算表、簡報）。
- 設定說明
內建的小抄，每個設定項目的參數說明與可用數值範例都寫得清清楚楚，遇到疑問翻這頁就對了。
「系統設定」工作表提供以下可調整項目：
設定好之後，把試算表副本放進你要展示的成果資料夾中，接著進行最後一步──佈署。順帶一提，作為資料庫的這份試算表，網站會自動將它隱藏，不會出現在成果頁面上，可以放心放進資料夾裡。
佈署說明
這套工具採用「GAS + HTML 一體佈署」模式，程式碼與網頁都已內建在範本中，你不需要貼任何一行程式碼，只要跟著以下四個步驟：
- 建立副本
點擊下方的「立刻取得雲端典藏庫」按鈕，按「建立副本」，系統會自動將一份試算表副本存進你的 Google 雲端硬碟。
- 放入成果資料夾
將這份試算表副本移動到你希望展示的成果資料夾中（也可直接在該資料夾中建立副本）。網站首頁將以這個資料夾的內容作為入口。
- 部署為網頁應用程式
在試算表中點擊「擴充功能」→「Apps Script」開啟指令碼編輯器，點擊「部署」→「新增部署」，選擇類型「網頁應用程式」，執行身分選「我 (自己的帳號)」，存取權限選「知道連結的使用者」。部署完成後取得的網址，就是你的成果網站！
結語
讓成果被看見，不該被資料夾限制
製作成果網站，本來就該是一件「把心力放在內容」的事，而不是煩惱伺服器、網頁程式這些技術門檻。
這套「雲端典藏庫」讓任何人，都能用最熟悉的雲端硬碟，花幾分鐘佈署出一個像樣的成果網站。檔案可以預覽、可以下載，內容跟著資料夾自動更新，既符合規定，也讓每一次的成果展現，都更有面子。
如果對使用上有任何想法或建議，歡迎隨時跟我說，我會繼續把它做得更好。
沒有留言:
張貼留言