###はじめに
オリジナルWebアプリを初めて作成するにあたり、あるサイトに掲載された膨大なデータを取得しなくてはならず、
手入力は流石に避けたかった筆者は「Web Scraper」というスクレイピングツールに出会いました。

ここでは、「Web Scraper」公式が提供する練習用サイトを用いて使い方について説明します。

###「Web Scraper」とは？

「Web Scraper」はWebサイト内の情報を取得できるスクレイピングツールで、無償で利用できるGoogleの拡張機能です。

まずはGoogleへインストールをしましょう。
https://chrome.google.com/webstore/detail/web-scraper-free-web-scra/jnhgnonknehpejjnehehllkliplmbmhn?hl=ja

###「Web Scraper」を使って実現したいこと

下記サイトに掲載されている全ての商品の「商品名」、「値段」、「商品説明」などの情報を取得し、取得したデータを文書ファイルに出力します。
こちらは「Web Scraper」公式が提供している練習用のサイトです。
https://www.webscraper.io/test-sites/e-commerce/allinone

サイト上では下図のように商品が掲載されています。

本記事では下記の動画と同じことを行います。
https://www.youtube.com/watch?v=n7fob_XVsbY

###サイトの構造
こちらのサイトは、「Computers」/「Phones」と大きな商品のカテゴリーから、「Laptops」「Tablets」「Touch」と更に細かいカテゴリーに振り分けられています。
「Laptops」「Tablets」「Touch」カテゴリーへ移動すると、下図のように商品の一覧が表示されます。

一覧の中から商品を選択すると、下図のように商品の詳細ページへ遷移します。

それでは商品の情報をスクレイピングしてみましょう。

###①「デベロッパーツール」を開き「Web Scraper」タブを選択
スクレイピングしたいサイトのトップページを開き、右上のメニューから「その他のツール」>「デベロッパーツール」を開きます。

×ボタンの隣にある「デベロッパーツール」の「メニュー」を開き、「デベロッパーツール」を画面下に表示させます。

このように下に表示すると作業がやり易いです。

「デベロッパーツール」上部の「Web Scraper」>「Create new sitemap」>「Create Sitemap」を選択します。

↓ここまでの工程を動画で見たい方はこちら
https://www.webscraper.io/how-to-video/open-web-scraper

###②「Sitemap」を作成
「Sitemap name」に任意の名前を入力します。
小文字（a〜z）、数字（0〜9）、または_、$、（、）、+、 – 、/以外を使うとエラーが起きる可能性があるのでご注意ください。
ここではチュートリアルにならい「ecommerce」とします。
「Start URL」に取得したいサイトのトップページのURLをコピーペーストし、「Create Sitemap」を押します。

すると表示が下記のように変わります。
「_root」は先ほど「Start URL」にコピーペーストしたURLで、ルートディレクトリを指します。
Web ScraperはこのURLを起点にして、スクレイピングします。

↓ここまでの工程を動画で見たい方はこちら
https://www.webscraper.io/how-to-video/create-a-sitemap

###③Selectorを作成

「Add new selector」押します。
「Save selector」ボタンが隠れている場合はデベロッパーツールの表示範囲を広げてください。

Selectorは、Webページ上の要素を識別するものです。

まずは、トップページにある「Computers」/「Phones」カテゴリーをSelectorに設定します。
「id」に英数字で任意の名前を入力します。　ここでは例にならって「category-link」とします。　
typeは「Link」を選択します。

「Select」を押します。
「Computers」と「Phones」をShiftキー（Macの場合)を押しながらクリックします。
クリックすると要素は赤色になります。
現在「Computers」と「Phones」の2つ（複数)を選択しているので、「Multiple」にチェックを入れます。

緑色の「Done selecting」を押し、「Save selector」ボタンを押します。
「Date preview」を押して下記のように表示されたら、Selectorは有効になっています。

↓ここまでの工程を動画で見たい方はこちら（③をご覧ください)
https://www.webscraper.io/web-scraper-first-time-install

次に、「Computers」配下の「Laptops」「Tablets」カテゴリーをSelectorに設定します。

先ほど作成したID「category-link」のSelectorを選択します。

遷移先で「Add new selector」押します。

「Select」を押します。
Shiftキー（Macの場合)を押しながら「Laptops」「Tablets」クリックします。
緑色の「Done selecting」を押します。

IDとType、「Multiple」のチェックは以下のようにします。

「Save selector」ボタンを押します。

「Laptops」のページを開くと商品の一覧が表示されます。
今度は商品の詳細ページへのリンクをSelectorに設定しましょう。

前回作成したSelector「subcategory-link」を選択します。
「Add new selector」押します。

「Select」を押し、
Shiftキーを押しながら詳細ページへのリンクを選択します。

「Done selecting」を押し、下図の内容で「Save selector」を押します。

この段階で、サイト内の全てのカテゴリーにおいてSelectorがトップページから商品の詳細画面まで移動できるように設定されました。

それでは商品の詳細ページへ移動します。

いよいよ商品の各データを抽出できるよう「Selecter」に設定していきます。
商品一覧左上の「Asus VivoBook」を開きます。

先ほど作成した「product-link」を選択し「Add new selector」を押します。
下記の内容で商品名を設定した「Selector」を作成します。

id:「name」
Type:「Text」

今回は商品名のみを選択しているので、「Multiple」のチェックを外します。

「Selector」を押し「Asus VivoBook X441NA-GA190」を選択し、「Done selecting」を押します。
選択時、「$295.99」も含まれますが問題ありません。

「Save selector」を押します。

前回までは作成した「Selector」をクリックし、遷移先で「Add new selector」ボタンを押していましたが、
今回は作成した「name」Selectorを選択せずに「Add new selector」ボタンを押します。

次は価格のSelectorを作成します。
id:「price」
Type:「Text」

「Selector」を押し、価格「$295.99」を選択します。

「Done selecting」を押し、「Save selector」を押します。

同じ要領で「商品説明」「画像」のSelectorを追加します。
画像はTypeに「image」を選択します。

「Sitemap ecommerce」の中の「Selector graph」を押すと、構築したSitemapを確認できます。

以下のようなルートを通ってデータが抽出されます。

これで抽出したいデータの指定が完了しました。

##スクレイピング
「Sitemap ecommerce」の中の「Scrape」を押します。

「Start scraping」を押すと、データを抽出するページがポップアップに表示されます。
ポップアップが表示されている間にスクレイピングを行います。

スクレイピングが終了するとポップアップが消えます。
「refresh」を押すとスクレイピング中のデータが一覧で表示されます。

###抽出データの出力
抽出したデータをCSVに出力します。

「Sitemap ecommerce」の中の「Export data as CSV」を押します。

「Download now!」を押すとCSVファイルがダウンロードされます。

CSV編集アプリ「Table Tool」を使用して開きます。

このようにサイトからスクレイピングしたデータが出力されました。
Selector作成時に「id」に入力した名称がカラム名になっています。

長い記事になってしまいましたが、以上が「Web Scraper」の基本的な使い方です。

もっと他のことがしたい！という場合は、以下のサイトをチェックしてみてください。
英語のサイトですが、画面収録された動画でわかりやすく説明されています。
https://www.webscraper.io/how-to-videos

参考
http://sgshonai.tk/tips/376/
https://note.com/hiroyukiyokoyama/n/n8eee7ba4291d
https://www.youtube.com/watch?v=n7fob_XVsbY