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')