スクレイピングのChrome拡張「Web Scraper」を紹介してやんよ!!!

タグ：Chrome Extension

みなさん、WEBスクレイピングしてますか？どんなツール使ってますか？ 今回はChrome拡張で使えるとんでもなく便利なスクレイピングツールを紹介します

「Web Scraper」のインストール

まずはWeb ScraperをChromeブラウザにインストールしましょう

インストールが完了したらChromeブラウザのデベロッパーツール（右クリック「検証」またはMacは「option」+「command」+「i」キー、Winは「Fn」+「F12」キー）を開くとウィンドウメニューの最後に「Web Scraper」が追加されていればインストール成功です

ステップ１　サイトマップの新規作成

最初にスクレイピング先のURLとプロジェクト名を登録するため、サイトマップの設定が必要です

1. 「Create new sitemap」から「Create Sitemap」を選択
2.  「Sitemap name」にわかりやすいサイトマップの名前 ※日本語や先頭が数字、$, (, ), +, -は使用できません
3. 「Start URL」にスクレイピング先の最初のページとなるURLを入力
4. 「Crea Sitemap」ボタンをクリックで登録

ステップ２　セレクター登録①投稿リストのリンクを取得

サイトマップを作成したら「Sitemaps」一覧に追加されます。 アクセスしたページからどのデータを抜き出すかの新規セレクターを追加するため「Add new selector」ボタンをクリックします

1. 「id」にはそのユニークキーを入力。まずは当サイトのトップページから記事一覧のリンクを取得したいので「posts」とします
2. 「Type」でどの属性として取得するかを選択します。 ここではリンクURLのみを取得したいのでLinkを選択します。 テキストが欲しい場合はText、aタグごと欲しい場合はHTMLを選択します。
3. 「Select」ボタンをクリックするとページ該当ページに拡張のGUIが起動してクリックした要素のセレクターを取得できます。 「S」はセレクタ操作モードなので取得したい部分にフォーカスしてクリックでセレクタ取得 「P」はセレクタ取得した親(parent)要素にフォーカス先を変更 「C」はセレクタ取得した子(children)要素にフォーカス先を変更 「Done selecting」で決定します。
4. 「Element preview」をクリックすると取得対象の要素が赤枠で囲われてる事が確認できます
5. 「Data preview」をクリックすると取得対象のデータがちゃんと抽出できているかが確認できます。 個人的にはこの機能は地味だけどすごくありがたい
6. しかしこのままだと先頭の記事リンクしか取得できておらず、今回は記事リンクをすべて取得したいので、:nth-of-type(2)は削除して 「Multiple」にチェックを入れることでページ内の同じマークアップ要素をすべて取得できます
7. 「Parent Selectors」はスクレイピングするフローの階層設定をするので、今回はステップ１のサイトマップ登録で設定したURLにアクセスする動作が親セレクターとなるので「_root」を選択
8. これで記事一覧のURLを取得する工程ができたので「Save selector」をクリック

---

ステップ３　セレクター登録②記事のタグを取得

次は取得したリンク一覧から個別ページにアクセスして登録したタグ情報を取得していきます。 「Selectors」に登録セレクタ一覧が表示されています。

先ほど登録した「posts」セレクタをクリックするとパンくずで_root/postsという階層ができている事が確認できます

ふたたび「Add new selector」をクリックして新規セレクタを登録していきます

主な設定手順は先と同じなので割愛。今回は「posts」を親としてaタグ内のテキストを全取得 「Regex」は文字通り正規表現を設定できますが、今回は使いません

---

ステップ４　スクレイピングのツリー構造を確認

こういう手順で同じ階層で複数のセレクタを登録することができますので、 追加で①タグ情報テキスト、②記事の最後のpタグテキスト、③タイトルの取得セレクタを登録しました

こんな調子でどんどんスクレイピングセレクタ階層を登録できますが、この状態では全体構成がわかりにくいです そこで登録したツリー構造を確認するためメニューから「Selector graph」をクリックします

これでこのサイトマップがどういうフローか一目瞭然ですね

---

ステップ5 スクレイピングを実行

では実際にスクレイピングを開始しましょう！ メニューから「Scrape」をクリックすると 「Request interval (ms)」で各ページのアクセスまでの時間(ミリ秒)と 「Page load delay (ms)」でアクセスしたページのレンダリング待機する時間(ミリ秒)を設定します。

開始すると新規ウィンドウが開きスクレイピング処理が実行されます

当然のことですが複数のページにアクセスする場合は相手のサーバー負荷がかからない時間設定にしましょう。あくまで利用は自己責任で！

---

ステップ６　取得データCSVをダウンロード

スクレイピング処理が完了するとウィンドウが消えますので、最後に取得データをダウンロードしましょう

メニューから「Export data as CSV」をクリックしてDownload now!リンクをクリックするとCSVデータがダウンロードできます

---

まとめ

感想としては単純にすげー！しかも無料プランでもこれだけできるなんて・・・ 実際にスクレイピングのシステムを開発したことがある方なら、あまりの手軽さにイノベーションを実感できると思います。

さらに有料プランを利用する事で以下の機能も使えるみたいです

• 5000〜50000or無限クレジット（1ページ＝１クレジット）
• スケジューラー設定
• Dropboxへの自動エクスポート
• プロキシでの複数IPローテーション
• 取得データのパーサー処理
• XLSX、JSONでもエクスポート可能
• APIリクエスト
• Webhookによるサーバー通知
• 30〜60日間のデータ保持
• メールサポート

あくまで無料で使える範囲は限られているので、実際に自分で開発をする前の取得セレクタやツリー構造のテストで利用するにはもってこいですね