今天的目標：

當要整理 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。如果不想錯過可以訂閱按讚小鈴鐺（？），也歡迎留言跟我說你還想知道什麼做法/主題。我們明天見。