2014年12月7日 星期日

(終極版)用Google Slide與Sheet製作電子看板(Digital Signage) ~~~ 硬體建置最低成本! 軟體永久免費!

晚上11:18 Posted by Envisioning U-Commerce Lab

這篇文章(尚未完成)大部分介紹程式開發過程中循序漸進寫出來的四個版本,然後在課堂上逐一解說程式設計重點。


在開始介紹此程式開發歷程之前,應有認知:  Google Apps Script: 3.3B weekly executions; 8.7M weekly end users; and 270K weekly developers.Container-bound Scripts v.s. Standalone Scripts




首先,參考第一版Google Sheet「電子看板 (v.1 GAS 執行 TriggerBulider for appending Slider)」建立副本,由於原來的Google Sheet是已經有一個連動的Google Form(如下圖的[報到]工作表名稱前有紫色圖示),所以建立副本也應該有產生出兩個檔案(至雲端硬碟查看)




除了前述兩個檔案,還要有一個Google Slide簡報檔做為電子看板版面,用這個Google Slide「電子看板 (v.0 通用 Presentation Layout for Digital Signage)」建立副本。乍看之下,怎麼只是一個空白的Slide檔案? 是的,這個Slide的頁面都是要準備以Google Apps Script產生,所以裡面不該有任何已存在的頁面,後續都不要自行加入或刪除頁面。


重點是這個Slide的主投影片裡面已經有幾個設計好的版面了,開啟編輯主投影片就能看到每個版面裡都加上一些圖文框了,圖文框內的文字則是以大括號{}標示的關鍵字,這是為了後續以Google Apps Script產生相關內容套到指定位置上。



等你看懂圖文框的設計概念,以後都可以自己修改或增加自訂的版面,但是要記得最後一個空白版面不要刪除喔!





前述圖文框內以大括號{}標示的關鍵字,就是準備要將Sheet的[輪播資訊]工作表的各欄位資料套上去的,有點像套表列印的概念,由Google Apps Script將這些欄位資料一一套到前述Slide的版面位置及字型樣式大小呈現出來。



對於Slide與Sheet兩個檔案的關係有了基本認識後,就開始執行是綁定在Spreadsheet自訂選單的函式。(下圖的[自訂功能]選單是用Script程式產生出來的,有關addMenu自訂選單並將其寫在onOpen函式的介紹就不再贅述。)


第一次會跳出對話框要求授權,當然後續每一步都要同意允許(就省略擷取畫面囉)


出現側邊欄讓使用者指定於每日幾點進行資訊上架,以及輸入Slide的網址(執行後會將其記錄在[設定參數]工作表B2儲存格)。





這個版本重點是參考在Sidebar置入表單範例在Sidebar置入HTML語法,呈現表單讓使用者指定於每日幾點進行資訊上架,以及輸入Slide的網址,表單填好送出就會依sendForm設定去執行addTwoTriggers函式,而其callback設定會回到ready執行google.script.host.close()側邊欄關閉。至於觸發條件設定,一種是要緊急插播的資料存進[表單回應]工作表就要自動將指定欄位複製到[輪播資訊]工作表Script程式重點是在addTwoTriggers函式,newTrigger對於forSpreadsheet設定onFormSubmit表單資料進來時就觸發submissionChecking函式。另外一個要設定的觸發條件,要設定每日幾點進行資訊上架/下架處理,Script程式重點是newTrigger對於forSpreadsheet設定timeBased時間觸發timebasedSlideUpdate函式。另外也做了檢查,若重複執行就要刪除先前設定的觸發條件(程式語法和邏輯會在課堂上說明,而且在程式碼裡面也有語法範例參考網址。)



submissionChecking函式的重點,就是判斷存進[表單回應]工作表的新資料是否需要緊急插播,若是就要立即執行informationCloning函式,從[表單回應]工作表將指定欄位複製到[輪播資訊]工作表,然後再執行appendingSlide函式appendSlide在Slide新增一個空的頁面。至於timebasedSlideUpdate函式的部分,這個版本先空白著


那就來測試看看,在表單填入第一筆資料,緊急插播目前只能選"是",代表填完資訊就立即產生到Slide上。


果然第一筆資料不只是存進[表單回應]工作表,也立即複製到[輪播資訊]工作表



再到Slide檔案來看看,確定有新增一個空的頁面,如此即代表程式已正確執行完成。









接下來,以第二版Google Sheet「電子看板 (v.2 GAS 加上 Slide replaceAllText & insertImage)」建立副本,這個版本重點是appendingSlide函式能將Sheet的[輪播資訊]工作表的各欄位資料套上Slide的圖文框內以大括號{}標示之處,而且是依據取得某個版面,再取得版面裡的Shapes,一一複製Shape到本來空白的頁面上,然後再將指定文字取代以及將Shape以Image取代之



再到Slide檔案來看看,由Google Apps Script將這些欄位資料一一套到前述Slide的版面位置及字型樣式大小呈現出來了。(這個示範的版面設計時都將圖文框轉了90度,是因為大部分電子看板都會掛成直立的,所以呈現內容就要自己先轉90度。)







暫時來到目前最後一個版本,以第三版Google Sheet「電子看板 (v.3 GAS 加上 Time-based Slide Update Function)」建立副本,這個版本重點是timebasedSlideUpdate函式將會在使用者指定的每日幾點被觸發後進行資訊上架/下架的程序,而其中的下架處理會對Sheet的[輪播資訊]工作表刪除要下架之列,也會對Slide的頁面取得該頁的備忘稿,進一步取得Shapes陣列,再取得TextTange字串,然後就可判斷備忘稿記錄的序號是否為應刪除頁面之序號,應該下架的頁面就將其移除


由於timebasedSlideUpdate函式是在指定的每日幾點才會被觸發執行,為了要測試其執行結果,就自己手動在指令碼編輯模式下執行該函式。但在執行之前,應該是你已經從Google表單輸入的幾筆資料了,包括有一兩筆是應該當日上架但未設定為緊急插播的,以及有一兩筆是應該當日下架的,這樣才能測得執行結果是否正確。






一切測試都沒問題後,就可以將Slide發佈到網路上囉。






為何這篇文章的標題強調~~~"硬體建置最低成本! 軟體永久免費!",因為只要有個大螢幕插上一隻可連網的電腦棒(例如Chromebit不到三千元),以電腦棒的瀏覽器開啟發佈網址(並啟用像是Auto Refresh這種外掛程式讓瀏覽器每隔一定時間就自動做重新整理以確保呈現最新的簡報內容),並將瀏覽器顯示切成全螢幕模式,就成為電子看板了,這樣硬體成本大約一萬元左右就能搞定。至於軟體,已經授權讓你建立在自己的Google雲端硬碟使用,Google雲端硬碟成為免費的伺服器用來播放電子看板內容囉。


官方連接示意圖