目標
今天要教要怎麼樣快速改客戶名稱後交出投影片。 如果在「需要大量製作時」，有時會發現其中某個單字、單詞錯誤，但投影片已經多達數百張，比起一張張做，透過 GAS 可以幫你省點時間。無論是報告或是分享，現在 Google Slide 已經是許多人的首選，尤其是要共同編輯時更是如此。今天會講述 Google Slides 的大架構，以及如何微調其中每一頁（有出現）的文字。
- 如何更改 Google Slide 的中的特定文字？
那就讓我們開始吧。
先來個小測驗
// Open a presentation by ID.
let my_slide = SlidesApp.openById('PRESENTATION_ID_GOES_HERE');
// Create and open a presentation.
new_slide = SlidesApp.create('Presentation Name');
- 這是官方的第一個 Google Slides 入門範例，請問透過上述程式碼，回傳的
my_slide和new_slide會是什麼物件？
（Ａ）Presentaion
（Ｂ）Slides
（Ｃ）Slide
（Ｄ）Page
（Ｅ）Pages
（Ｆ）Master
- 再來第二題——
（備註，答案確定在有列出的 Element 選項中）
那就讓我們開始吧！
因為這是 Slides 的第一天，我們會先從其架構開始，架構的重要，從小測驗就可以略知一二。小測驗第一題的答案是（Ａ），第二題是 shape 和 table 中的 TextRange （要回答出 range喔，這是個小陷阱！）。那就讓我們繼續看下去。
Google Slides 的架構
先來瞭解一下 Google Slides 有哪些架構。其主要分成兩大塊，一塊叫做 Pages，一塊叫做 Pages Element。
頁面（Page）部分主要有分成三種，一種是投影片（Slides），也就是我們平常最常用的；一種是版面配置（Layout）；最後一種是主題（Master）。另外還有兩種是備忘稿（Note）與備忘稿主題（Note Master）。
在這邊要特別釐清說，雖然我這邊直接用「主題」來翻譯 Master，但實際上「主題」（Theme）的比較嚴謹定義會是由母版（Master）與版面配置（Layout）一起組成的。
我們這裡主要會說明的是「投影片」（Slides），但如果有興趣深造做連動，可以來瞭解一下頁面間的繼承關係（Inheritance of page properties）
至於頁面元素（Page Element）則是在頁面上，不管是投影片、版面配置或主題上的所有元素。
換句話說，整個 Google Slide 都會有這樣的資料架構——
為什麼這個重要呢？因為先總覽知道有哪些可以調配的元素，可以協助我們更好地運用 Google Slides 裡面的內容。舉例來說，就會知道一開始我們在 GAS 要用 openById 打開來的會是 Presentation；要調整投影片版面大小的話，要動用 Presentation 的 pageSize ；以及你就會發現，原來每一個 page element 其實都可以設定 title (setTitle) 與 description，這對於我們之後要自動化會有很大的幫助。
順帶一提，這 title 的設置也是種設置替代文字（alt）的方式。在美國，企業會被要求所寫的網頁符合一定程度的無障礙規範，也就是要讓視障者等也可以閱讀。
以及，我們平常的打字，都是位在「文字方塊」（Text Box）當中，而文字方塊在 Google Slides 中是被歸屬為一種 Shape。但如果說哪裡可以取得文字，那 shape、table 內是都有機會的。
Ref: Google Slides Developer APIs
Q1. 如何更改 Google Slide 的中的特定文字？
當然，如果是一篇篇打開用 ctrl + F 也是可以做到的。但當要改的字很多、抑或是要改的量很多時，就沒有那麼容易了。這次會帶大家做怎麼樣改單篇 Google Slides 裡面的「字」，再來會再用一篇讓大家知道怎麼樣自動化這個流程。
那我們先設定一份 Slide 檔案，一樣借用某書的內容。
Step 1 從 Google Slides 進入 GAS
那這次我們用 Google Slides 進入
一樣第一次會有存取驗證需要大家按一下。這邊仍是借用一下 D2 的影片。
那我們就來看怎麼讀取吧。
Step 2 用 getSlides() 抓到投影片
我們先用 SlidesApp.getActivePresentation() 抓出正在綁定的文件，如果你不是從 Step 1 進入 GAS，那可以用 SlidesApp.openById()；那我們主要會針對 Slides 的部分進行操作，所以透過 getSlides() 來取得每一個 Slides。針對每一個 Slides，我們都用一個 for 迴圈來取得裡面的資料。
function readSlides() {
let pres = SlidesApp.getActivePresentation();
let slides = pres.getSlides();
for(slide of slides){
Logger.log(slide)
}
}
看一下跑起來長怎樣——
好，確實有讀到 六張 Slide。再來就是讀取上頭的元素了。
Step 3 用 getPageElements() 抓到投影片上的元素
那抓到投影片後，又要怎麼抓到上面的元素呢？這時要用 getPageElements() 了。一樣要再加上一個 For 迴圈才行，這邊直接將程式碼加速到讀上面的物件。
誠如我們在「結構」那段所說，我們今天要抓的「文字」是屬於「Shape」Object 的一種，所以我簡單弄了一段程式碼出來，看一下在每一頁會讀到什麼元素。
function readPageElements() {
let pres = SlidesApp.getActivePresentation();
let slides = pres.getSlides();
for(let i = 0; i < slides.length; i++){
let slide = slides[i];
Logger.log("We load the No."+ (i+1) +" slide");
let page_elements = slide.getPageElements();
for(page_element of page_elements){
if(page_element.getPageElementType() == SlidesApp.PageElementType.SHAPE){
let text_range = page_element.asShape().getText();
Logger.log("Get a " + text_range + " in a shape");
}else{
Logger.log("Get a object which type is " +page_element.getPageElementType());
}
}
}
}
看一下跑出來的結果——
會發現，跑出來的 Page Element 會有 Shape 、Table 和 Image，也就是我們預設在 D20 投影片裡面的元素。
雖然說我們知道 「文字」 會位在 Page Element 中的 Shape 底下，實際上我們直接用下列程式碼抓下來的，會是 Text Range Object。
會需要再用 getRenderedString() 才能讀到「現在顯現的文字」，另外也可以用getParagraphs() 等方法能讀取到段落等。讀取起來長這樣——
更多的 Text Range 操作細節，可以參考的文章 D19 – 如何用 Apps Script 自動化地創造與客製 Google Docs？（六）更改特定內容格式的 Attribute 操作技巧，概念上是相通的。
那講到這邊，我們要怎麼「更改內容」？這邊我們預設的使用場景，是要更換顧客名稱等，所以我們先來看最方便的 「全部更改」。
Step 4 全部更改： replaceAllText(findText, replaceText)
以下的程式碼我們想將所有的「句號」換成「驚嘆號」。
function rewritePunctuation() {
let findText = "。";
let replaceText= "！";
let pres = SlidesApp.getActivePresentation();
let slides = pres.getSlides();
for(let i = 0; i < slides.length; i++){
let slide = slides[i];
Logger.log("We load the No."+ (i+1) +" slide");
let page_elements = slide.getPageElements();
for(page_element of page_elements){
if(page_element.getPageElementType() == SlidesApp.PageElementType.SHAPE){
let text_range = page_element.asShape().getText();
Logger.log(text_range.asRenderedString());
text_range.replaceAllText(findText, replaceText);
}
}
}
}
跑起來長這樣——
好，看來是有成功。我們這邊用比較簡單的案例來讓大家看效果，如果要做成「改客戶名稱」、「改日期」等等的，都可以用這個方式辦理。
好，那今天就到這邊。今天我們主要學了：
- Google Slides 的架構
- 如何用 GAS 操作 Google Slides 的
Presentation，以及Shape中的TextRange - 如何更改（替換）其中的內容。
那今天進入了 Slide 的部分，一樣先講解了最常會遇到的情境，也就是替換文字。希望對大家有所幫助。如果還有問題，透過留言之外，也可以到 Facebook Group，想開很久這次鐵人賽才真的開起來，歡迎來當 Founding Member。如果不想錯過可以訂閱按讚小鈴鐺（？），也歡迎留言跟我說你還想知道什麼做法/主題。我們明天見。