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

記事一覧ページなどで、タイトルやリンク先情報の一覧を一括で取得したい時、
Chromeの拡張ツール「Scraper」を利用してスクレイピング（scraping）して取得する方法の忘備録。

#ScraperをChromeの拡張機能に追加する

![Scraper_Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212038/1f4d9aa8-694b-f168-b047-7d7a3bf75f6e.png)

Chrome ウェブストアにて、「拡張機能を追加」ボタンをクリックして拡張機能に追加する。

Scraper（Chrome ウェブストア）
https://chrome.google.com/webstore/detail/scraper/mbigbapnjcgaffohmbkdlecaccepngjd?hl=ja

#取得例：「つぶやきデスク」導入事例の個別の事例情報を取得したい時

導入事例の企業様名、説明文(description)、ページリンク先を
一括取得して一覧表にする場合の参考ページおよび参考画面を下記に記載。

■「つぶやきデスク」導入事例
https://twdesk.com/example/
![tw.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212038/0b7e1e9f-d193-74ab-d606-6564bc6aba93.png)

■取得したい部分のコードサンプル

```html
<!-- ※起点とする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のデベロッパーツールで見た時の該当箇所のコード
![code.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212038/079f12a8-0b42-0ece-2751-213753b6ef6b.png)



■「Scraper」で導入事例の企業様名、説明文(description)、ページリンク先を取得したときの画面

取得したい項目のパスを記載して、「Scrape」ボタンをクリックすると情報取得可能。
※selectorはXPathを利用
![Scraper_sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212038/32f9f3e9-4cf4-5adb-9118-c82344788fcf.png)


画面内の設定内容

```
■Selector
XPath　：　//div[@class="archive-list"]/div/div[2]

■Columns
{XPath}  ：  {Name}
div      ：  企業様名
p        ：  説明文
a/@href  ：  URL
```


情報取得後、「Copy to clipboard」をクリックすると、取得した情報をまるっとコピー可能。
Excelやスプレッドシートなどに貼り付けも可能でした。
![sheet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212038/c37b9bf3-bae7-19fe-7b89-74f67907cc74.png)




##書き方メモ

自分で書くとき用の書き方メモ

| やりたいこと | 記述 | 記述例 |
|:-----------|:-----------|:-----------|
| 起点までのパスの記載を省略 <br>（起点となるノードの子孫すべての集合）| // | //article<br>※article要素を起点としたい場合 |
| n番目の要素を指定 | [n] | div[2]<br>※2番目のdiv要素を指定 |
| 特定のclassを持った要素の指定 | [@class="｛クラス名｝"] | div[@class="archive-list"]<br>※"archive-list"というクラスを持ったdiv要素を指定|
| aタグのリンク先URLを指定 | a/@href | -- |

##取得したい要素のXPathがよくわからない時

Chromeのディベロッパーツールにて

1. 該当要素を右クリック
2. 「Copy」にマウスをのせる
3. 「Copy XPath」をクリックしてCopyする。（「Copy full XPath」でhtmlからのパスを取得も可能）

![xPath.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212038/8504704f-dfb8-3b13-0493-a7f4fbe965ff.png)

```
例：企業様名の要素を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]/
```
![スラッシュ付きのときのエラー画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212038/3fe525f6-fc19-9672-7240-32245b231d7b.png)

ColumnsのXPathでも同様の現象が生じます。
一箇所でも最後にスラッシュが入っていると、エラー画面が出ます。

![スラッシュ付きのときのエラー画面2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212038/8c4333cb-a221-7aa4-4a03-21d0844e7551.png)

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

##2.ColumnsのXPathに記載するパスの先頭にスラッシュ"/"はつけない。

ColumnsのXPathを記載する時、パスの頭にスラッシュ"/"をつけると、データが取得されず該当欄には何も記載されません。エラー画面は出ません。

![データが出ない.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212038/0b05e8f2-ce84-1846-de55-251fa1941ad2.png)

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