はてぶを新聞風に閲覧できるHatebuPaperを作ってみた

はてなブックマークを新聞風に表示し、閲覧できるHatebuPaperなるものを作ってみました。今日の午前1時に作り出して、7時に公開したので賞味6時間で完成です。

以前からはてなブックマークをより視覚的に見たいなーと思っていました。最近では本体の方でもエントリーによってはそのページに含まれる画像のサムネイルを表示してくれたりします。が、ちょっとそれだけじゃあ物足りないなーということで、まずは記事から特徴的なそこへ張られているイメージのURLを取って来れないかというのが始まりでした。

で、一度 tokuhirom ware の HTML::LDRFullFeed と(それが失敗した場合に) HTML::TokeParser で、本文抽出を行い、その中で一番先頭に来る img タグを記事の特徴画像と見なすという簡単なロジックを考えやってみたところ、まーそこそこ。で、なんとなくかっこよーく表示させたいなぁと思っていたら、 jQueryのpluginで、 jQuery Masonry というもの発見。すげーはしょって、説明するとCSSのFloatレイアウトを「詰めて」かっこよくしてくれる便利なものです。ということでそれらをミックスする形でHatebuPaperができましたとさ。

結構サクサクと動いて気に入ってます。以下に、ウェブページから特徴的な img タグの src 属性を出力する簡単なサンプルを貼付けておきます。ということで Enjoy!

 use strict;
use warnings;
use HTML::ExtractContent;
use HTML::TokeParser;
use HTML::LDRFullFeed;
use LWP::UserAgent;

my $url         = shift || 'http://yusukebe.com/';
my $ldrfullfeed = HTML::LDRFullFeed->new();
my $ua          = LWP::UserAgent->new;
my $res         = $ua->get($url);
my $src         = $ldrfullfeed->make_full( $url, $res->content );
unless ($src) {
    my $extractor = HTML::ExtractContent->new;
    $extractor->extract( $res->decoded_content );
    $src = $extractor->as_html;
}
my $p = HTML::TokeParser->new( \$src );
while ( my $token = $p->get_tag("img") ) {
    print $token->[1]{src} . "\n";
}