node.jsとjQueryでスクレイピングするウェブアプリの作り方

さくら — Mon, 31 Jan 2011 15:51:06 +0000

やっぱ jQuery 便利ですよ(*´・ω・)(・ω・｀*)ﾈｰ

セレクタ使って jQuery でダカダカやってると、DOM とか正規表現でネチネチやるのがバカらしくなっちゃいます。

と日頃から思ってたりしてまして、サーバサイド JavaScript がメインストリームになって、jQuery でウェブアプリをコーディングできれば超ラクできるかもと期待しています。

で、先日サーバサイドJavaScriptとjQueryでスクレイピングという記事をうpったところ、やっぱ Rhino じゃなくて node.js がえーんよ(´･ω･｀)というコメントを頂きましたので、node.js と jQuery でサーバサイド JavaScript スクレイピングしてみることにしました。

今回は node.js ですので、単にスクレイピングする（コマンドラインから実行する）スクリプトだけじゃなくて、スクレイピングする簡単なウェブアプリを作ってみたいと思います。

結構長文になっちゃったので、先に今日のブログで扱ってるテーマを書いときます。

jsdom パッケージを使って node.js で jQuery する方法
jsdom パッケージの HTML コンテンツ中の script タグの扱いに関する問題の回避方法
文字エンコーディングを考慮した HTML コンテンツのダウンロード方法
スクレイピングウェブアプリの作り方

あと完成品のソースを入れた ZIP も先に置いときますので、中身から見たいセッカチさんはこちらからどうぞ。

nodejs-linkpicker.zip

要るもの

まず node.js が必要です。それと node.js のライブラリをインスコするために npm (Node Package Manager）を使います。一緒にインスコしておいてください。

node.js のインスコ方法については node.js の公式サイトを、npm のインスコ方法については配布元 github の isaacs /npm をご覧ください。

英語読むのがメンドくせー方は node.jsとMySQLで割と普通のデータベースウェブアプリを作ってみるチュートリアルに node.js と npm のインスコ方法を書いてますのでそちらとかどうぞ。

jsdom

node.js 本体には DOM ライブラリが付いてませんのでそのままでは jQuery を使えませんが、npm パッケージの jsdom という DOM ライブラリをインスコすると jQuery も使えるようになります。

jsdom は npm install でインスコできます。

$ npm install jsdom

とりあえず準備はこれで終わりです。

jQuery を使ってみる

早速 node.js で jQuery してみます。

HTML コンテンツに div を追加するスクリプトだとこんな感じになります。

#!/usr/bin/env node
// exam1.js

var sys = require('sys'),
fs = require('fs'),
jsdom = require('jsdom'),
domToHtml = require('jsdom/browser/domtohtml');

var jquery_js = 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';

// node、スクリプト名、の次に有効なコマンドライン引数が入る
if (process.argv.length <= 2) {
sys.puts('Usage: node exam1.js [FILE]');
process.exit(1);
}

// HTMLコンテンツを読み込む
// コマンドライン起動前提なので同期I/Oで
var content = fs.readFileSync(process.argv[2], 'utf8');

// HTMLコンテンツからwindowオブジェクトを作る
var document = jsdom.jsdom(content);
var window = document.createWindow();

// jsdom.jQueryifyがwindowにjQueryを追加してくれる
jsdom.jQueryify(window, jquery_js, function(window, $) {
// divを追加する
$('body').append('

More Hello World!!

');

// DOMツリーを出力する
if (document.doctype) {
sys.puts(String(document.doctype));
}
sys.print(domToHtml.domToHtml(document, true));
});

jQuery 以外の部分が長ったらしいですが、このスクリプトでは大まかに以下の処理を行っています。

コマンドライン引数で指定されたファイルを読み込む
jsdom.jsdom() 関数で DOM document オブジェクトを作成
document.createWindow() メソッドを使用し window オブジェクトを作成
window オブジェクトを引数に jsdom.jQueryify 関数を呼び出し jQuery を有効にする
jQuery で処理

あと、#!/usr/bin/env node を付けてますので実行パーミッションを与えればそのまま実行可能です。

また、fs.readFileSync() の引数に utf8 を指定してますので、UTF-8 以外のドキュメントだとちゃんと動きません。node.js 本体だけですと ascii／utf-8／base64／binary しか扱えませんので I18N 関係をちゃんと処理しようとすると node-iconv ライブラリなどを使って文字コードを変換する必要があります。後でスクレイピングするスクリプトを書くときにちゃんと対応しますが、とりあえず上のスクリプトは UTF-8 ドキュメントしか処理できません。

他に分からない点があれば node.js のマニュアルをご覧ください。

で、スクリプトを exam1.js に保存します。ついでにテスト用の HTML ファイルを作ります。test1.html として保存してください。

<html>
<head>
<title>テスト</title>
</head>
<body>
<div>Hello, World!</div>
</body>
</html>

実行すると以下のような出力が得られます。（読みにくいので改行とインデントを追加しています。）

$ node exam1.js test1.html
doctype html>
<html>
<head>
<title>テストtitle>
head>
<body>
<div>Hello, World!div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">script>
<div>More Hello World!!div>
body>
html>

jsdom.jsdom() と jsdom.jQueryify()

上の例を見ればだいたいお分かり頂けると思いますが node.js で jQuery を使う場合、

jsdom.jsdom() で document オブジェクトを作成
document.createWindow() メソッドで window オブジェクトを作成
window オブジェクトに対して jsdom.jQueryify() を呼び出して jQuery オブジェクトを作成

という手順が必要になります。

jsdom.jsdom() と jsdom.jQueryify() のパラメータは結構ややこいと思いますので先に説明します。

jsdom.jsdom() 関数の使い方

HTML コンテンツを DOM document オブジェクトに変換する関数です。jsdom.jsdom() のプロトタイプは以下のようになります。level 引数と options 引数はオプションです。

jsdom.jsdom(body, [level], [options]);

body 引数には DOM ツリーを作成する元となる HTML コンテンツ（文字列）を渡します。URL やパスを指定してファイルから直接 document オブジェクトを作成する方法はありません。

level 引数には使用したい DOM レベルに合わせた DOM HTML オブジェクトを渡す必要があります。省略するか、false や null などの偽評価される値を渡すと、DOM Level2 HTML 相当のオブジェクトが使用されます。（実際には DOM Level3 HTML 相当の DOM オブジェクトがデフォルト値なのですが、DOM Level3 は実装中のようで機能的には DOM Level2 になっています。）

level 引数に DOM Level1 を渡す場合は以下のようにコーディングします。ただあまり使い道は無いと思いますので、普段は null を渡しとけば良いと思います。

var jsdom = require('jsdom'),
dom_level1 = require('jsdom/level1/core').dom;
var document = jsdom.jsdom('', dom_level1.html);

options 引数は DOM document を作成する際に使用するオプションを指定するオブジェクトです。

オプションとして有効な値とデフォルト値は以下のとおりです。

{
url: undefined,
features: {
FetchExternalResources : ['script'/*, 'img', 'css', 'frame', 'link'*/],
ProcessExternalResources: ['script'/*, 'frame', 'iframe'*/],
QuerySelector : false
}
}

各オプションの意味は以下のようになっています。

url（文字列）
HTML コンテンツの baseURI。
コンテンツに含まれる相対パスの baseURI として使用されます。
省略時は baseURI が存在しないため相対パスはそのまま処理されます。その場合、コンテンツ中の相対パスで指定された外部リソースの取得は失敗します。
features.FetchExternalResources（配列）
外部リソースを取得するタグを列挙します。デフォルトでは script タグで指定されたファイルを取得します。
空文字列または null など偽評価値を渡すと外部リソースをダウンロードしなくなります。
features.ProcessExternalResources（配列）
外部リソースから実行するタグを列挙します。デフォルトでは script タグの JavaScript を実行します。
空文字列または null など偽評価値を渡すと外部リソースを実行しなくなります。
QuerySelector（Boolean）
true の場合、Sizzle CSS Selector Engine を有効にします。デフォルトは false です。
（jQuery を使う場合は、jQuery 本体に CSS Selector が含まれていますので QuerySelector を有効にする必要はありません。）

ちなみに、document オブジェクト自体は不要で window オブジェクトだけが欲しい場合は以下のようにコーディングすることもできます。

var window = jsdom.jsdom('').createWindow();

jsdom.jQueryify() 関数の使い方

jsdom.jQueryify() 関数は document.createWindow() メソッドにより作成した window オブジェクトに対し jQueryify（jQuery 化）を行います。

jsdom.jQueryify() のプロトタイプは以下のとおりです。path 引数と callback 引数はオプションです。第三引数を省略した場合、第二引数が文字列なら path 引数として扱われ、第二引数が関数なら callback 引数として扱われます。

jsdom.jQueryify(window, [[path], callback])

window 引数には jsdom.jsdom().createWindow() を使って作成した window オブジェクトを渡します。

path 引数には jQuery ソースコードの置かれたパスまたは URL を渡します。この引数を省略すると http://code.jquery.com/jquery-latest.js から jQuery のソースコードを読み込もうとします。（不要かもしれませんが）サーバ負荷を考慮して上の例では Google Libraries API の jQuery を指定するようにしています。

path 引数にローカルの jQuery ファイルのパスを指定することもできますが、jsdom.jQueryify() は HTML コンテンツに path 引数の script タグを埋め込むことで jQuery の初期化を行っているため、document オブジェクトのオプションで指定した baseURI の値によっては、ローカルの jQuery ファイルを指定すると jQuery の読み込みに失敗することがあります。（baseURI/path を読み込もうとして失敗する。）

なので、この引数には通常 HTTP 経由でアクセスできる URL を指定してください。（file: プロトコルを指定しても意味がないようですので http: プロトコルでアクセス可能な URL が必要です。）

なお、この path 引数の処理の仕方は、jsdom.jsdom() で document を作成する過程と合わせて問題になることがあります。（この問題については以下の HTML コンテンツ中の script タグの扱いについてで説明します。）

callback 引数には jQuery の初期化に成功した際に呼ばれるコールバック関数を渡します。コールバック関数のプロトタイプは以下のとおりです。window には jsdom.jQueryify() の第一引数に指定された window オブジェクトが、$ には jQuery オブジェクトが渡されます。

callback(window, $);

HTML コンテンツ中の script タグの扱いについて

jsdom.jsdom() 関数は、HTML コンテンツを DOM ツリーに変換する過程で HTML コンテンツに含まれるすべての script タグを実行します。

例えば先ほどの test1.html を以下のように書き換え script タグを追加し、

テスト
<script type="text/javascript">
console.log("security vulnerability");
script>

Hello, World!

再度 exam1.js を実行すると以下のような出力が得られます。

$ node exam1.js test1.html
security vulnerability
security vulnerability
doctype html>
<html>
<head>
<title>テストtitle>
<script type="text/javascript">
console.log("security vulnerability");
script>
head>
<body>
<div>Hello, World!div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">script>
<div>More Hello World!!div>
body>
html>

jsdom.jsdom() が HTML コンテンツ中の JavaScript を実行しちゃってます。（security vulnerability メッセージがなんで二回出力されるのかは重要ではないので調べていません。）

jsdom のソースを見ますと、script タグに含まれる JavaScript は node.js の Script.runInContext() メソッドにより実行されています。

単純に eval せず runInContext() でラップしているため script タグから require 等は使用できません。そのため script タグ中の JavaScript から実行できることは限られていますが、ログを埋め尽くしたり無限ループを作ったりぐらいはできます。また document.write の動作がブラウザ上での動作とちょっと違ったりします（document.write の出力先が常に document 先頭になってるようです）ので、そのままサーバサイドスクリプトに組み込むのはちょっと厳しい感じです。

また script タグに src 属性が指定されている場合、src で指定されたファイルをダウンロードして実行します。そのためネットワークアクセスが必要なコンテンツの場合は処理に時間がかかるという問題もあります。

いずれにしてもこのままではスクレイピング用途には使いにくいので、HTML 中の script タグの処理を無効にする必要があります。ただ jsdom.jQueryify() の jQuery の実行方法に問題があり単純に無効にすることはできません。

以下に jQuery の実行方法のどの辺が問題か説明します。

1. jsdom.jsdom() で script タグの無効にする

まず HTML 中の script タグの処理を無効にすること自体は、jsdom.jsdom() のオプション引数で features.FetchExternalResources と features.ProcessExternalResources を false にすることで実現できます。

具体的には以下のように jsdom.jsdom() を呼び出します。

var document = jsdom.jsdom(content, null, {
features: {
FetchExternalResources: false,
ProcessExternalResources: false
}
});

ここまでは特に問題ありません。

2. jsdom.jQueryify() の jQuery 埋め込み方法

jsdom.jQueryify() では jQuery を実行するのに、HTML コンテンツの末尾に jsdom.jQueryify() の第二引数を src 属性に指定した script 要素を appendChild() メソッドを使って HTML body に追加する方法で行っています。

HTML コンテンツ中の JavaScript は jsdom ライブラリにより実行されますので、appendChild() されるタイミングで埋め込まれた jQuery スクリプトが実行されるという仕組みです。

先ほどのスクリプトの実行結果を見ると src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js” を持つ script タグが埋め込まれていますが、これは上記の仕組みにより jsdom.jQueryify() が追加したものです。

<div>Hello, World!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div>More Hello World!!</div>

この動作自体も特に問題という訳ではありません。

3. 1 と 2 を合わせると動かなくなる

script タグの処理を無効にするには、jsdom.jsdom() を呼び出す際に options.features.FetchExternalResources と options.features.ProcessExternalResources を false にすれば良いです。これらのオプションを指定すると document に含まれる script タグがまったく実行されなくなります。

jsdom.jQueryify() は jQuery を埋め込むのに、DOM ツリーに script タグを埋め込みますが、jsdom.jsdom() で script の実行を無効にするとこの処理も無効になります。

これらを合わせると、jsdom.jsdom() のオプションを指定して script タグの処理を無効にすると、jsdom.jQueryify() も使用できなくなります。問題です。

jsdom.jQueryify() を使用せずに jQuery を実行する

とりあえずscript タグの処理を無効にして jsdom.jsdom() と jsdom.jQueryify() を使用できないということになりましたので、jQueryify と似たような処理を自前で実装することにしました。

以下の embedJQuery() 関数がその辺のややこいところを全部処理します。

// embedJQuery.js
// jsdomとjQueryのラッパー

var fs = require('fs'),
Script = process.binding('evals').Script,
jsdom = require('jsdom'),
httpsubr = require('./httpsubr');

// jQuery を読み込む
var jQueryPath = __dirname + '/jquery.min.js';
var jQueryScript = new Script(fs.readFileSync(jQueryPath, 'utf-8'),
jQueryPath);

// HTMLコンテンツにjQueryを埋め込み、
// windowオブジェクトとjQueryオブジェクトを返す
exports.embedJQuery = function(body, options, callback) {
// HTMLファイル中のscriptタグの処理を無効にしてwindowを作成
options = options || {};
options.features = options.features || {};
options.features.FetchExternalResources = false;
options.features.ProcessExternalResources = false;
var window = jsdom.jsdom(body, null, options).createWindow();

// jQueryを実行
jQueryScript.runInNewContext({
window: window,
navigator: window.navigator,
location: window.location,
setTimeout: setTimeout,
});

// callbackを呼び出す
if (callback) {
callback(null, window, window.jQuery);
}
}

// URLからリソースを読み込みjQueryを追加する
exports.jQueryRequest = function(targetUrl, callback) {
httpsubr.get({ uri: targetUrl }, function(err, response, raw) {
if (!err) {
if (response.statusCode != 200) {
err = new Error("HTTP Error");
}
}
if (err) {
if (callback) {
callback(err);
} else {
throw err;
}
return;
}

var body = httpsubr.convertCharset(response, raw);

// コンテンツのbaseURIをtargetUrlにするためurlオプションを指定
exports.embedJQuery(body, { url: targetUrl }, callback);
});
}

embedJQuery.js ではローカルの jQuery を読み込むようにしています。jQuery 1.4.2 〜 1.4.4 とともに動くようにコーディングしていますので、予め https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js などからファイルをダウンロードして embedJQuery.js と同じディレクトリに置いてください。ファイル名が jquery.min.js 以外のときは、jQueryPath 変数の値を書き換えてください。

先ほどの exam1.js を embedJQuery() 関数を使用するように書き換えると以下のようになります。

#!/usr/bin/env node
// exam2.js

var sys = require('sys'),
fs = require('fs'),
domToHtml = require('jsdom/browser/domtohtml'),
embedJQuery = require('./embedJQuery').embedJQuery;

var jquery_js = 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';

if (process.argv.length <= 2) {
sys.puts('Usage: node exam2.js [FILE]');
process.exit(1);
}

var content = fs.readFileSync(process.argv[2], 'utf8');

// jsdom.jQueryifyがwindowにjQueryを追加してくれる
embedJQuery(content, null, function(err, window, $) {
if (err) {
throw err;
}

$('body').append('

More Hello World!!

');

var document = window.document;
if (document.doctype) {
sys.puts(String(document.doctype));
}
sys.print(domToHtml.domToHtml(document, true));
});

テスト用に無限ループを組み込んだ HTML を用意し、

<html>
<head>
<title>テスト</title>
<script type="text/javascript">
console.log("security vulnerability");
for (;;) ;
</script>
</head>
<body>
<div>Hello, World!</div>
</body>
</html>

exam2.js を実行すると以下のようになります。

$ node exam2.js test2.html
doctype html>
<html>
<head>
<title>テストtitle>
<script type="text/javascript">
console.log("security vulnerability");
for (;;) ;
script>
head>
<body>
<div>Hello, World!div>
<div>More Hello World!!div>body>
html>

同じ HTML コンテンツを exam1.js で処理すると、for (;;) ; の部分で無限ループになり帰ってきませんが、exam2.js では embedJQuery が script タグを処理しないようにしてるので処理は終了します。また jQuery を使って埋め込んだ div タグもちゃんと表示されています。

複数の文字エンコーディングに対応させる

日本語の HTML コンテンツの場合 Shift_JIS / EUC-JP / UTF-8 等の文字エンコーディングを使用しますが、node.js 本体には UTF-8 以外の文字エンコーディングを処理する機能は付いてません。

日本語のコンテンツを処理するためには、node-iconv パッケージ等を使用してダウンロードしたコンテンツを node.js で処理可能な文字コードに変換する必要があります。

node-iconv パッケージは npm からインスコできませんので、github からソースをダウンロードしてビルドする必要があります。

node-iconv の github には、node.js バージョン 0.3 系列向けのブランチとバージョン 0.2 系列向けのブランチが用意されています。

ブランチを指定せず git clone すると 0.3 系列向けのソースがダウンロードされます。

$ git clone git://github.com/bnoordhuis/node-iconv.git

0.2 系列向けのソースが必要な場合は、-b オプションを付けて v0.2.x ブランチをダウンロードしてください。（v0.2.6 等、node.js の個別のバージョン向けのブランチが用意されているわけではありません。v0.2.x ブランチをダウンロードしてください。）

$ git clone -b v0.2.x git://github.com/bnoordhuis/node-iconv.git

ビルドは make のみです。NODE_PATH 引数には node.js をインストールしたプレフィクスを指定してください。デフォルトは /usr/local です。

$ make
$ make install NODE_PATH=/usr/local

node-iconv がインスコできたら、文字コードを考慮した HTTP クライアントモジュールを作ります。

node.js でオクテットを扱う場合は、通常 Buffer オブジェクトを使用します。Buffer オブジェクトを String（文字列）オブジェクトに変換するには、buffer.toString(encoding) メソッドを使用します。

今から作るモジュールは request パッケージを参考にしていまして、request パッケージの関数が HTTP レスポンスを Buffer オブジェクトじゃなくて文字列で返してくるため、node-iconv にそのままレスポンスを渡すと文字化けするようなのでその辺を直した感じのものになっています。

ちなみに node-iconv は、libiconv が文字コード変換に失敗し EILSEQ エラーが発生した場合、常に例外を発生します。一般的な LL 言語の文字コード変換ライブラリでは、文字コード変換に失敗したら適当な代替え文字で差し替える処理が実装されていると思いますが、node-iconv ではそういった処理はできませんので注意してください。ただ今回は node.js と jQuery がメインですので、この辺にはこれ以上触れずに進めます。

ということで書いたコードは↓です。HTTP レスポンスと Buffer オブジェクトから文字コードを検出して文字列に変換する関数と、HTTP リクエストのラッパー関数を実装しています。

HTTP リクエスト関数では、生の Buffer オブジェクトではなく文字コード変換した文字列をコールバック関数に返すようにもできますが、エラー処理が分かりにくくなりそうなので raw buffer を返すことにしてます。

// httpsubr.js
// HTTP関連のサブルーチン

var http = require('http'),
iconv = require('iconv'),
url = require('url');

// Bufferを連結する
function concatBuffer(src1 /* , src2, ... */) {
var i, buf, start;
var len = 0;

for (i = 0; i < arguments.length; ++i) {
len += arguments[i].length;
}

buf = new Buffer(len);
start = 0;
for (i = 0; i < arguments.length; ++i) {
var chunk = arguments[i];
chunk.copy(buf, start, 0);
start += chunk.length;
}

return buf;
}

// HTTPレスポンスとBufferからエンコーディングを検出し
// レスポンスボディを文字列で返す
exports.convertCharset = function(response, buf) {
var charset = null;

var content_type = response.headers['content-type'];
if (content_type) {
re = content_type.match(/\bcharset=([\w\-]+)\b/i);
if (re) {
charset = re[1];
}
}

if (!charset) {
var bin = buf.toString('binary');
re = bin.match(/]*charset=([\w\-]+)/i);
if (re) {
charset = re[1];
} else {
charset = 'utf-8';
}
}

switch (charset) {
case 'ascii':
case 'utf-8':
return buf.toString(charset);
break;

default:
var ic = new (iconv.Iconv)(charset, 'utf-8');
var buf2 = ic.convert(buf);
return buf2.toString('utf8');
break;
}
}

// 文字列ではなくBufferを返す版の
// requestパッケージ (https://github.com/mikeal/node-utils) のrequest関数
// とほぼ同等な関数
// request関数にある一部機能は実装していない
exports.httpRequest = function(options, callback) {
options = options || {};
if (typeof(options.uri) == 'string') {
options.uri = url.parse(options.uri);
}
options.method = options.method || 'GET';
options.headers = options.headers || {};
options._nRedirect = options._nRedirect || 0;
if (typeof(options.maxRedirects) == 'undefined') {
options.maxRedirects = 10;
}

if (!options.headers.host) {
options.headers.host = options.uri.hostname;
if (options.uri.port) {
options.headers.host += ':' + options.uri.port;
}
}

var port = 80;
var https = false;
if (options.uri.protocol == 'https:') {
port = 443;
https = true;
}
if (options.uri.port) {
port = port;
}

var path = (options.uri.pathname ? options.uri.pathname : '/');
if (options.uri.search) {
path += options.uri.search;
}
if (options.uri.hash) {
path += options.uri.hash;
}

var client = http.createClient(port, options.uri.hostname, https);
client.addListener('error', function(err) {
if (callback) {
callback(err);
} else {
throw err;
}
});

var request = client.request(options.method, path, options.headers);
request.addListener('response', function(response) {
if (response.headers.location) {
if (options._nRedirect++ >= options.maxRedirect) {
client.emit('error', new Error('Too many redirects'));
}
var loc = response.headers.location;
if (!loc.match(/^https?:/i)) {
loc = url.resolve(options.uri.href, response.headers.location);
}
options.uri = loc;
exports.httpRequest(options, callback);
} else {
var chunks = [];
response.on('data', function(chunk) {
chunks.push(chunk);
})
.on('end', function() {
if (callback) {
var buf = concatBuffer.apply({}, chunks);
delete(chunks);
callback(null, response, buf);
}
});
}
});

if (options.requestBody) {
if (typeof(options.requestBody) == 'string') {
request.write(options.requestBody);
request.end();
} else {
sys.pump(options.requestBody, request);
}
} else {
request.end();
}
}

exports.get = exports.httpRequest;

exports.post = function(options, callback) {
if (!options.requestBody) {
options.requestBody = '';
}
exports.request(options, callback);
}

マジでスクレイピングする

jQuery を使ってスクレイピングする準備が整いましたので、ネットワークから HTML を読み込んでスクレイピングするスクリプトを作ります。

スクレイピングするモジュール

まずネットワークから HTML を読み込みスクレイピングする部分のモジュールを作ります。a タグを読み込んでサーバ別にリンクを取得する関数と、リンクの配列をホスト別に分類してソートする関数を実装しています。

// linkPicker.js
// HTMLコンテンツからリンク（aタグ）を取り出す

var url = require('url'),
embedJQuery = require('./embedJQuery');

// jQueryでaタグを取り出しcallbackを起動
exports.pickupLinks = function(targetUrl, callback) {
embedJQuery.jQueryRequest(targetUrl, function(err, window, $) {
if (err) {
if (callback) {
callback(err);
} else {
throw err;
}
return;
}

var links = [];
$('a').each(function() {
links.push(url.parse(String(this.href)));
});

links.sort(function(a, b) {
if (a.href < b.href)
return -1;
else if (a.href > b.href)
return 1;
else
return 0;
});

if (callback) {
callback(null, links);
}
});
}

// リンクをホストごとに分類してソート
exports.sortLinksByHost = function(links) {
var i, j;
var host = null;
var hosts = [];
var hostLinks = {};
for (i = 0; i < links.length; ++i) {
var link = links[i];
var fqHost = link.protocol;
if (link.slashes)
fqHost += '//';
fqHost += link.host;
if (host != fqHost) {
host = fqHost;
hosts.push(fqHost);
hostLinks[fqHost] = [];
}
hostLinks[fqHost].push(link);
}
return { hosts:hosts, hostLinks:hostLinks };
}

コマンドラインからスクレイピング

コマンドラインから起動され、上の linkPicker.js を使ってスクレイピングするスクリプトはこんな感じになります。

#!/usr/bin/env node
// client.js

var sys = require('sys'),
linkPicker = require('./linkPicker');

process.argv.forEach(function(val, index, array) {
if (index >= 2) {
linkPicker.pickupLinks(val, function(err, links) {
if (err) {
throw err;
}

sys.puts(val + ' contains ' + links.length + ' links');
var sorted = linkPicker.sortLinksByHost(links);
for (i = 0; i < sorted.hosts.length; ++i) {
var host = sorted.hosts[i];
sys.puts('¥t' + host + ', ' +
sorted.hostLinks[host].length + ' links');
for (var j = 0; j < sorted.hostLinks[host].length; ++j) {
sys.puts('¥t¥t' + sorted.hostLinks[host][j].href);
}
}
});
}
});

スクリプトに実行パーミッションをセットし、必要なファイル（embedJQuery.js、jquery.min.js、linkPicker.js）をこのスクリプトと同じディレクトリに置いてから、スクレイピングしたい URL を引数に実行すると、こんな感じに a タグのリンクを表示します。

$ ./client.js http://www.google.co.jp/
http://www.google.co.jp/ contains 28 links
http://blogsearch.google.co.jp, 1 links
http://blogsearch.google.co.jp/?hl=ja&tab=wb
http://books.google.co.jp, 1 links
http://books.google.co.jp/bkshp?hl=ja&tab=wp
http://docs.google.com, 1 links
http://docs.google.com/?hl=ja&tab=wo
http://groups.google.co.jp, 1 links
http://groups.google.co.jp/grphp?hl=ja&tab=wg
http://mail.google.com, 1 links
http://mail.google.com/mail/?hl=ja&tab=wm
... 以下省略

ウェブアプリでスクレイピング

上のコマンドラインスクリプトと同じ処理を行うウェブサーバスクリプトも書いてみます。

// server.js

var hostname = 'localhost';
var port = 8124;

var express = require('express'),
ejs = require('ejs'),
linkPicker = require('./linkPicker');

var app = express.createServer();
app.register('.ejs', ejs);

app.get('/', function(req, res) {
if (req.query && req.query.url) {
linkPicker.pickupLinks(req.query.url, function(err, links) {
if (err) {
console.log(err);
res.send('403 Forbidden', 403);
return;
}

res.render('result.ejs', {
locals: {
url: req.query.url,
links: links,
sorted: linkPicker.sortLinksByHost(links),
}
});
});
} else {
res.render('index.ejs', {
locals: {
url: '',
},
});
}
});

app.listen(port, hostname);

スクリプトでは express フレームワークと ejs テンプレートエンジンを使用しています。手元に無い場合は npm でインスコしてください。

$ npm install express ejs

テンプレートエンジン用に、以下の3つのファイルを views サブディレクトリに作ります。

views/layout.ejs

<html>
<head>
<meta charset="UTF-8">
<title>node.js example - link picker</title>
</head>
<body>
<h1>node.js example - link picker</h1>
<form method="GET">
Enter URL:
<input type="text" name="url" size="40" value="<%= url %>">
<input type="submit" value="Submit">
</form>
<%- body %>
</body>
</html>
views/index.ejs
<% /* empty */ %>
views/result.ejs
<p><a href="/">Back to the top page</a></p>

<p><%= url %> contains <%= links.length %> links</p>

<ul>
<% for (var i = 0; i < sorted.hosts.length; ++i) { %>
<% var host = sorted.hosts[i]; %>
<li><%= host %> - <%= sorted.hostLinks[host].length %> links</td>
<ul>
<% for (var j = 0; j < sorted.hostLinks[host].length; ++j) { %>
<li><%= sorted.hostLinks[host][j].href %></li>
<% } %>
</ul>
</li>
<% } %>
</ul>

できたらサーバスクリプトを起動します。

$ node server.js

http://localhost:8124/ にブラウザからアクセスするとフォームが表示されます。

フォームに URL を入力して submit するとスクレイピングします。

もうちょい改造してデッドリンク検出とかできるようにしようかと思いましたが面倒なので却下ということで。

んでわ。

さくらたんどっとびーず » jsdom