ブラウザのコンソールでスクレイピング #JavaScript

Webページから表や見出しを抽出したり簡単な整形をしたりしたくなることがあります。
簡単なものであればブラウザのコンソールを使ってデータの抽出や加工を行うことができます。

TL;DR

コンソールで次のようなコマンドを実行するとデータを抽出できる

$$('CSSセレクタ').map(e => doSomething(e)).join('\n')
copy($_)

* $$('CSSセレクタ')で要素を抽出
* mapで各要素を加工
* joinで加工した要素を1つの文字列に結合
* copyで結果をクリップボードにコピー

環境

* Mac OSX 10.10.5
* Google Chrome 47.0.2526.106 (64-bit)
* Firefox 44.0

方法

CSSセレクタで要素を抽出

まず、データの抽出を行いたいページでコンソールを開きます。

抽出したい要素を取り出すためのCSSセレクタを調べます。
欲しい要素を右クリックして「検証」(Firefoxでは「要素を調査」)で比較的簡単に調べることができます。

コンソールで$$('CSSセレクタ')コマンドを実行するとセレクタで指定された要素が抽出されます。

例としてQiitaの新着投稿一覧を取得してみます。
http://qiita.com/itemsを開き、次のコマンドを実行すると新着投稿のリンクのリストが取得できます。

$$('div.activities div.item-box-title > h1 > a')

抽出した要素の加工

HTMLのままでは扱いにくいのでmapとjoinを使ってタブ区切り形式に変換します。

$$('div.activities div.item-box-title > h1 > a').map(e => e.title + '\t' + e.href).join('\n')

ブラウザのバージョンによっては$$()の結果がArrayではなくNodeListで直接mapを使えない場合があります。
この場合は、次のように[].map.callを使うと同じ結果を得ることができます。

[].map.call($$('div.activities div.item-box-title > h1 > a'), e => e.title + '\t' + e.href ).join('\n')

クリップボードにコピー

copyコマンドで結果をクリップボードにコピーすることができます。（$_は直前の実行結果）

copy($_)

Tips

Chromeでは$$()の第2引数に要素を与えると、その要素に対してCSSセレクタを適用することができる。
（Firefoxでも動くが全体に対して適用され期待した結果が返ってこない。）

$$('div.activities div.item-box').map(
  e => {
    var user = $$('span.user > a', e)[0].innerHTML.trim();
    var a = $$('h1 > a', e)[0];
    return [user, a.title, a.href].join('\t')
}).join('\n')

Chrome, Firefoxともに次のように書けば期待通りに動く。

$$('div.activities div.item-box').map(
  e => {
    var user = e.querySelector('span.user > a').innerHTML.trim();
    var a = e.querySelector('h1 > a');
    return [user, a.title, a.href].join('\t') }
).join('\n')

参考

* Command Line API Reference - Google Chrome
* Web Console - Firefox Developer Tools | MDN
* Web Console Helpers - Firefox Developer Tools | MDN