小技巧 - 從動態網頁抓取資料
緯育的 Java 養成班是一門將近五個月的長期課程，它們機構以網頁系統的方式提供課表給學生查詢。但是，我已經很習慣用自己的 Google 行事曆了，規劃生活行程都只想用它，不想另外上一個網站查課表。那麼，有辦法將網頁上的資訊以迅速有效的方式存下來，方便我後續整理、甚至移轉到行事曆上嗎？嘿，有的，而且其實並不難。這篇就來介紹我是怎麼做的。 作法 你可以從上圖看到，課表排成月曆的形式呈現，所以右鍵複製下來也難以處理。Google 試算表內建有 IMPORTHTML() 和 IMPORTXML() 兩種用來抓取資料的函式，但是我覺得它們沒那麼好用，發揮空間不大。因此，我最後選擇：直接取用網頁呼叫後端 API 所回傳的課表資料。 現在大多數網站都有豐富的動態互動，我指的不是畫面裡的視覺元素是動態、或是動畫，而是指在整個網頁沒有重新載入的情況下，頁面呈現的內容可隨著你的操作而變化。以緯育的課表系統而言，就是按左上角的箭頭改變月份，底下的課表隨之更新。實現這樣效果的方式有很多，有簡單的、或比較複雜的。這個課表系統就是簡單的方式。 取得資料 首先，打開你任一種瀏覽器的開發人員工具，或是在畫面上找個地方按右鍵選 檢閱 進入。移動到 網路 (Networking) 這頁面，這裡就是顯示網頁載入後執行、或收到的大大小小的程式或資料。左邊區塊裡可能有非常多檔案，但通常我們的注意力先放在副檔名為 .json 或 .js 的項目即可，因為現在網頁前後端的主流資料傳輸格式都是 JSON 。更進一步，我們已經知道我們要找的資料是課表，所以我們可以用跟課表、行程相關的英文關鍵字來在過濾 URL 的欄位搜尋，不用一個一個檢查。如上圖，我們可以看到 schedule-list 的某一節點內容和網頁裡 12/5 的行程十分一致，因此，可以大膽認定這就是網頁向後端查詢 12 月份的課表，所得到的 json 回傳。 然而，JSON 的結構畢竟不是用來給人閱讀的形式，我們還要再將整份資料轉化成大家習慣的表格形式，方便運用。這一步我們可以自己寫 apps script，也可以使用網路上現成的 JSON 轉換工具。 轉換資料 範例裡用的是 ConvertCSV