大綱¶
- 網頁資料擷取的環境設定
- 網頁資料擷取的先修知識
- 網頁資料擷取的核心任務
- 擷取 JSON 格式網頁資料
- 擷取 XML 格式網頁資料
- 擷取 HTML 格式網頁資料
- 瀏覽器自動化
- 延伸閱讀
- 作業
網頁資料擷取的環境設定¶
我們所使用的開發環境為¶
- 在瀏覽器使用 Google Colaboratory
- 在本機端使用 Miniconda
除了「瀏覽器自動化」要使用本機端，其餘的時候我們都使用 Google Colaboratory¶
在瀏覽器使用 Google Colaboratory¶
- 登入 Google 帳號
- 前往 https://colab.research.google.com/
- 新增 Python 3 Notebook
更新 Google Colaboratory 的 beautifulsoup4¶
!pip install -U beautifulsoup4
Collecting beautifulsoup4
Downloading https://files.pythonhosted.org/packages/3b/c8/a55eb6ea11cd7e5ac4bacdf92bac4693b90d3ba79268be16527555e186f0/beautifulsoup4-4.8.1-py3-none-any.whl (101kB)
|████████████████████████████████| 102kB 6.0MB/s
Collecting soupsieve>=1.2
Downloading https://files.pythonhosted.org/packages/81/94/03c0f04471fc245d08d0a99f7946ac228ca98da4fa75796c507f61e688c2/soupsieve-1.9.5-py2.py3-none-any.whl
Installing collected packages: soupsieve, beautifulsoup4
Found existing installation: beautifulsoup4 4.6.3
Uninstalling beautifulsoup4-4.6.3:
Successfully uninstalled beautifulsoup4-4.6.3
Successfully installed beautifulsoup4-4.8.1 soupsieve-1.9.5網頁資料擷取的先修知識¶
網頁的基本組成是標記式語言、樣式表與程式語言的結合¶
- 標記式語言：HTML
- 樣式表：CSS
- 程式語言：JavaScript
對比：一間大樓的組成¶
- 鋼筋水泥：HTML
- 裝潢隔間：CSS
- 管線設施：JavaScript
其中 HTML 負責的是網頁架構¶
網頁可以分成兩種大類¶
- 靜態：未與伺服器及資料庫連結，頁面內容需要開啟編輯器修改
- 動態：又稱網路應用程式（Web APP），具有後端程式與資料庫連結
基本 HTML 內容有兩個部分¶
- head: 設定與網頁相關的資訊、提供網頁需要的資源檔
- body: 使用者在瀏覽器看到的內容
基本 HTML 內容¶
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>其中 CSS 負責網頁樣式¶
樣式表（Cascading Style Sheets，CSS）是一種用來為 HTML 添加樣式（字型、間距和顏色等）的電腦語言，由 W3C 定義和維護。
Source: https://zh.wikipedia.org/zh-tw/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8
CSS 的撰寫規則¶
- 選擇器
- 屬性
- 屬性值
選擇器的宣告方式¶
- 單一標記：#id
- 多組標記：.class、標記名稱
網頁資料擷取的核心任務¶
HTTP¶
超文本傳輸協定 (HTTP) 是一種用來傳輸超媒體文件 (像是HTML文件) 的應用層協定，被設計來讓瀏覽器和伺服器進行溝通，但也可做其他用途。HTTP 遵循標準客戶端—伺服器模式，由客戶端連線以發送請求，然後等待接收回應。
HTTP 定義了一組能令給定資源，執行特定操作的請求方法（request methods），其中與網頁資料擷取最相關的是：¶
- GET
- POST
請求資料是雙向的¶
- 由瀏覽器發給網頁伺服器的請求稱為 HTTP Request
- 由網頁伺服器發給瀏覽器的回應稱為 HTTP Response
- Request Header 中的 Request Method 表示瀏覽器希望網頁伺服器做些什麼事
- 順利取得資料之後，瀏覽器會將 Response Body 顯示出來
請求資料需要使用的工具¶
- Chrome 開發者工具
- Quick JavaScript Switcher
requests套件
Chrome 開發者工具¶
Chrome 開發者工具是一套內建於 Google Chrome 中的 Web 開發和測試工具。
Source: https://developers.google.com/web/tools/chrome-devtools/?hl=zh-TW
進行網頁資料擷取時，會高度仰賴 Chrome 開發者工具中的 Network 頁籤¶
使用 Network 頁籤瞭解請求和下載的檔案
點選 Network 之後重新整理網頁觀察¶
通常我們需要擷取的資料會被歸類在這兩個大類檔案中¶
- XHR(XMLHttpRequest)
- Doc
可以使用 Quick JavaScript Switcher 協助判斷¶
快速地開啟、關閉 JavaScript
Source: https://chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje
示範 Quick JavaScript Switcher 功能¶
找到資料之後即可檢視細節¶
- Headers
- General
- Response Headers
- Request Headers
- Query String Parameters(if any)
- Form Data(if any, for POST)
- Preview
- Response
- Cookies
常用的 requests 函數¶
requests.get()：進行 GET 請求（下載檔案）、常搭配 Query String Parametersrequests.post()：進行 POST 請求（上傳資料）、搭配 Form Data
In [1]:
import requests
request_url = "https://www.imdb.com/"
response = requests.get(request_url)
In [2]:
request_url = "https://mops.twse.com.tw/mops/web/t05st10_ifrs"
response = requests.post(request_url)
回應（Response 類別）的方法與屬性¶
response.status_code：查看狀態碼response.json()：將回應直接轉換為 Python 的資料結構（list或dict）response.content：將回應轉換為bytesresponse.text：將回應轉換為str
檢視資料細節的 Preview 與 Response確認格式¶
- 如果資料是 JSON 格式：呼叫回應的
.json()方法後直接以 Python 資料結構解析 - 如果資料是 XML 格式：呼叫回應的
.content屬性後以lxml搭配 XPath 解析 - 如果資料是 HTML 格式：呼叫回應的
.text屬性後以bs4搭配 CSS Selector 解析
擷取 JSON 格式網頁資料¶
什麼是 JSON？¶
JavaScript Object Notation (JSON) 為將結構化資料 (structured data) 呈現為 JavaScript 物件的標準格式，常用於網站上的資料呈現、傳輸。
Source: mozilla.org
JSON 是依照 JavaScript 物件語法的資料格式，經 Douglas Crockford 推廣普及。雖然 JSON 是以 JavaScript 語法為基礎，但可獨立使用，且許多程式設計環境亦可讀取 (剖析) 並產生 JSON。¶
Source: mozilla.org
JSON 怎麼利用 Python 剖析與對應？¶
- Python 具有標準套件
json作為剖析的媒介 - JSON 物件對應 Python 的
dict類別 - 陣列作為 JSON(array of JSON) 對應 Python 的
listofdict
擷取 JSON 格式網頁資料步驟¶
- 使用
requests請求資料 - 呼叫回應的
.json()方法，例如response.json() - 視需求進行摘要
In [3]:
request_url = "http://data.nba.net/prod/v2/2019/teams.json"
response = requests.get(request_url)
teams = response.json()
print(type(teams))
print(teams)
隨堂練習：2019-2020 球季 NBA 有幾支球隊？¶
In [4]:
import requests
request_url = "http://data.nba.net/prod/v2/2019/teams.json"
response = requests.get(request_url)
response_json = response.json()
teams = response_json["league"]["standard"]
# Continue from here...
In [6]:
print("2019-2020 球季 NBA 有 {} 支球隊".format(n_nba_teams))
隨堂練習：屬於 Atlantic 與 Southwest 的球隊有幾個？各隊名為？¶
In [7]:
team_dict = {}
for t in teams:
div = t["divName"]
full_name = t["fullName"]
if div in team_dict:
team_dict[div].append(full_name)
else:
team_dict[div] = [full_name]
# Continue from here...
In [9]:
print("屬於 Atlantic 與 Southwest 的球隊有 {} 個:".format(n_as_teams))
print("Atlantic: {}".format(team_dict["Atlantic"]))
print("Southwest: {}".format(team_dict["Southwest"]))
擷取 XML 格式網頁資料¶
什麼是 XML？¶
可延伸標示語（Extensible Markup Language）是一個讓文件同時能夠很容易地讓人去閱讀，又很容易讓電腦程式去辨識的語言格式，和 JSON 格式相同常被用於網站上的資料呈現、傳輸。
Source: https://www.w3schools.com/xml/
擷取 XML 格式網頁資料步驟¶
- 使用
requests請求資料 - 使用回應的
.content屬性，例如response.content - 以
lxml搭配 XPath 解析
什麼是 XPath？¶
XML Path Language，譯作 XML 路徑語言，用來定位 XML 檔案中特定資訊的位置。
In [10]:
import requests
#進行 POST 請求時要攜帶資料
form_data = {
"commandid": "GetTown",
"cityid": "01"
}
request_url = "https://emap.pcsc.com.tw/EMapSDK.aspx"
response = requests.post(request_url, data=form_data)
print(response.status_code)
使用 .content 屬性¶
In [11]:
response_content = response.content
print(response_content)
利用開發人員工具的 Preview 頁籤檢視 XML 的樹狀結構：行政區¶
TownName 標籤的 XPath¶
/iMapSDKOutput/GeoPosition/TownName或//TownName
利用開發人員工具的 Preview 頁籤檢視 XML 的樹狀結構：路段資訊¶
rd_name_1 標籤的 XPath¶
/iMapSDKOutput/RoadName/rd_name_1或//rd_name_1
section_1 標籤的 XPath¶
/iMapSDKOutput/RoadName/section_1或//section_1
利用開發人員工具的 Preview 頁籤檢視 XML 的樹狀結構：商店資訊¶
POIName 標籤的 XPath¶
/iMapSDKOutput/GeoPosition/POIName或//POIName
以 lxml 解析行政區資訊¶
In [12]:
from lxml import etree
from io import BytesIO
file = BytesIO(response_content)
tree = etree.parse(file)
town_names = [t.text for t in tree.xpath("//TownName")] # XPath 亦可以指定 /iMapSDKOutput/GeoPosition/TownName
print(town_names)
擷取台北市所有商店資訊¶
In [13]:
import time
import random
tp_711_stores = {}
for town in town_names:
form_data = {
"commandid": "SearchStore",
"city": "台北市",
"town": town
}
r = requests.post("https://emap.pcsc.com.tw/EMapSDK.aspx", data=form_data)
f = BytesIO(r.content)
tree = etree.parse(f)
poi_ids = [t.text.strip() for t in tree.xpath("//POIID")]
poi_names = [t.text for t in tree.xpath("//POIName")]
lons = [float(t.text)/1000000 for t in tree.xpath("//X")]
lats = [float(t.text)/1000000 for t in tree.xpath("//Y")]
adds = [t.text for t in tree.xpath("//Address")]
tp_711_stores[town] = []
for poi_id, poi_name, lon, lat, add in zip(poi_ids, poi_names, lons, lats, adds):
store_info = {
"POIID": poi_id,
"POIName": poi_name,
"Longitude": lon,
"Latitude": lat,
"Address": add
}
tp_711_stores[town].append(store_info)
time.sleep(random.randint(1, 6))
print("Scraping {}".format(town))
In [14]:
print(tp_711_stores["松山區"][0])
print(tp_711_stores["信義區"][0])
print(tp_711_stores["大安區"][0])
擷取 HTML 格式網頁資料¶
擷取 HTML 格式網頁資料步驟¶
- 使用
requests請求資料 - 使用回應的
.text屬性，例如response.text - 以
bs4搭配 Tag Name/CSS Selector 解析
常見用來標示 HTML 資料的方法¶
- HTML 的標籤名稱
- HTML 標籤中給予的 id
- HTML 標籤中給予的 class
- 資料所在的 CSS 選擇器（CSS Selector）
- 資料所在的 XPath
幫助定位 CSS 選擇器的 Chrome 外掛¶
SelectorGadget 的使用方法¶
- 點選 SelectorGadget 的外掛圖示
- 留意 SelectorGadget 的 CSS 選擇器
- 移動滑鼠到想要定位的元素
- 在想要定位的資料上面點選左鍵，留意 Clear 後面數字表示有多少個元素被選擇到
- 移動滑鼠點選不要選擇的元素（改以紅底標記），並同時注意 CSS 選擇器位址與 Clear 後面數字
以 Avengers: Endgame (2019) 示範 SelectorGadget 的使用方法¶
- 電影名稱
- 電影海報
- 評分
- 劇情類型
- 演員陣容
以 Avengers: Endgame (2019) 示範 bs4¶
常用的 bs4 函數¶
BeautifulSoup()：創建 BeautifulSoup 類別
In [15]:
# !pip install -U BeautifulSoup4
from bs4 import BeautifulSoup
request_url = "https://www.imdb.com/title/tt4154796"
response = requests.get(request_url)
response_text = response.text
soup = BeautifulSoup(response_text)
print(type(soup))
常用的方法¶
soup.find()：尋找第一個符合標記名稱的資料soup.find_all()：尋找所有符合標記名稱的資料soup.select()：尋找所有符合 CSS 選擇的資料
In [16]:
print(soup.find("h1"))
print(type(soup.find("h1")))
print(soup.find("h1").text)
print(soup.select("strong span"))
print(float(soup.select("strong span")[0].text))
常用的 element.Tag 屬性、方法¶
element.Tag.text：取出標記中的文字值element.Tag.get(attr)：取出標記中的指定屬性
In [17]:
print(len(soup.find_all("img")))
print(soup.find_all("img")[2])
print(soup.find_all("img")[2].get("alt"))
print(soup.find_all("img")[2].get("src"))
In [18]:
print(soup.select("strong span"))
print(float(soup.select("strong span")[0].text))
隨堂練習：以 requests 搭配 bs4 擷取 Avengers: Endgame (2019) 的劇情類型¶
In [19]:
response = requests.get("https://www.imdb.com/title/tt4154796")
soup = BeautifulSoup(response.text)
# Continue from here...
In [21]:
print(genre)
隨堂練習：以 requests 搭配 bs4 擷取 Avengers: Endgame (2019) 的演員陣容¶
In [22]:
response = requests.get("https://www.imdb.com/title/tt4154796")
soup = BeautifulSoup(response.text)
# Continue from here...
In [24]:
print(cast)
隨堂練習：自訂一個函數 get_movie_data(movie_url)¶
In [34]:
get_movie_data("https://www.imdb.com/title/tt4154796")
Out[34]:
讓 get_movie_data() 更方便使用¶
- 可以輸入電影名稱，而非 URL！
- 觀察 https://www.imdb.com/find?q=Avengers%3A+Endgame&ref_=nv_sr_sm
In [35]:
query_string_parameters = {
'q': 'Avengers: Endgame',
'ref_': 'nv_sr_sm'
}
request_url = "https://www.imdb.com/find"
response = requests.get(request_url, params=query_string_parameters)
print(response.status_code)
利用 .result_text > a CSS 選擇器把所有的搜尋結果擷取下來¶
In [36]:
soup = BeautifulSoup(response.text)
result_hrefs = [e.get("href") for e in soup.select(".result_text > a")]
print(result_hrefs)
最相近搜尋結果的電影頁面網址¶
In [37]:
movie_url = "https://www.imdb.com" + result_hrefs[0]
print(movie_url)
隨堂練習：自訂一個函數 get_movie_data(movie_title)¶
In [39]:
get_movie_data("Avengers: Endgame (2019)")
Out[39]:
In [40]:
response = requests.get("https://www.ptt.cc/bbs/Gossiping/index.html")
print(response.text)
In [41]:
response = requests.get("http://www.fantasy-sky.com/ContentList.aspx?section=002")
soup = BeautifulSoup(response.text)
movie_titles = [i.text for i in soup.select(".movies-name")]
print(movie_titles)
從開發人員工具檢視 Cookies¶
In [42]:
import requests
response = requests.get("https://www.ptt.cc/bbs/Gossiping/index.html", cookies={'over18': '1'})
print(response.text)
In [43]:
import requests
from bs4 import BeautifulSoup
response = requests.get("http://www.fantasy-sky.com/ContentList.aspx?section=002", cookies={'COOKIE_LANGUAGE': 'en'})
soup = BeautifulSoup(response.text)
movie_titles = [i.text for i in soup.select(".movies-name")]
print(movie_titles)
隨堂練習：擷取所有華航機上電影清單¶
In [44]:
ca_movie_urls = ["http://www.fantasy-sky.com/ContentList.aspx?section=002&category=0020{}".format(i) for i in range(1, 5)]
# Continue from here ...
In [46]:
print(ca_movie_titles)
隨堂練習：找出華航機上最高評等的電影¶
In [50]:
print(ca_movie_titles[best_movie_index])
Web Scraping in a Nutshell¶
- 請求資料
- 以 Quick JavaScript Switcher 判斷資料分類在 XHR 或 Doc
- 以 Chrome 開發人員工具檢視 Preview/Response 確認資料格式
- 以 Chrome 開發人員工具檢視請求資料的 Request URL/Request Method/Query String Parameters/Form Data/Cookies
- 以
requests發送請求獲得回應
- 解析資料
- 資料是 JSON 格式，呼叫回應的
.json()方法後直接以 Python 資料結構解析 - 資料是 XML 格式，使用回應的
.content屬性後以lxml搭配 XPath 解析 - 資料是 HTML 格式，使用回應的
.text屬性後以bs4搭配 CSS Selector 解析
- 資料是 JSON 格式，呼叫回應的
瀏覽器自動化¶
在研究如何使 get_movie_data() 更方便的過程中我們做了幾個動作¶
- 前往 https://www.imdb.com/ 首頁
- 輸入電影名稱
- 點選搜尋
- 點選 Movie 分類標籤
- 點選相似度最高的搜尋結果
這些操作可以利用 selenium 來自動化！¶
什麼是 Selenium¶
- Selenium 是瀏覽器自動化測試的解決方案
- Python 透過 Selenium WebDriver 呼叫瀏覽器驅動程式，再由瀏覽器驅動程式去呼叫瀏覽器
- 對 Google Chrome 與 Mozilla Firefox 兩個主流瀏覽器的支援最好
Selenium 環境設定：移除教室電腦中不必要的 Python 版本¶
- Python.org 的版本
- 安裝在非使用者路徑下的 Anaconda 版本
Selenium 環境設定：建立環境步驟¶
- 開啟 Anaconda Prompt
- 更新 conda
- 安裝 jupyter
- 創建環境
- 啟動環境
- 安裝套件
- 創建 Jupyter Notebook Kernel（在已經啟動環境的情況下）
- 卸載環境
- 開啟 Jupyter Notebook
開啟 Anaconda Prompt¶
更新 conda¶
# run in command line
(base) conda update conda
安裝 jupyter¶
# run in command line
(base) conda install jupyter
檢視可用環境¶
# run in command line
(base) conda env list
創建環境¶
# run in command line
(base) conda create --name <env_name> python=3.7
啟動環境¶
# run in command line
(base) conda activate <env_name>
# conda deactivate # 回到原本的 (base)
安裝套件¶
# run in command line
(env_name) conda install ipykernel requests lxml beautifulsoup4 selenium
這些套件的用途分別是¶
- 環境
- ipykernel
- 網路爬蟲
- requests
- lxml
- beautifulsoup4
- selenium
創建 Jupyter Notebook Kernel（在已經啟動環境的情況下）¶
# run in command line
(env_name) python -m ipykernel install --user --name <kernel_name> --display-name "Python Web Scraping"
檢視可用的 Jupyter Notebook Kernel¶
# run in command line
(env_name) jupyter kernelspec list
Selenium 環境設定：Chrome¶
- 前往 Chrome 官方網站下載最新版的瀏覽器
- 下載最新版的瀏覽器驅動程式 ChromeDriver
- 下載完成以後解壓縮在熟悉路徑讓後續指派較為方便
Selenium 環境設定：Firefox¶
- 前往 Firefox 官方網站下載最新版的瀏覽器
- 下載最新版的瀏覽器驅動程式 geckodriver
- 下載完成以後解壓縮在熟悉路徑讓後續指派較為方便
測試 Chrome 是否設定完成¶
用程式碼透過 ChromeDriver 操控 Chrome 瀏覽器前往 IMDB 首頁並將首頁的網址印出再關閉瀏覽器
In [ ]:
from selenium import webdriver
driver_path = "c:/YOUR/PATH/TO/CHROMEDRIVER"
imdb_home = "https://www.imdb.com/"
driver = webdriver.Chrome(executable_path=driver_path) # Use Chrome
driver.get(imdb_home)
print(driver.current_url)
driver.close()
測試 Firefox 是否設定完成¶
用程式碼透過 geckodriver 操控 Firefox 瀏覽器前往 IMDB 首頁並將首頁的網址印出再關閉瀏覽器
In [ ]:
from selenium import webdriver
driver_path = "c:/YOUR/PATH/TO/GECKODRIVER"
imdb_home = "https://www.imdb.com/"
driver = webdriver.Firefox(executable_path=driver_path) # Use Firefox
driver.get(imdb_home)
print(driver.current_url)
driver.close()
常使用的 driver 方法、屬性¶
driver.get()：前往指定網址driver.find_element_by_css_selector()：定位搜尋欄位、搜尋按鈕與搜尋結果連結（單數）driver.find_elements_by_css_selector()：定位搜尋欄位、搜尋按鈕與搜尋結果連結（複數）driver.find_element_by_xpath()：定位搜尋欄位、搜尋按鈕與搜尋結果連結（單數）driver.find_elements_by_xpath()：定位搜尋欄位、搜尋按鈕與搜尋結果連結（複數）driver.current_url：取得當下瀏覽器的網址
幫助檢視 XPath 的 Chrome 外掛¶
XPath Helper 的使用方法¶
- 點選 XPath Helper 的外掛圖示
- 留意 XPath Helper 介面左邊的 XPath 與右邊被定位到的資料
- 按住 shift 鍵移動滑鼠到想要定位的元素
- 試著縮減 XPath，從最前面開始刪減並置換為
//
以 Avengers: Endgame (2019) 示範 XPath Helper 的使用方法¶
- 電影名稱
- 電影海報
- 評分
- 劇情類型
- 演員陣容
常使用的 element 方法、屬性¶
element.send_keys()：輸入文字element.click()：按下搜尋按鈕與連結element.text：取出標記中的文字值element.get_attribute(ATTR)：取出標記中的指定屬性
隨堂練習：以 selenium 實作 get_movie_data(movie_title)¶
In [ ]:
get_movie_data("Avengers: Endgame (2019)")
隨堂練習：以 selenium 擷取四部復仇者聯盟的電影資訊¶
avengers_movies = ["The Avengers (2012)", "Avengers: Age of Ultron (2015)", "Avengers: Infinity War (2018)", "Avengers: Endgame (2019)"]
In [ ]:
print(avengers_movie_data)
將擷取的電影資訊匯出¶
In [ ]:
import json
with open("avengers.json", "w") as f:
json.dump(avengers_movie_data, f)
作業¶
擷取 Avengers: Endgame (2019) 的上映日期列表，最多的上映日期為哪一天？有幾個國家在那天上映？¶
In [52]:
ans()
Out[52]: