Firebugクックブック #1

最近の中学生のはじめてのプログラミング言語がJavaScriptだったりするこの時代、最も使いやすいJavaScriptの実行環境であるFirebugは現代のコマンドラインです。UNIXコマンドラインでgrepやuniqを使って、日常の細々した処理を行うのと同じようにFirebugとjavascriptを使いこなせると、日常作業のちょっとしたことをさくっとこなすことができます。ちょっとした作業だから手作業でやってもいいけど自動でやればミスったりしないし、気分的には楽なので自動でやりたい、という作業がけっこうないでしょうか。例えば、ページの中の特定の部分の文字列をリストにしてテキストファイルに保存したい、とか。

そこで今回は私が普段よくやっている単純作業をFirebug+javascriptでさくっとかたづける方法を2回にわけてご紹介します。

ページの中からテキストや属性の値を拾う

ページの中から特定の部分の文字列を抜き出して、特定の条件に当てはまるものだけをリストアップしてファイルに保存したい、ということがないでしょうか。perl+Web::Scraperでやることもできますが、ページにcookieなどで認証がかかっている場合ログイン処理を書くのがちょっと面倒です。書いたスクリプトを何回も使うならスクリプトを書く甲斐もありますが、単に今ちょこっとページからデータを取り出したいだけで二度と使わないようなときや、ページがjavascriptで動的に生成されていてHTMLファイルを持ってきただけでは手も足も出ない、というような時にはFirebugの出番です！ブラウザはHTMLをレンダリングするためにあるようなものですしHTMLもブラウザで表示するために書かれているようなものです。ブラウザの上であれば、タグの構造や要素がページ上のどこにあるのかを目で見て確認しながら作業ができるのでブラウザできることならブラウザでやるとストレスなくすすめられます。 例として、このブログの左側にあるタグクラウドのタグ名の横についている数字を取り出して、全部足す、というのをやってみましょう。 HTMLをみるとこうなっています。liの下のaのsupの中に数字が入っているのでsupを全部取り出して足し算すれば数がわかります。

var total = 0;
var a = $x("//li/a/sup");
for ( var i = 0; i < a.length; i++ )
    total += parseInt( a[i].textContent );
total // 210

XPathで対象のsup要素を全部取り出して、その中の数字を足しています。textContentプロパティには要素の子孫にあるテキスト全部が入っています。そのまま+演算子で足していくとタグの数が文字列として連結されていってしまうのでparseInt()を使って数値として足し算されるようにしています。 WebKitでサポートされているJavaScript1.6のべんりなArrayメソッドで紹介したArrayの拡張メソッドを使って

var total = 0;
$x("//li/a/sup").map ( function (a) {
 return total += parseInt( a.textContent );
} ).pop(); // 210

と書くことも可能です(Firebug consoleではjavascript1.6までしか使えないようなのでreduceは使えません)。

CSSセレクタを使う

上の例ではXPathを使って要素を選択しましたが、XPathはクラス名を指定して何か取り出したい時には div[@class="pager"] というふうに書かないといけません。それに比べてCSSセレクタなら同じことを div.pager とかけるのですごく楽です。 こんどははてなブックマーク - いまさら人に聞けない Firebug tipsにつけられたタグを全部リストアップしてみましょう。つけられている数が少ないタグは"タグ"のところにはでてこないので、各ブックマークにつけられたタグを全部とりだします。 こういうHTMLなので、こんどはCSSセレクタを使って取り出します。

var stash = {};
$$("a.user-tag").map ( function (a) {
    stash[a.textContent] = stash[a.textContent] ? 
            stash[a.textContent] +1 : 1;
} );
stash

これで、タグ名をキー、タグの総数が値になったハッシュを取り出すことができます。

作った文字列をクリップボードにコピーする

値を取り出せても所詮はjavascriptでそれをファイルに保存することができません。これは致命的です。が、Firebugコンソールにはcopy()という、渡された文字列をOSのクリップボードにコピーする関数があります。 さっき作ったタグ名とタグの数ハッシュを、タブ区切りのファイルにして保存したい、というのを想定してみましょう。

copy(
  keys(stash).map ( function (k) {
    return [k, stash[k]].join("\t")
  } ).join("\n")
);

Firebugにはkeys()というperlのkeyに相当する関数があり、ハッシュからキーだけを配列にして返してくれます。これを使って全部のキーと値を取り出して、join()で改行をはさんで連結してクリップボードに保存しています。 クリップボードにデータが入ったら適当なエディタに張り付けて保存すればタブ区切りのファイルのできあがりです(タブがみにくくてすみません)。 スクリプトからは扱いにくいHTMLからはFirebug+javascripを使えば、自分でログインするためのコードを書いたりする必要もなくこうやってデータを取り出すことができます。TSVなどの扱いやすいデータになればあとはエクセルに入れてグラフを作ることも、ほかのスクリプト言語で読み込むことも簡単にできます。

つづく

今回はウェブ上にあるデータを、Firebug consoleを使って効率よく編集する方法をご紹介しました。 Firebugを使えば、HTMLに使われるすべてのタグのリストをjavascriptの配列として持っておきたい、というときにもIndex of the HTML 4 Elementsを開いて

$$('table a').map ( function (a) { return a.textContent })

と入力するだけで、簡単に取り出すことができます。

ウェブとコンピュータとを繋ぐブラウザは現代のコマンドラインです。ちょっとでもコマンドラインを使えると飛躍的に細かい作業がはかどるのと同じように、Firebugで細かい作業ができるようになると、ウェブの情報を簡単に利用することができるようになります。

次回はもう一歩進めてFirebugからHTTPリクエストを送ったりします。それではまた。