iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Modern Web

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

D22 - 如何用 Apps Script 自動化地創造與客製 Google Slides?(三)一次看完所有檔案的預覽

  • 分享至 

  • xImage
  •  

今天的目標:

當要整理 Google Drive 時,會發現好多的檔案、文件不確定哪個要怎麼做。一個個開好麻煩,如果可以一次開完知道裡面有什麼有多好。而今天就算是要幫大家做好「預覽整理」,在 Google Slides 上列出檔案的預覽圖、檔名與連結。

預計今天的結果是長這樣——

而對應的關鍵問題——

  1. 如何在 Google Slides 上列出指定資料夾中檔案的「檔名」與「預覽圖」?

好,那就讓我們開始吧!

Q1. 如何在 Google Slides 上列出指定資料夾中檔案的「檔名」與「預覽圖」?

讓我們借用一下 D15 生出的案例頁面。當我們在整理檔案時,常常會有這樣的畫面——一個個點開,慢慢找、慢慢整理。

但通常這樣會花不少時間。所以今天我們會帶大家來看看怎麼加速這流程。

輸入

  • 目標資料夾的 ID:當然可以選擇從根目錄開始,但我們這邊先帶來比較常用的「指定資料夾」
  • 指定的 Google Slide:我們這次選擇「綁定 Google Slide」來進行(參閱 Step 1)

輸出

  • 一頁頁附有「檔案名稱」、「檔案連結」與「檔案預覽圖的」Slides,資料夾中有多少檔案就生出多少張對應的 Slide。

預計會變成這樣一張張的檔案 Slide。

Step 1 從 Google Slides 進入 GAS 並設定指定資料夾 ID

那這次我們用 Google Slides 進入 GAS,借用一下 D20 的影片。

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

那接著,我們來抓出 Google Drive 的 ID。一樣複習一下,每一個 Google 產品都有特定的 ID 如下圖。

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

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

var target_folder_ID = "your_drive_id_here"

接著,就是如何讀取裡面的檔案了。

Step 2 取得資料夾中的檔案

接著要列出裡面全部的檔案們,在 D9 - (一)列出所有檔案 ID 與相關資訊 我們有完整的文章,這邊一樣讓大家迅速複習一下。

function showAllFiles(){
  let folder = DriveApp.getFolderById(target_folder_ID);
  let files = folder.getFiles();
  while (files.hasNext()) {
  	let file = files.next();
	Logger.log(file.getName())
  }
}

再搭配 D15 的資料夾作為 Target Folder,跑起來會長這樣——

好,那接著就是要抓出檔案的「預覽圖」了

Step 3 用 getThumbnail() 抓出檔案的預覽圖並用insertImage放入 Slide 中

要抓出預覽圖,要使用 getThumbnail() 這項 DriveApp 的 API,這邊做的事很簡單:

  1. 抓出檔案後,在迴圈中用 let preview = file.getThumbnail() 抓出預覽圖的檔案
  2. 把預覽圖的檔案用 new_slide.insertImage(preview) 放入 Slide
  3. 把預覽圖用一個 border 設定黑色外框(hex color code: '#000000')讓視覺上更容易看見
function showPreviewOnSlides(){
  let folder = DriveApp.getFolderById(target_folder_ID);
  let slide = SlidesApp.getActivePresentation();
  let files = folder.getFiles();
  while (files.hasNext()) {
    let file = files.next();
    let preview = file.getThumbnail();
    let new_slide = slide.appendSlide();
    let image = new_slide.insertImage(preview);
	image.getBorder().getLineFill().setSolidFill('#000000')
  };  
};

跑起來長這樣——

這邊要補充一下,我們從 getThumbnail() 抓下來的檔案格式是 BLOB(Binary Large Object) 是一種檔案格式,通常抓下來 png、 pdf 或影片都有機會。在 GAS 的 Blob 中,大多都是 pdf,但也可能是 GIF, JPEG 或 PNG 等檔案。而我們這邊就是用其抓影像的 PNG 檔案。

好,接著我們要插入「檔案名稱」和「檔案連結」,這邊就有更多有趣之處了。

Step 4 插入文字方塊並「喬位置」

如果我們在原本的程式碼,再插入一個文字方塊會發生什麼事?

new_slide.insertTextBox("檔案名稱")

會長這樣——

會發現——

  1. 我們生成的物件是 First-In, Last-Out,後創造的會在越上層,以上面的案例為例,比較晚創造的「檔案名稱」會在「預覽影像」之前*
  2. 文字方塊會在預覽圖之下,且都是以左上角作為基準點。

*(在這邊用 FILO 是方便記憶,強調可以第一個從 Slide 上拿到的意思,實際上是資料型態 Stack 的特性)

換句話說,如果沒有特別設定,我們生成的物件會全部擠在左上角。那到底要設定什麼呢?要設定「放置位置」。在這邊,我們使用的 API 是 slide 中的 insertTextBox(text, left, top, width, height)。用法如下——

new_slide.insertTextBox("檔案名稱", 10, 20, 30, 40)

其中四個參數分別意思是——

  1. left 距離投影片最左邊多少 pt?上面程式碼的案例是 10pt
  2. top 距離投影片最上邊多少 pt?上面程式碼的案例是 20pt
  3. width 這個物件要多寬?上面程式碼的案例是 30pt
  4. height 這個物件要多高?上面程式碼的案例是 40pt

這四個數據要全有全無,換句話說要馬就一次包含長寬都設定,要馬就不要設定,目前的 API 不許我們胡來。這邊要特別說一下一個單位叫 pt,比較常在設計物件時會用到這單位。而今天我們主要要知道它怎麼換算成公分即可,以下是一份簡單的換算圖。

所以實際上我們要怎麼用呢?我們可以透過點取「隨意 Page Element 物件」的「格式選項」,就可以看到一個「位置」,來看其中的數值,抓出你大概想放哪。

影片中的範例,則是 X 要為位於 11.29 cm。所以代表我們的 left 要設定為 11.29 * 28.3 大概是 320,這邊我就抓 300。寬與高也是如法炮製,這邊就直接設定為——

new_slide.insertTextBox("檔案名稱", 300, 0, 300, 300)

那再加上要得到的文字與資料夾位置,完整的程式碼如下——

function searchAllPreviewInTheFolder(){
  let folder = DriveApp.getFolderById(target_folder);
  let slide = SlidesApp.getActivePresentation();
  let files = folder.getFiles();
  let folder_name = folder.getName();
  while (files.hasNext()) {
    let file = files.next();
    let preview = file.getThumbnail();
    let new_slide = slide.appendSlide();
    let file_name = file.getName();
    let image = new_slide.insertImage(preview);
    image.getBorder().getLineFill().setSolidFill('#000000')
    new_slide.insertTextBox(folder_name+'\n'+file_name + '\n\n' + file.getUrl(), 300, 0, 400, 400);
  };  
}

跑起來長這樣——

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

  1. 如何讀取 Google Drive 中檔案的預覽
  2. 如何將圖片插入到 Google Slides 上
  3. 如何將文字方塊插入到 Google Slides 上並調整位置

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


上一篇
D21 - 如何用 Apps Script 自動化地創造與客製 Google Slides?(二)自動化爲鐵人賽的每一篇貼文生封面圖
下一篇
D23 - 如何用 Apps Script 自動化地創造與客製 Google Slides?(四)一次抓出所有簡報中的「特定文字」與備註
系列文
整合 Google 服務的燃料——透過 Google Apps Script (GAS) 加速你的工作速度30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言