【備忘録】Chrome拡張機能「Scraper」利用したスクレイピング(ページ内の特定の情報を一括で取得および躓いたポイントまとめ)
記事一覧ページなどで、タイトルやリンク先情報の一覧を一括で取得したい時、
Chromeの拡張ツール「Scraper」を利用してスクレイピング(scraping)して取得する方法の忘備録。
ScraperをChromeの拡張機能に追加する
Chrome ウェブストアにて、「拡張機能を追加」ボタンをクリックして拡張機能に追加する。
Scraper(Chrome ウェブストア)
https://chrome.google.com/webstore/detail/scraper/mbigbapnjcgaffohmbkdlecaccepngjd?hl=ja
取得例:「つぶやきデスク」導入事例の個別の事例情報を取得したい時
導入事例の企業様名、説明文(description)、ページリンク先を
一括取得して一覧表にする場合の参考ページおよび参考画面を下記に記載。
■「つぶやきデスク」導入事例
https://twdesk.com/example/
■取得したい部分のコードサンプル
<!-- ※起点とするdiv要素 -->
<div class="archive-list">
<!-- ※起点とするdiv要素の子要素 -->
<div class="post-box">
<!-- ※起点とするdiv要素の1番目の孫要素 -->
<div class="thumb"> <img width="110" height="110" src="/wp-content/uploads/2020/04/14_marui_anime_emblem.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> </div>
<!-- ※起点とするdiv要素の2番目の孫要素 -->
<div class="box-in">
<!-- ※取得したい企業様名 -->
<div class="post-tit">株式会社 丸井グループ 様 </div>
<!-- ※取得したい説明文(description) -->
<p class="lead">株式会社 丸井グループ様のつぶやきデスク導入事例です。キーワードを登録し、イベント来場者の動きをツイートで確認。イベント開始前の反応から、来場者の人数や属性を予測することも。</p>
<!-- ※取得したいリンク先を持つaタグ -->
<a href="/example/marui/" class="more-link"> More</a> </div>
</div>
<!--//post-box-->
{ 中略 }
</div>
<!--//archive-list-->
《参考》Chromeのデベロッパーツールで見た時の該当箇所のコード
■「Scraper」で導入事例の企業様名、説明文(description)、ページリンク先を取得したときの画面
取得したい項目のパスを記載して、「Scrape」ボタンをクリックすると情報取得可能。
※selectorはXPathを利用
画面内の設定内容
■Selector
XPath : //div[@class="archive-list"]/div/div[2]
■Columns
{XPath} : {Name}
div : 企業様名
p : 説明文
a/@href : URL
情報取得後、「Copy to clipboard」をクリックすると、取得した情報をまるっとコピー可能。
Excelやスプレッドシートなどに貼り付けも可能でした。
書き方メモ
自分で書くとき用の書き方メモ
やりたいこと | 記述 | 記述例 |
---|---|---|
起点までのパスの記載を省略 (起点となるノードの子孫すべての集合) |
// | //article ※article要素を起点としたい場合 |
n番目の要素を指定 | [n] | div[2] ※2番目のdiv要素を指定 |
特定のclassを持った要素の指定 | [@class="{クラス名}"] | div[@class="archive-list"] ※"archive-list"というクラスを持ったdiv要素を指定 |
aタグのリンク先URLを指定 | a/@href | -- |
取得したい要素のXPathがよくわからない時
Chromeのディベロッパーツールにて
- 該当要素を右クリック
- 「Copy」にマウスをのせる
- 「Copy XPath」をクリックしてCopyする。(「Copy full XPath」でhtmlからのパスを取得も可能)
例:企業様名の要素をChromeのディベロッパーツールで取得した場合
「Copy XPath」 で取得:
//*[@id="contents"]/div[1]/div/div/div[1]/div[2]/div
「Copy full XPath」 で取得:
/html/body/div[1]/main/article/div[1]/div/div/div[1]/div[2]/div
ユニークなところまで遡るので、パスが長くなるのが難点(´・ω・`)
設定時の注意点
初回利用時、自分が設定でコケたポイント。
1.パスの最後にスラッシュ"/"はつけない。
SelectorにXPathを指定した際、最後の要素の後ろにスラッシュ"/"を付けるとエラー画面が出ます。
OKだった時の記載例:
//div[@class="archive-list"]/div/div[2]
エラーが出た時の記載例(後ろにスラッシュ"/"が入っていた):
//div[@class="archive-list"]/div/div[2]/
ColumnsのXPathでも同様の現象が生じます。
一箇所でも最後にスラッシュが入っていると、エラー画面が出ます。
パスをコピペで貼り付けた時など生じやすいのでご注意を。
2.ColumnsのXPathに記載するパスの先頭にスラッシュ"/"はつけない。
ColumnsのXPathを記載する時、パスの頭にスラッシュ"/"をつけると、データが取得されず該当欄には何も記載されません。エラー画面は出ません。
これも、パスをコピペで貼り付けた時など生じやすいのでご注意を。
Author And Source
この問題について(【備忘録】Chrome拡張機能「Scraper」利用したスクレイピング(ページ内の特定の情報を一括で取得および躓いたポイントまとめ)), 我々は、より多くの情報をここで見つけました https://qiita.com/ka-ko/items/2ef0c6870bb8a174f35f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .