【備忘録】Chrome拡張機能「Scraper」利用したスクレイピング（ページ内の特定の情報を一括で取得および躓いたポイントまとめ）

8122 ワード
スクレイピングツール HTML 要素取得 スクレイピング chrome拡張機能 HTML テキストリンク

記事一覧ページなどで、タイトルやリンク先情報の一覧を一括で取得したい時、
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のディベロッパーツールにて

  1. 該当要素を右クリック
  2. 「Copy」にマウスをのせる
  3. 「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を記載する時、パスの頭にスラッシュ"/"をつけると、データが取得されず該当欄には何も記載されません。エラー画面は出ません。

これも、パスをコピペで貼り付けた時など生じやすいのでご注意を。