[Chrome 拡張機能]Web Scraper で ABEMA ビデオのタイトルと URL の一覧を取得する

2020/05/12 Tue 08:37 · 1 min read · computer ·

前回 Chrome 拡張機能の「Web Scraper」を使って note の記事一覧を取得する方法について書いた。

［Chrome 拡張機能］ Web Scraper で note の記事一覧を取得する – with a Christian Wife
https://wacw.cf/2020/05/11/list-note-entries-with-web-scraper/

次に挑戦したのは ABEMA ビデオで、特定アニメのエピソード一覧およびそのリンクを取得することである。

今回は『キテレツ大百科』のエピソード一覧と、各エピソードの動画ページへのリンクを取得することを目標とする。

（０）Web Scraper のインストールを済ませておく。

Web Scraper – Chrome Web Store
https://chrome.google.com/webstore/detail/web-scraper/jnhgnonknehpejjnehehllkliplmbmhn

（１）まずは対象ページを開き、ページ読み込みの仕組みを調べる。

キテレツ大百科 | アニメ | 無料で動画＆見逃し配信を見るなら【ABEMAビデオ】
https://abema.tv/video/title/190-10

これはスクロールすることで、次々と一覧が読み込まれていく仕組みだ。シンプルなのでスクレイピングは簡単そうだ。

（２）「Chrome 右上の３点アイコン＞More Tools＞Developer Tools」をクリック（もしくは option + command + i ）。Developer Tools が開くので「Web Scraper」タブをクリック。

（３）「Create new sitemap＞Create Sitemap」をクリック。

Sitemap name を適当に記入。Start URL に対象 URL（今回は https://abema.tv/video/title/190-10 ）を入力。Create Sitemap をクリック。

（４）３のあと「Sitemap [３の Sitemap name 名]＞Selectors」に自動的に移動する。

「Add new selector」をクリック。

・Id：適当に Id を記入。とりあえず Element scroll down とする。
・Type：Element scroll down を選択。Element scroll down とは、ページ要素の塊がスクロールで読み込まれるタイプという意味だ。

「Selector＞Select」をクリック。最初の記事に対し、記事の四角いブロックが選択されるようにクリックする。次の記事も同じようにクリックする。

「Selector＞Select」をクリック。最初のエピソードのブロックをクリックする。そして、２つ目のエピソードも同じようにクリックする。これで以降のエピソードも自動選択されるようになる（赤色になる）。

「Done selecting!」をクリック。

「Multiple」にチェックを入れ、「Save selector」をクリック。Multiple を選択することで、スクロール動作で（単一の要素ではなく）複数の要素が読み込まれることを意味する。

また、Delay(ms) はデフォルトの０から 100 に変更しておく。実際にスクレイピングを試してみたところ、今回は 100 ミリ秒ほど遅延させたほうがうまく読み込めると分かったからだ。

（５）Selector 一覧表示から今作成した ID が「Element scroll down」のものをクリックする。次は各要素の中身を取り出す指示を指定する作業だ。

「Add new selector」をクリック。

・Id：任意の ID 。今回は title とする。
・Type：Link

「Selector＞Select」をクリック。一番最初のエピソードだけが黄色くなっているので、タイトル部分をクリックして選択＿＿としたいところだけど、タイトルのみをマウスでは選択できない。サムネイルや説明文等を含んだ全体が選択されてしまう。しかし、タイトルを含んでいるので今回は良しとする。抽出後のテキストファイルを編集すればタイトルのみ抽出できるはずだからだ。「Done selecting!」をクリック。「Save selector」をクリック。

（厳密にタイトルのみを抽出したいなら、ページ要素を調べて Selector に直接要素名を入力すればい。ちなみに、今回のタイトル部分の要素は .com-a-CollapsedText__container だった。あるいは、エピソードの個別ページまで入るとタイトルのみの抽出が普通にできたが、今回はエピソード数が多いのでその方法はやめておいた。）

（６）「Sitemap [Sitemap name 名]＞Scrape＞Start scraping」をクリックしてスクレイピングをスタートする。

スクレイピング用のウィンドウが新たに開き、作業が終わるとウィンドウが閉じる。

No data scpared yet. の右の「refresh」ボタンをクリック。きちんとデータが取得できれば、一覧が表示されるはず。

操作手順を示した動画は以下。

Web Scraper で ABEMA ビデオのタイトルと URL の一覧を取得する – 20200503 – YouTube
https://www.youtube.com/watch?v=5uNzWqHTjHo