Webサイト内の情報を取得・加工できるスクレイピング（scraping）は、使いこなせるとかなり便利な技術です。

本記事ではChrome拡張機能「Scraper」について紹介します。

まず手元にScraperを用意して機能を体感してみましょう。その上で細かい機能や仕様について説明していきます。

最後にスクレイピングツールの活用シーンや種類についてまとめ、Scraperが全体のどの位置のツールであるかも確認する予定です。

無料で利用できるツールですので、気軽にインストールして試してみて下さい。

Scraperとは

Scraperには「こて・へら状の器具・掘削機の1種」などの意味があります。ロゴのマークもヘラ状の道具のシルエットです。

どちらも壁のペンキや土砂をガリガリ削るのに用いられます。

ScraperはWebサイトのHTML内から不要な情報を削り取り、必要な情報を抽出してくれるツールという訳です。

このような操作をスクレイピングといいます。

似たシーンで聞く用語にクローリングがありますが、これはプログラムが定期的にWebサイトを巡回して情報収集することです。

そしてこの機能を持つプログラムのことをクローラーと呼びます。間違いやすい用語なのでご注意下さい。

Scraperはユーザー数10万を超えるChromeのデベロッパーツールで、執筆時点での平均評価は5段階中4.1（350人が評価）を誇っています。


Scraperのセットアップ

ScraperはChromeの拡張機能なので、Chromeブラウザがない方はインストールしてから戻ってきて下さい。

Google Chrome ウェブブラウザ


ScraperをChromeに追加する

以下のリンクからChromeウェブストアを開き、「Chrome に追加」ボタンをクリックしましょう。

Scraper – Chrome ウェブストア

「「Scraper」を追加しますか？」と聞かれるので、「拡張機能を追加」ボタンをクリックします。

「「Scraper」がChromeに追加されました」とメッセージがポップアップし、拡張機能アイコンが表示されれば完了です。

再起動や初期設定などは必要ありません。


Scraper画面を開く

拡張機能アイコンの上で右クリックまたは左クリックして下さい。

開いたコンテキストメニューの中から「Scrape similar…」を見つけてクリックします。

するとブラウザウィンドウとは別のウィンドウが開く筈です。大きさが調整できるので少し広げて見てみましょう。

またWeb ページ中で右クリックしてコンテキストメニューを開いても、同様のメニューを見つけることができる筈です。


Scraperの基本

まずは実際に使用して動きを確認してみましょう。

基本的にこのページをベースに解説を行っていきますが、方法が理解できた方は他のWebページでも試してみて下さい。


要素を指定して画面を開く

本記事の中見出しの上で右クリックを押下し、「Scrape similar…」を選択してみましょう。

左カラムには拡張機能アイコンから開いたときと異なり、初期値としていくつかのデータが入力されています。

  • XPath: //article/div/h3/span
  • Columns: Name Text

右カラムには「1 ScraperをChromeに追加する」に始まる中見出しのリストが並んでいる筈です。

今度は同じ操作をサイドバーの「人気記事ランキング」で試してみて下さい。

  • XPath: //section[4]/div/article/a
  • Columns: Name Link, URL

今度はNameにTextだけでなくURLも表示され、右カラムにはランキング記事のタイトルとURLが一覧表示されていると思います。

これが最も簡単なScraperの使い方です。


結果をクリップボードにコピーする

右カラム右下にある「Copy to clipboard」を押して下さい。中央にデータをコピーした旨を告げるメッセージが表示されます。

これをテキストエディタに貼り付けてみましょう。少々半角スペースが目立ちますが削除すればそのまま使えそうです。

今度はGoogleスプレッドシートに貼り付けてみて下さい。末尾のスペースが自動で削除され見やすい表になりました。


Scraperのメニューを解説

Scraperの画面は大きく左右に分かれ、左側のカラムは更に種類ごとに分類されています。各々どのような機能か確認しましょう。


Selector

要素の指定方法をjQuery・XPath（XML Path Language）の2種類から選べます。

右側のテキストボックスにセレクタが自動で入力されますが、これらは手動で変更が可能です。

ピンポイントで欲しい要素がある場合は、自動入力から少しずつ修正していくのが良いと思います。

  • //section[4]/div/article/a
  • //div/h2/span
  • //div/div[@class=’content’]
  • //div[@class=’page’]

jQueryよりもXPathの方が優れている点として、親要素の指定・and検索・or検索が可能などの点が上げられるでしょう。

指定方法を選択するとテキストボックスの下にjQuery・XPath各々のリファレンスへのリンクが表示されます。

セレクタの書き方が分からない方は、リンク先のドキュメントを参照して下さい。


Columns

右カラムに表示されているテーブルの列に関する情報です。ここにもXPathが指定できるようになっています。

  • Selector: //section[4]/div/article/a
  • Columns: . Link
  • Columns: @href URL

セレクタで指定しているのはa要素なので、<a>タグの中身のサンプルを作成してみました。

  1. <a class=”your-sample” href=”リンク先” data-num=”30″>
  2. <svg …>
  3. <use …></use>
  4. </svg>
  5. <div class=”content”>
  6. <h3 class=”title”>タイトル</h3>
  7. </div>
  8. </a>

「.」でHTMLのinnerTextを、「@href」でhref属性を指定しているのが分かります。

Scraperはこれらの指定に従ってWebページ内から情報を抽出し、右カラムの一覧に反映させているという訳です。


Filters

「Exclude Empty results」にチェックが付いた状態で空の結果を除きます。チェックを外すと空の結果も表示するように設定可能です。

スクレイピングをしていると半角スペースや空タグだけの、意味を成さないデータが含まれていることも多々あります。

そうした場合にこのチェックをONにしておくと非常に便利です。


Scraperのスクレイピング機能

画面上では左下のボタン郡についての説明にあたります。


Presets…

現在のメニューの内容を保存しておける機能です。

「Presets…」ボタンを押すと小さなウィンドウが表示されます。任意の名前をテキストボックスに入力して「Save」ボタンを押して下さい。

保存されたプリセットを使用するには、同じく「Presets…」ボタンからウィンドウに表示されたリンクをクリックです。

WordPressテーマやブログサービスなどは、テンプレートと呼ばれる決まった構造のHTMLを使用しています。

ある程度の定型文を登録しておけば、複数のサイトに対して類似のプリセットを使うことで利便性を高めることができるでしょう。

また閲覧頻度の高いサイトのプリセットを登録しておけば、毎回指定する手間が省けるので便利です。


Reset

ウィンドウを開いたときの状態までリセットできます。

ColumnsやXPathの編集内容を戻したいときに使用すると良いでしょう。ただし本当に最初の状態に戻るので注意して下さい。

途中でプリセットを読み込んでから編集を始めたようなケースでは、更にその前に戻ります。


Scrape

「Scrape」ボタンはメニューの変更内容が、右カラムの結果表示エリアに反映される実行ボタンです。

このボタンを押さないと再抽出作業は始まりません。


Scraperの右カラムを解説

画面右側のカラムについて説明します。

Columnsと同じカラムが表示されているでしょう。ソート機能などは特にありません。

左端にペンのようなマークと行数が表示されています。このペンのアイコンをクリックすると対象の要素まで移動が可能です。

結果表示エリアは文字列の選択が可能になっているので、欲しいデータを選択してコピーすることもできます。


Scraperの出力機能

画面上では右下のボタン郡についての説明です。

「Copy to clipboard」については「結果をクリップボードにコピーする」で解説したので省略します。

ここでは「Export to Google Docs…」について手順を確認していきましょう。


OAuth2でアクセス許可

Googleドライブにアクセスするためにアクセスを許可します。

「高度な保護機能プログラム」などを使用している場合は以下のエラーメッセージが表示されてしまうでしょう。

  • Error
  • OAuth2 request failed: Service responded with error: ‘Service has been disabled for this account.’

アクセスを許可したくない場合は、前述のクリップボードへのコピーを代替機能として使用して下さい。


Export to Google Docs…

「Export to Google Docs…」ボタンを押すと、Googleスプレッドシートにデータを反映することができるようになります。

Googleスプレッドシートは表計算ソフトとしての機能も豊富なので、Scraperと合わせて用いればより強力なツールになるでしょう。


スクレイピングツールの活用シーン

Scraperが威力を発揮するのはテーブル・リストデータがあるWebページのスクレイピング（scraping）です。

個人的な用途は以下のようなものが考えられます。

  • Twitterで一連のツイートを取得する
  • 買い物サイトで購入履歴を取得する
  • 気象データをテーブルから取得する
  • 商品比較サイトから価格・スペックなどを取得する

また商用的な用途での活用事例は以下です。

  • マーケティング関連データの取得・分析する
  • オークション価格・株価の変動を取得する

上記のデータをScraperで抽出した後、表計算ソフトで見やすく加工することが容易になります。


スクレイピングツールの種類

スクレイピングツールはScraperだけではありません。


フリーソフト・拡張機能

ScraperはChromeの拡張機能であるように、FirefoxにもWeb Scraperという拡張機能があります。

またフリーソフトも含めれば数多のスクレイピングツールがあり、ここで全てを紹介することは困難です。

これらのツールの良いところは誰でも気軽に使える点でしょう。


オンラインサービス

Octoparse・ParseHub・Dexi.io・ScrapeStormなどのオンラインサービスです。

中には人工知能を利用したWebスクレイピングツールも登場しています。

フリーソフトや拡張機能と異なり、スケジューリング機能が搭載されているものが多いです。

これらはスクレーパーであると同時にクローラーでもある場合がほとんどでしょう。


プログラミング言語で実装する

言語の種類を問わずWebページにGETでアクセスしてHTMLコンテンツを取得することができます。

RubyでスクレイピングをするならNokogiriというライブラリを使いますし、PythonならBeautiful Soupというライブラリです。

プログラムであれば様々なアプリケーションに組み込んだり連携したりでき、改造の自由度もかなり高くなります。


おわりに

Scraperを使いこなせるようになると業務効率化が捗るでしょう。

ITエンジニアとしてはChangeログ・移行手順の一覧化や見辛い表データの取得＆スプレッドシートでの整形などの用途も考えられます。

物は使いようといいますから、上手い方はScraperも器用に使ってしまうことでしょう。

使い方はここで一通り説明できた筈ですので、後は自分に合った使い方や効率の良い指定方法を見つけてみて下さい。


toiroフリーランスは、SHIFTグループがプライムとして参画している独自案件をフリーランスエンジニア向けに紹介する唯一のプラットフォームサービスです。

エージェントによるサポートもありますので、ご利用を検討してみてはいかがでしょうか。​