iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

整合 Google 服務的燃料——透過 Google Apps Script (GAS) 加速你的工作速度系列 第 20

D20 - 如何用 Apps Script 自動化地創造與客製 Google Slides?(一)架構拆解與更改文字

  • 分享至 

  • xImage
  •  

今天的目標

今天要教要怎麼樣快速改客戶名稱後交出投影片。 如果在「需要大量製作時」,有時會發現其中某個單字、單詞錯誤,但投影片已經多達數百張,比起一張張做,透過 GAS 可以幫你省點時間。無論是報告或是分享,現在 Google Slide 已經是許多人的首選,尤其是要共同編輯時更是如此。今天會講述 Google Slides 的大架構,以及如何微調其中每一頁(有出現)的文字。

  1. 如何更改 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');
  1. 這是官方的第一個 Google Slides 入門範例,請問透過上述程式碼,回傳的 my_slidenew_slide 會是什麼物件?

(A)Presentaion
(B)Slides
(C)Slide
(D)Page
(E)Pages
(F)Master

  1. 再來第二題——

(備註,答案確定在有列出的 Element 選項中)

那就讓我們開始吧!


因為這是 Slides 的第一天,我們會先從其架構開始,架構的重要,從小測驗就可以略知一二。小測驗第一題的答案是(A),第二題是 shapetable 中的 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;要調整投影片版面大小的話,要動用 PresentationpageSize ;以及你就會發現,原來每一個 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 會有 ShapeTableImage,也就是我們預設在 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);
      }
    }
  }
}

跑起來長這樣——

好,看來是有成功。我們這邊用比較簡單的案例來讓大家看效果,如果要做成「改客戶名稱」、「改日期」等等的,都可以用這個方式辦理。


好,那今天就到這邊。今天我們主要學了:

  1. Google Slides 的架構
  2. 如何用 GAS 操作 Google Slides 的 Presentation,以及 Shape 中的 TextRange
  3. 如何更改(替換)其中的內容。

那今天進入了 Slide 的部分,一樣先講解了最常會遇到的情境,也就是替換文字。希望對大家有所幫助。如果還有問題,透過留言之外,也可以到 Facebook Group,想開很久這次鐵人賽才真的開起來,歡迎來當 Founding Member。如果不想錯過可以訂閱按讚小鈴鐺(?),也歡迎留言跟我說你還想知道什麼做法/主題。我們明天見。


上一篇
D19 - 如何用 Apps Script 自動化地創造與客製 Google Docs?(六)更改特定內容格式的 Attribute 操作技巧
下一篇
D21 - 如何用 Apps Script 自動化地創造與客製 Google Slides?(二)自動化爲鐵人賽的每一篇貼文生封面圖
系列文
整合 Google 服務的燃料——透過 Google Apps Script (GAS) 加速你的工作速度30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言