2019年12月25日

製作網路爬蟲工具抓動態產生的網頁資料﹍體育賽事範例實作

製作網路爬蟲工具抓動態產生的網頁資料﹍體育賽事範例實作

Wayne Fu 0 A+
web-crawler-ajax-data.jpg-製作爬蟲工具抓動態產生的網頁資料﹍體育賽事範例實作之前記錄了幾篇「Google Apps Script 製作爬蟲工具」的心得,使用 cheerio 套件之後,解析網頁的 HTML/XML 內容變得十分輕鬆。

但越來越多網頁使用 Ajax 動態載入資料內容,這些由 Javascript 產生的內容在網頁原始碼是看不到的,那麼爬蟲自然也爬不到。真要取得動態產生的 JS 內容,需要使用不一樣的技巧,本篇將分享 NBA 賽事數據實作心得整理。

(圖片出處: NBA)


一、原理


這篇「Python爬蟲·AJAX動態頁面的解析」已經將操作原理說明得很清楚了,簡單整理一下:

  • 使用 Chrome 開發人員工具
  • 從 Network 觀察動態載入資料的連結是哪個
  • 將爬蟲工具改為爬動態載入的那個網址
  • 對取得的資料進行解析即可

瞭解原理後,技術上來說取得動態載入的資料變得一點都不困難,只是換個網址來爬而已。

但實作後發現困難之處還是有,除了判斷抓哪個網址,還可能有比爬資料更棘手的問題要解決,真的需要靠經驗累積才能找到訣竅。



二、NBA 官網範例


以下使用 NBA 官網來做範例,進入 NBA 比分戰況頁面:



web-crawler-ajax-data-1.jpg-製作爬蟲工具抓動態產生的網頁資料﹍體育賽事範例實作

  • 可惜時間還太早,比賽都還沒開始,所以看不到任何比分數據。
  • 不過沒關係,打開「Chrome 開發人員工具」→ 切換到「Network」頁籤,我們要觀察頁面會載入哪些資料
  • 接著比賽日期切到前一天,由於 NBA 官網不會切換頁面,而是使用 Ajax 動態取得數據,我們看看 Network 會得到什麼資訊


web-crawler-ajax-data-2.jpg-製作爬蟲工具抓動態產生的網頁資料﹍體育賽事範例實作

  • 畫面上紅框處看到前一天的「獨行俠 vs 火箭」比賽結果 137:123,Doncic 與 Harden 兩位明星各自都有十分傑出的演出。
  • 在 Network 我們運氣很好,第二個載入的檔案 scoreboard.json 這檔名看起來就像裝了我們要的比賽數據資料,而且以 json 格式儲存,將來處理更加方便
  • 右邊「Headers」欄位紅色底線處,可看到這個檔的完整連結,我們就來看看裝了什麼內容


web-crawler-ajax-data-3.jpg-製作爬蟲工具抓動態產生的網頁資料﹍體育賽事範例實作

  • 切換到「Preview」可預覽檔案內容
  • 上方紅色底線可看到比賽場館在休市頓的 Toyota 中心,八成就是我們要找的這場比賽
  • 下方紅框有 Doncic、Harden 的本場數據,跟網頁上的資料一模一樣,可以確定這個檔能撈到所有我們需要的比賽數據



三、反爬蟲機制


1. 禁止存取數據

接著準備爬 json 資料吧,試著把前面取得的 json 連結用瀏覽器叫出來看看內容:

https://data.nba.net/prod/v2/20191224/scoreboard.json

web-crawler-ajax-data-4.png-製作爬蟲工具抓動態產生的網頁資料﹍體育賽事範例實作

真糟糕,怎麼只有這短短幾行,跟剛剛看的完全不一樣!根本沒有取得任何數據啊~~

無論是什麼原因,也許呼叫該網址要存取 cookie,也許有限制存取網域,總之 nba.com 有反爬蟲機制,不給輕易爬取資料,那麼該怎麼辦呢?

2019.12.26 修正:感謝留言 #1 路人甲提醒 nba.com 沒有擋爬蟲,是因為剛好 12/24 為美國的聖誕節期間沒有賽事,故產生錯誤訊息。


2. 找別的網站

我相信高手有辦法反制各種限制,而我的想法是,找出破解方法的時間,應該是遠高於換一個網站爬的時間,畢竟存放 NBA 比賽數據的網站多到數不清。

舉例來說,測試了「中國 NBA 官網」後,發現網站並沒有擋爬蟲,那麼使用以下的網址就能成功取得數據:

  • 比賽網址:https://china.nba.com/scores/#!/比賽日期
  • 數據 json:https://china.nba.com/static/data/scores/daily_比賽日期.json


以上日期都是 YYYY-MM-DD 格式,例如這個網址可取得 2019-12-24 數據:

https://china.nba.com/static/data/scores/daily_2019-12-24.json



四、總結


簡單總結一下本篇爬蟲 Ajax 數據心得:

  • 從爬取網頁原始碼改為尋找儲存數據的連結網址
  • 利用 Chrome 開發人員工具的 Network,分析動態載入的連結
  • 練習從檔名、網址結構找到正確的目標
  • 如果遇到反爬蟲的網站,換個網站爬


更多爬蟲工具相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

2 則留言:

  1. 英文的沒有擋~測試是因為12/24沒有比賽所以無資料(網頁把日期選12/24)

    回覆刪除
    回覆
    1. 感謝您的勘誤,的確剛好該日期是美國的聖誕節期間沒有賽事,已修正內容~

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP