【Selenium】JavaScriptを使ったwebページのスクレイピング（ページ内の操作で画面表示が変わるwebページのスクレイピング）

今回は、「自動ログインの実装」の続きです。
https://note.com/giselle_ballet/n/n642ee875bd96

※自動ログインの実装をしていなくても大丈夫です。

やりたいこと

JavaScriptを使ったwebﾍﾟｰｼﾞからスクレイピングを行い情報を保存する

具体的には以下のステップです。
⓵　コースを選択＆選択したページを表示
⓶　表示したページのカリキュラム名を取得
③　必要なデータだけに加工して配列に保存

取得したタイトルを必要な部分のみに加工し、配列に保存

JavaScriptを使ったwebﾍﾟｰｼﾞとは？

JavaScriptを使ったページはいろいろありますが、今回やるのはコース選択で画面表示が変わるページです。（URL自体はページ表示が変わっても変わらない）

AIコース

デザインコース

JavaScriptとは？

「JavaScript」とは、動的なWebページを作成する事のできるプログラミング言語です。通常はブラウザー上で実行されます。JavaScriptを使うと、ユーザーのアクションに応じたコンテンツの表示の他、ブラウザー上で表示される地図やグラフィックアニメーションなども表示する事ができます。
出典：　
https://proengineer.internous.co.jp/content/columnfeature/11532

使用ライブラリ

⓵Webページをseleniumで操作するためのライブラリ
（前回ログインページの実装でも使用）　

# 使用言語：Python
from selenium import webdriver
import chromedriver_binary
import time

⓶スクレイピングに使用するライブラリ

import requests
from bs4 import BeautifulSoup
from urllib.parse import urljoin
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys

実装のまえに・・

前回の記事「自動ログインの実装」をしていない場合

以下のコードでスクレイピングするwebページをselenium経由で開く操作を実装する必要があります。

driver = webdriver.Chrome()
driver.get('操作したいwebページのURL')

実行するとwebページが開くはずです。

ウィンドウの最大化

レスポンシブデザインの場合ウィンドウサイズによって表示が変わるため、のちに不具合が出てくる可能性があります。そのためあらかじめ最大化しておいたほうが良いです。

※レスポンシブデザイン
レスポンシブデザインとは、Webサイトのデザインを「閲覧ユーザーが使用するデバイスの画面サイズに応じて表示を最適化するデザイン」を指します。
出典：　https://semlabo.com/seo/blog/responsive_design/

 #ウィンドウの最大化 
driver.maximize_window()

それではいざ実装。

コース選択

コース選択を行います。
まず、各コースのXpathを変数に格納します。

#各コースのXpath

#ウェブアプリコース ver 2.0.0
webapp_basic='/html/body/div/div/div[1]/div/div[2]/div[2]/div/div[1]'
#ウェブアプリコース（追加カリキュラム) ver 2.0.0
webapp_advanced='/html/body/div/div/div[1]/div/div[2]/div[2]/div/div[2]'
#AIコース ver 1.2.0
ai='/html/body/div/div/div[1]/div/div[2]/div[2]/div/div[3]'
#デザインコース ver 2.0.0
design='/html/body/div/div/div[1]/div/div[2]/div[2]/div/div[4]'
#業務効率化プログラミン具 ver 1.0.0
efficiency='/html/body/div/div/div[1]/div/div[2]/div[2]/div/div[5]'

Xpathはディベロッパーツールから取得してください。

※ディベロッパーツールの開き方とXpathの取得方法
https://note.com/giselle_ballet/n/na54111326301

つぎに、スクレイピングしたいコースを変数に格納します。
今回はウェブアプリコース ver 2.0.0にしたいと思います。

#コースを変数に格納
course=webapp_basic  #ウェブアプリコース ver 2.0.0

変数に入れたコースを表示します

#変数に入れたコースを表示
driver.find_element_by_xpath(course).click()
time.sleep(3)

time.sleepは、JavaScriptでページが変わるまで待機するために適当な時間を設定しています。

※sleep関数
Pythonのsleepを使用すると、処理を一時停止できます。
出典：　https://techacademy.jp/magazine/15822

スクレイピング

ページのHTMLを取得（JavaScriptを使用したページ）

#ページのhtmlを取得(js実行後)
soup = BeautifulSoup(driver.page_source, 'html.parser')

カリキュラム名をスクレイピング

#Curriculum-epjp87-9クラスの中身（カリキュラム名）を取得
getdiv = driver.find_elements_by_class_name('Curriculum-epjp87-9')

#('')の中に取得したいクラス名を入力

不要な部分を削除

取得したカリキュラム名をテキストに変換し、不要な部分を削除する

#タイトルを入れるための配列を準備
divcontent=[]

for n in getdiv:

   #テキストに変換
   content=n.text
   
   # スライスで半角空白文字よりも前を抽出
   target = '\n'
   idx = content.find(target)
   r = content[:idx] 
   
   #不要な部分を削除したデータを配列に格納
   divcontent.append(r)ｔ

※テキストに変換しなければデータを加工できないので、
　テキストに変換する。

※スライスで半角空白文字よりも前を抽出する方法　参考
https://atmarkit.itmedia.co.jp/ait/articles/2103/23/news022.html

実行結果はこんな感じ（完成）

#実行結果
getdiv = driver.find_elements_by_class_name('Curriculum-epjp87-9')
Output exceeds the size limit. Open the full output data in a text editor
['新規アプリケーションを立ち上げよう',
'ライブラリを導入しよう',
'ツイートを表示しよう',
'ツイートを保存しよう',
'ツイートを削除しよう',
'ツイートを編集しよう',
'ツイートの詳細を表示しよう',
'ユーザーを登録しよう',
'マイページを実装しよう',
'投稿者本人のみに編集・削除を許可しよう',
'表示順を並び替えよう',
'複数ページで利用する表示の一部をまとめよう',
'ツイートにコメントを投稿しよう',
'投稿検索機能を実装しよう',
'Railsのエラーを解消しよう',
'SQLを使ってみよう',
'データを操作しよう',
'データを形成して取得しよう',
'JavaScriptの概要を学ぼう',
'JavaScriptの基礎的な文法を学ぼう',
'JavaScriptの関数を学ぼう',
'JavaScript上でHTML要素を取得する方法を学ぼう',
'JavaScriptで画面上の表示を変えてみよう',
'JavaScriptの周辺知識',
'なぜ開発にGitやGitHubを使うのか',
...
'HerokuでFirstAppを公開しよう',
'はじめに',
'事前課題 ミニブログアプリ作成',
'もくもく会に参加しよう',
'オリジナルアプリ開発のTIPS']

データを配列に入れればいろんな形で使うことができます。
ぜひ参考にしていただければ幸いです。

次は取得したタイトルを、新規作成したワードのタイトルにするという作業を執筆予定です。