JavaScriptのページをスクレイピング・クローリングするならPython＋Seleniumがオススメ

2018年8月3日2022年6月4日

「Python」とWebテストツールとして有名な「Selenium」を使用して、

JavaScriptが使用されているWebページのスクレイピング・クローリングを行う手順を紹介します。

今回は「Google Chrome」ドライバーを使用したWebページのスクレイピング・クローリングを行っていきます。

JavaScriptを使用したページの多くは非同期通信でデータを引っ張ってきていたり、

対応したブラウザでないと動作させなかったりと初心者には扱うことが困難です。

その他のアプローチ方法として「requests」ライブラリや「Scrapy」があるが、

どちらも学習コストが高く簡単には使いこなせません。

そのため、初心者でも簡単に扱うことが出来る「Selenium」が大変オススメになります。

「Selenium」の扱い方については以下の記事にもまとめていますので参考にしてみてください。

初心者がSeleniumを使う理由

「requests」ライブラリは「Cookie」や「Header情報」など設定する必要があり、

初心者では実際にスクレイピング・クローリングまで実装できません。

「Seleninum」はブラウザを直接使ってWebスクレイピング・クローリングを行います。

ただし「Seleninum」は速度が少々遅いので、

より性能が求められる場合は「Scrapy」などを使用しましょう。

Seleniumのインストール

まずはSeleniumのインストールを行います。

「pip」を使用してインストールします。

pip install selenium

PyCharmを使用している場合は下の記事を参考にインストールしてみてください。

ドライバーの入手とインストール

次にドライバーの入手とインストールをします。

今回は「GoogleChrome用のドライバー」のダウンロード方法を紹介します。

「ダウンロードサイト：ChromeDriver – WebDriver for Chrome」にアクセスします。

「ChromeDriver」を選択しましょう。

Latest Releseの「ChromeDriver」を選択します。

各OSに合わせたドライバーをダウンロードしましょう。

**Windowsは64Bit版だとしても、「chromedriver_win32.zip」を利用できます。

**下がメジャーブラウザのドライバーのダウンロードサイトになります。

GoogleChrome：https://sites.google.com/a/chromium.org/chromedriver/
Firefox：https://github.com/mozilla/geckodriver/
Microsoft Edge：https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/
Safari：https://webkit.org/blog/6900/webdriver-support-in-safari-10/
Opera：https://github.com/operasoftware/operachromiumdriver/releases

ダウンロードしたメディアをOS上の所定の場所に配置します。

今回はメディアを下に配置します。

C:\webdriver\chromedriver.exe

JavaScriptが有効になっているサイトをスクレイピング

JavaScriptで「”https://news.yahoo.co.jp”のおすすめの記事」をスクレイピングしたいと思います。下の赤枠のタイトルを取得したいと思います。

記事タイトルの要素を特定する

初めにGoogleChromeで記事タイトルにどんなセレクタが適用しているか確認する必要があります。

GoogleChromeで「https://news.yahoo.co.jp/」で開きましょう。

次にWindowsでは「F12」、Macでは「Control + Option + I」で「検証モード」を開きます。

今回取得した要素は「dtタグのclassがtitl」ということがわかります。

seleniumでJavaScriptをスクレイピングする時の方法：Headlessモードを有効化

seleniumでJavaScriptをスクレイピングする時は「Headlessモード」を有効化します。

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

options = Options()
options.add_argument('--headless')
driver = webdriver.Chrome(executable_path=C:\webdriver\chromedriver.exe, chrome_options=options)

上記のようにオプションで「Headlessモード」を有効化します。

Headlessモードとはブラウザを起動させずにブラウジングさせる機能になります。

実際に「selenium」でスクレイピングしてみる

今回用意したサンプルコードは以下になります。

以下のコードを実行してみましょう。

# coding: UTF-8
import lxml
from bs4 import BeautifulSoup
from selenium import webdriver
from selenium.webdriver.chrome.options import Options

# URL関連
top_url = https://www.yahoo.co.jp/
url = https://news.yahoo.co.jp/

# ヘッドレスモードを設定
options = Options()
options.add_argument('--headless')

# Chromeを起動
driver = webdriver.Chrome(executable_path=C:\webdriver\chromedriver.exe, chrome_options=options)

# 一度トップページに行きCookieを取得
driver.get(top_url)
driver.get_cookies()
driver.get(url)

# soupオブジェクトを作成
soup = BeautifulSoup(driver.page_source, lxml)

# タイトルリストを取得して表示
for title in soup.find_all(dt, class_=titl):
print(title.get_text())

# Chromeドライバーを終了
driver.close()

出力結果は以下のようになります。

しっかりと記事タイトルを取得できているができました。

「ラジオスター」出演ナウン（Apink）、ツウィ（TWICE）への愛情を告白”とてもきれい”
「半分、青い。」第１０５話は２２・１％　鈴愛「死んでくれ」物議に北川悦吏子氏「私も現場も納得してやっていること」
「半分、青い。」鈴愛「死んでくれ」に賛否　華丸「夫婦間の問題」も「涼ちゃんは極端」北川氏の思いは…
観月ありさら”和声ドリームガールズ”が能舞台でユーミンの名曲を披露
ローレン・ザラツニック: テレビの良心
日本代表の比江島慎、海外移籍決定！ 豪州のクラブに加入「後悔すると思い決断」
往年の名手アビダルがバルサ帰還。使命はデンベレを覚醒させること。
ノンスタ石田憤慨「なんなの？これ？」“ベビーカー問題”で妻が受けた舌打ち
ポール・ブルーム: 先入観は良いことになり得るか？
三浦りさ子、夫カズと結婚25年「山あり谷あり」
長友佑都、祖母からの格言が「深すぎる」と話題　10万超反響「何度読んでも奥深い」
加熱式たばこ市場拡大　シェア３割超視野　顧客争奪戦が激化
欠席の山根会長“壇上にあいつ上げるな”
韓国、１１１年ぶりの猛暑…各地で停電事故など「安全な生活」に脅威（２）
ユベントスとミランで大型移籍実現へ　イグアインがレンタル、ボヌッチは交換トレード