Google Apps Script 自動化地創造與客製 Google Slides？（二）自動化生每一篇貼文生封面圖（2021 鐵人賽 D21）

目標：在簡報快速標上大量客製內容

今天要教要怎麼樣快速改客戶名稱後交出投影片。 生活中我們不時需要「大量製作類似內容」，像是做要價格標示、日曆或是名牌等。先來看看今天學完的結果會長這樣——

這種大量重複的內容用 Google Sheet 來做的話，背後圖片、色塊顏色等不一定能參照；用 Google Docs 來做則要擔心排版會跑掉。更別提當數量超過百張時，有沒有什麼方式快速省時地做？比起一張張做，透過 GAS 可以幫你省點時間。今天會講述如何透過 Google Sheet 調整參數，並讓 Google Slides 自動客製。今天的關鍵提問只有一題——

1. 如何依據「投影片範本」與「目標資料」來自動化 Slide 的創造？

那就讓我們開始吧！

Q1. 如何依據「投影片範本」與「目標資料」來自動化 Slide 的創造？

主題目標設定——爲鐵人賽的每一篇貼文設定一個 Cover Page！

今天在想主題時，就想到鐵人賽的文章好像都缺乏了一個 Cover Page，想說趁這個機會來一鼓作氣做完。希望可以幫助到每個鐵人。

輸入：

這邊我們就來試著做鐵人賽這三十篇（目前第二十一篇）文章的標題，首先我們在 Google Sheet 上打上我們要的格式。我將前面二十篇的文章整理成下列格式——

輸出：

基本上這是我預期的輸出樣子，是用 Google slide 作成的投影片（也可以輸出成圖片）

我們暫時將上面這個版面，稱作「Template 1」。因為我有些文章是屬於同一系列的，我會想要加入多加入一些內容作為區隔，想像會是長這樣——

那我將上面這份，稱作「Template 2」。

基本的 Input / Output 設定好了，接著就是接起中間的 Process 了！

Step 1 從 Google Sheet 進入 GAS

那這次我們用 Google Sheet 進入 GAS，讓我們借用 D14 的影片。

複習一下，每一個 Google 產品都有特定的 ID 如下圖。

可以用我們下列的方式簡單取得，如果想複習完整內容，在 D9: 如何用 Google Apps Script 自動化對 Google Drive 的操作？（一）列出所有檔案 ID 與相關資訊 有完整的介紹可以參考。

這邊我們就如法炮製將要更動的 Google Slides ID 抓入。

var target_presentation_ID = "your_presentation_id_here"

這邊要多提一下的是，因為我們有兩個範本，所以除了 target_slide_ID 之外，還要另外拿兩個範本的 ID。兩者的差異如下圖——

要注意的是取的是 slide_id 的後段部分喔！程式碼範例如下——

var target_presentation__ID = "your_presentation_id_here";
var template_slide_ID_1 = "your_slide_ID_1";
var template_slide_ID_2 = "your_slide_ID_2";

怕大家還是有誤解，這邊影片再操作一次。

老樣子，GAS 第一次執行時，會有「存取驗證」需要大家按一下。這邊仍是借用一下 D2 的影片。

設定好之後，就可以進入到我們的範本時間囉！

Step 2 用 GAS 讀取 Google Sheet 要的資料

好，那我們接著就從 GAS 中讀取 Google Sheet 的資料。直接上程式碼與影片——

function readData(){
  let start_row = 2;
  let start_col = 1;
  let num_row = 21;
  let num_col = 2;
  let data = SpreadsheetApp.getActiveSheet().getRange(start_row, start_col, num_row, num_col).getValues();
  Logger.log(data)
  return data;
}

跑起來長這樣——

這邊如果有不熟，記得回 D4 – 如何透過 Google Apps Script 來整合 Google Form / Google Sheet 並自動寄出客製的 Email？ 看看，裡頭有說明 Google Sheet 的架構與資料取得。

Step 3 用 GAS 複製一張範本投影片並調整文字

好，那當我們可以讀近資料後，接著就是要將這段改成 Google Slide 中的一份份投影片。

我們先來看怎麼依據範本改投影片，先示範只改 Template 的，來上完整的程式碼——

function buildNewSlideFromTemplate(){
  let pres = SlidesApp.openById(target_presentation_ID);
  let template_1 = pres.getSlideById(template_slide_ID_1);
  let new_slide = template_1.duplicate();
  rewriteWords(new_slide, "主文字區範本", "測試文字測試文字測試文字")
}

function rewriteWords(target_slide, target_text, replace_text) {
  let findText = target_text;
  let replaceText= replace_text;

  let page_elements = target_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);
    }
  }
}

這段程式碼的目的，是複製範本一創造一張新的 Slide，並將其中的「主文字區範本」改成「測試文字測試文字測試文字」。

跑起來長這樣——

來細部拆解一下：

1. 首先用 SlidesApp.openById() 透過 ID 取得我們要操作的 Presentation
2. 再來用 .getSlideById() 透過 ID 取得我們的範本投影片
3. 再來用 duplicate() 複製，並將複製的內容接上昨天所寫的 rewriteWords（參考資料：D20 – 如何用 Apps Script 自動化地創造與客製 Google Slides？（一）架構拆解與更改文字）

好，如果複製一張投影片ＯＫ，那接下來就是怎麼樣大量複製並調整了。

Step 4 用 GAS 抓出 Sheet 中的資料，並用於自動化投影片的創造。

這邊我們就要接起 Step 2 和 Step 3。這邊一樣先上程式碼，先閱讀看看。

function buildSlidesFromTemplate(){
  let pres = SlidesApp.openById(target_presentation_ID);
  let template_1 = pres.getSlideById(template_slide_ID_1);
  let template_2 = pres.getSlideById(template_slide_ID_2);

  let data = readData();

  for (row_data of data){
    let new_slide;
    if (row_data[0]==''){
      new_slide = template_1.duplicate();
      rewriteWords(new_slide, "主文字區範本", row_data[1])
    }else{
      new_slide = template_2.duplicate();
      rewriteWords(new_slide, "主文字區範本", row_data[1])
      rewriteWords(new_slide, "輔文字區範本", row_data[0])
    }
  }
}

跑起來的影片長這樣——

看來是有成功。

好，那我們一樣一步步來解析——

1. 先設定好參數，用 ID 取得 Presentation （pres）、範本一（template_1）和範本二（template_1）
2. 再來，用 Step 2 的步驟取得 Sheet 中的資料，並用個 For 迴圈一列列讀出資料。讀出的資料（row_data ）就會是 [A2, B2] , [A3, B3] …. 以此類推。所以要取得 Google 中 A 欄的數值的話，要用 row_data[0]， B 欄要用 row_data[1]。 這邊不懂記得 D4、D4 還是提醒要看懂 D4。
3. 用一個 if 來分流說，如果 Google Sheet 中「系列」（A 欄）這一欄沒有數值的話，套用範本一，不然就套用範本二。
4. 將 Step 3 的程式碼接上去。

好，那這樣就完成了快速複製我們全部的 Cover page 了！

好，那今天就到這邊。今天我們主要學了：

1. Google Slides 中 Slide 的 ID 位置與如何呼叫
2. 結合 Google Sheet 中的資料來複製範本的投影片
3. 針對每一個範本的投影片，再對其中元素進行客製化調整

其中第三點是有最多變化的可能，包含換圖片、換表格、換背景顏色等…，但先用簡單的文字讓大家知道，其他的我們繼續玩下去。