Chromeの拡張機能でノンコードWebスクレイピング

Webスクレイピングをノンコードで行うことが出来る便利な拡張機能を見つけた。コードを書くことなく、GUI操作でスクレイピングが出来るので、記事にまとめて共有したいと思う。

## 使用するプラグイン
[Data Miner](https://dataminer.io/) をChromの拡張機能に追加する

## 実践
スクレイピングするサイト：[草加市プレミアム商品券特設サイト](https://premium-gift.jp/soka2023/use_store?events=search&id=&store=&addr=&industry=)
取扱事業者一覧をスクレイプする。

#### ステップ1
スクレイプしたいページを開き、拡張機能ボタンをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/27d1a10f-63e2-0e22-155e-c0154ccdbc82.png)


#### ステップ2
「make your own recipe」をクリック
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/53b4ef06-395c-b312-5d4a-2e5cd2c47bb7.jpeg)

#### ステップ3
Recipe Creator ウィンドウが自動で開くので、「2 Type」タブへ移動。今回はリストタイプなので、上の「List / Searh Page」を選択。
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/8539f270-eb33-dda0-a8e4-065def47ea83.jpeg)

#### ステップ4
「4 Rows」タブに移動し、「Easy Row Finder」をクリック
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/fac660d0-9ef5-5ec7-0fd8-2ca1371749e1.jpeg)

#### ステップ5
小ウィンドウが開くので、指示通り、スクレイプするひとブロックにカーソルを当て、1キー を押下。
![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/bb21de69-24a4-3723-0416-abf694e688a5.jpeg)

下記は、カーソルを当てたところ。スクレイプしたいブロック全体がオレンジ色になっている。
![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/ef4361c5-b688-277a-2f53-1851c0fdde85.jpeg)

下記は、1キー を押下した後。赤の点線で囲まれる。
![8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/eb9749cc-2e91-bad7-efa3-2594dadbe749.jpeg)

次に、2つ目にスクレイプされるべきブロックにカーソルを当て、同様に、2キー を押下。

#### ステップ6
「5 Col」タブでは、スクレイプする具体的な値を指定する。
項目名を任意で「name」とした。Typeは、値をスクレイプしたいので、デフォルトの「Scrape a value...」のまま、「Easy Column Finder」を押下。
![12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/1a693bd6-802c-82ec-53c7-733e04527972.jpeg)

インストラクション通りに、スクレイプしたい値の上にカーソルを当て、Cキー を押下。
![14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/9b3f60cf-7f3b-7da7-9178-3af402fb6f9a.jpeg)

うまくいっていれば、下記のように抽出された結果が表示される。欲しかった値であることを確認。
![15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/857b5b02-94c6-ae57-ef21-6f5093b45d86.jpeg)

引き続きコラムを追加して、スクレイプしたい値を抽出する。スクレイプしたい値が複数見つかった場合は、下記のように候補が表示されるので、欲しい値を選択する。
![17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/25e6284d-97be-8038-7595-3dda0770102c.jpeg)

4コラムを取得することにした。「5 Cols」を終了後は下記のようになった。
![18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/8847489b-3e29-8b7c-a663-368ed746df17.jpeg)

#### ステップ7
「6 Nav」タブに移動する。
ここでは、ページを移動するための情報を指定する。
今回スクレイぷするサイトは、「Easy Nav Finder」ではうまくいかないため、「Advanced Settings」に進む。
![23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/4553b032-d9b9-8d19-ee96-8c4e3147cc1a.jpeg)

ウェブサイトの「次へ」だけを選択したいのだが、CSSクラス、HTMLタグを使っても、うまくいかない。
![25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/7f0c09f5-a1b3-bbcf-88a0-fa75439ac27f.jpeg)
結局、下記の方法にて、目的の「次へ」だけを指定することが出来た。「次へ」という文字を直接探す方法だ。「a:contains(指定したい文字)」
![38.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/dbc72973-3b75-1fc1-155b-d456ea3e11a1.jpeg)

#### ステップ8
「8 Save」タブに移動し、作成したレシピに任意の名前をつけ、「Save」を押下し保存。
![28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/1acaf3bc-86fd-0748-85e7-98ea8e1ea9ba.jpeg)

#### ステップ9　レシピを実行する
スクレイプしたいページを開き、拡張機能ボタンをクリック。
現在開いているページを1ページ目として、スクレイプを行うことになる。
「My Recipes」タブに移動し、先ほど作ったレシピで「▶️」をクリック
![Untitled 42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/37c57f1c-05d9-b75f-67fc-ff3eb6c1c55f.jpeg)

Data Minerウィンドウが開いたら、今回は1ページだけでなく、次のページへと続けてスクレイプしたいので「Next Page Automation」を選択。何ページスクレイプしたいのか、次のページに移動するまでに何秒待つか、を指定する。また、画面下部のプレビューで、欲しいデータが取れているか確認し、まずは、数ページだけスクレイプし、結果が望ましいものになっているか確認することをお勧めする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190318/4a02acc9-3170-e3b3-48eb-76be5529c1f7.png)

以上で完了。
画面下部にスクレイプした結果が表示される。CSVもしくはエクセルにてローカルにダウンロードすることも可能。

## まとめ
簡単にコードを書く必要なくスクレイプ出来る非常に便利なツールを見つけ大満足。無料プランだと １ヶ月に50,000行まで無料で利用出来るようだ。
今回スクレイプしたデータも、先日Googleサイトで作成したWeb
サイト[コスパ101](https://www.cospa101.com/)にアップロードした。