iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

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

D21 - 如何用 Apps Script 自動化地創造與客製 Google Slides?(二)自動化爲鐵人賽的每一篇貼文生封面圖

今天的目標:在簡報快速標上大量客製內容

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

這種大量重複的內容用 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 的後段部分喔!程式碼範例如下——

Uploading file..._ozsh1o0ql

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?(一)架構拆解與更改文字

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

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. 針對每一個範本的投影片,再對其中元素進行客製化調整

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

今天進入了 Slide 的第二天,希望對大家有所幫助。如果還有問題,透過留言之外,也可以到 Facebook Group,想開很久這次鐵人賽才真的開起來,歡迎來當 Founding Member。如果不想錯過可以訂閱按讚小鈴鐺(?),也歡迎留言跟我說你還想知道什麼做法/主題。我們明天見。


上一篇
D20 - 如何用 Apps Script 自動化地創造與客製 Google Slides?(一)架構拆解與更改文字
下一篇
D22 - 如何用 Apps Script 自動化地創造與客製 Google Slides?(三)一次看完所有檔案的預覽
系列文
整合 Google 服務的燃料——透過 Google Apps Script (GAS) 加速你的工作速度30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
sanithome
iT邦新手 2 級 ‧ 2023-02-14 11:13:06

請教一下,如果 google Slides 簡報a裡面其中一頁是連結其他簡報b,簡報b更新後,簡報a還需要"手動更新"才能更新簡報b內容,請問有沒有app script可以幾分鐘就"自動"檢查簡報b若有更新內容,就自動更新,而不用手動按更新~~謝謝

我要留言

立即登入留言