目標：
當要整理 Google Drive 時，會發現好多的檔案、文件不確定哪個要怎麼做。一個個開好麻煩，如果可以一次開完知道裡面有什麼有多好。而今天就算是要幫大家做好「預覽整理」，在 Google Slides 上列出檔案的預覽圖、檔名與連結。
預計今天的結果是長這樣——
而對應的關鍵問題——
- 如何在 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，這邊做的事很簡單：
- 抓出檔案後，在迴圈中用
let preview = file.getThumbnail()抓出預覽圖的檔案 - 把預覽圖的檔案用
new_slide.insertImage(preview)放入 Slide - 把預覽圖用一個
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("檔案名稱")
會長這樣——
會發現——
- 我們生成的物件是 First-In, Last-Out，後創造的會在越上層，以上面的案例為例，比較晚創造的「檔案名稱」會在「預覽影像」之前*
- 文字方塊會在預覽圖之下，且都是以左上角作為基準點。
*（在這邊用 FILO 是方便記憶，強調可以第一個從 Slide 上拿到的意思，實際上是資料型態 Stack 的特性）
換句話說，如果沒有特別設定，我們生成的物件會全部擠在左上角。那到底要設定什麼呢？要設定「放置位置」。在這邊，我們使用的 API 是 slide 中的 insertTextBox(text, left, top, width, height)。用法如下——
new_slide.insertTextBox("檔案名稱", 10, 20, 30, 40)
其中四個參數分別意思是——
left距離投影片最左邊多少 pt？上面程式碼的案例是10pttop距離投影片最上邊多少 pt？上面程式碼的案例是20ptwidth這個物件要多寬？上面程式碼的案例是30ptheight這個物件要多高？上面程式碼的案例是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);
};
}
跑起來長這樣——
好，那今天就到這邊。今天我們主要學了：
- 如何讀取 Google Drive 中檔案的預覽
- 如何將圖片插入到 Google Slides 上
- 如何將文字方塊插入到 Google Slides 上並調整位置
今天進入了 Slide 的第三天，希望對大家有所幫助。如果還有問題，透過留言之外，也可以到 Facebook Group，想開很久這次鐵人賽才真的開起來，歡迎來當 Founding Member。如果不想錯過可以訂閱按讚小鈴鐺（？），也歡迎留言跟我說你還想知道什麼做法/主題。我們明天見。