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