pythonとExcelでWebスクレイピング Part2
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/web-scraping-with-python-and-excel-part-2-768x512.png)
はじめに
前回、当サイトのトップページにある「最近書いた記事」のタイトルをPythonで引っ張ってくるシリーズのPart1の記事を書いた。
今回は、Part2。
Excelファイルの下準備
以下のようなタイトルを記入した。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-6.26.57.png)
A2以降に記事タイトルをリストアップしていく。
メンタルモデルを作る
以下の参考書の第7章でPythonとExcelでWEBスクレイピングをする内容が書かれているので、その章を理解して、メンタルモデルを作っていく。
プログラムを書いていく
前回までのこちらのソースコードに記述を加えていく。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-6.28.51.png)
openpyxlもインポートしておこう。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-6.43.17-1024x272.png)
取得したい要素を検証する
当サイトのトップページを開く。
chromeの検証ツールを開き(option + command + I)、矢印を選択する(Shift + command + C)。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-6.47.27.png)
記事タイトルには、all-article__ttlというクラス名が付いていることが分かった。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-6.49.00-1024x391.png)
そして、今回取得したい「最近書いた記事」は全部で5件ある。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-6.50.27-468x1024.png)
Excelのアウトプットイメージ
A2〜A6に、最近書いた記事をスクレイピングした結果を表示させたい。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-6.52.16.png)
ソースコードの全体像の仮説
どういうコードを書けば、今回やりたいことが実現できるのか?
以下のようなプログラムが考えられる。
1 必要なライブラリをインポートする
2 WEBサイトにアクセスする
3 スクレイピングしたい要素を取得する
4 取得した内容をExcelのA2〜A6に入力する
「1 必要なライブラリをインポートする」については、実施済み。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.00.02.png)
WEBサイトにアクセスする
requestsライブラリでアクセスしよう。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.01.14-1024x722.png)
以下のコードを書いてみた。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.07.35.png)
多すぎて最初の方は省略されていたが、ターミナルで「python my_sample.py(エクセルのファイル名)」を実行すると、以下の出力結果が得られた。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.08.10-743x1024.png)
ちなみに、responseの中身は、「Response [200]」というものだった。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.10.57.png)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.11.23.png)
スクレイピングしたい要素を取得する
response.textには、HTMLすべてが入っていることが確認できた。
これは、htmlという変数に格納しておこう。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.14.11.png)
このhtmlから記事タイトルの要素を取得したい。
ここで登場するのが、BeautifulSoup。
まずは以下のようにして、BeautifulSoupのオブジェクト?を作成する。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.24.43-1024x121.png)
今回に当てはめると以下のようになる。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.28.18.png)
これでHTMLが解析可能になったわけだ。
HTMLという一番大きな括りから、特定の要素を指定するための選択肢は以下の3つ。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.32.04-1024x369.png)
今回は、1つ目の方法で行かせてもらう。
CSSセレクタをコピーしよう。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.35.41-1024x385.png)
11行目にあるのがCSSセレクタ。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.36.45-1024x251.png)
ここで、nth-childはサポートされてないので、nth-of-typeに変換しよう。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.38.55.png)
変換完了。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.39.34-1024x249.png)
selectメソッドを使用して、表示させようとした。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.42.29-1024x231.png)
ここで、SyntaxErrorをお目にかかった。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.42.58-1024x109.png)
nth-of-typeがダメなのか?
ググるといろいろ出てきた。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.45.25-788x1024.png)
もう一度、CSSセレクタのコードを見直す。
body > main > div.pc-left-container > section > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div > div.all-article__text > a > div
divが多い。
多すぎるdivを削除してみた。
body > main > div.pc-left-container > section > div:nth-of-type(2) > div:nth-of-type(1) > div.all-article__text > a
同じ結果だった。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.54.44-1024x109.png)
nth-of-typeを削除してみる。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.55.22-1024x54.png)
これでどうか?
別のエラー発生(bodyが定義されていない)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.57.26-1024x105.png)
ここで重大なミスに気付いた。
参考サイトでは、シングルクオテーションが付いている。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-7.59.03-1024x329.png)
自分の書いたコードでは、シングルクオテーションが付いていなかった。
付けてみたらどうか?
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-8.01.01-1024x51.png)
上手く行った。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-8.01.38-edited.png)
このように、プログラミングではエラーの直接的な原因ではないエラーメッセージが表示されることがある。
大抵は、それよりも前の記述に問題がある。
前に問題があるから、それ以降のステップに進めないということだ。
上手く行った先ほどの結果は、中身が空だったので、以前のセレクタに戻す。
戻した上で、シングルクオテーションを追加した。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-8.05.17-1024x31.png)
無事、記事タイトルの「ラーメン海鳴」が取得できた。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-8.06.57.png)
でもこれだと、最近書いた記事の5件を取得したいという目的から離れている。
おそらく最後の1記事のタイトルが取得されている。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-8.09.48-881x1024.png)
ランダム表示される仕様のため、何回も実行すると、別の記事タイトルが表示される。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-8.10.47-1024x212.png)
ちなみに、elems[0]で最初の要素を取り出すことができた。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-8.13.22-1024x31.png)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2024/05/スクリーンショット-2024-05-17-8.13.39-1024x96.png)
といっても一件しかなかった。
理想は以下のような配列が取得できること。
[一番上の記事タイトル、二番目の記事タイトル、三番目の記事タイトル、四番目の記事タイトル、五番目の記事タイトル]
一つしか取得できない理由は、CSSセレクタを渡しているからだろう。
最初から5番目までと、一番最後の記事タイトルは、同じCSSセレクタ。
BeautifulSoupがselectメソッドを使用して、上から順番に見て行って、一番下だけを取得している。
いや、最初から最後まで取得した結果の一番最後だけが残っていると考えた方がいい。
なので、繰り返し処理(For文)で、最初から最後までのタイトルを配列に格納して、最初から5件を出力するというアルゴリズムが必要になってくるだろう。
次回(part3)
今回は、以下の全体像の3を試行錯誤しながら進めていった。
1 必要なライブラリをインポートする
2 WEBサイトにアクセスする
3 スクレイピングしたい要素を取得する
4 取得した内容をExcelのA2〜A6に入力する
次回は、以下のような配列を試行錯誤して作成するところから始めていきたい。
[一番上の記事タイトル、二番目の記事タイトル、三番目の記事タイトル、四番目の記事タイトル、五番目の記事タイトル]
コメントを残す