スクレイピングで記事ランキングのグラフ化：まとめサイト2.0（2/5 ページ）

[大澤文孝，ITmedia]

データ構造を確認する

　スクレイピングするにあたり、まずやらなければならないのは、抜き出す対象となるHTMLソースの構造を調査することだ。

　過去のランキングページのHTMLソースを参照すると、「過去ランキングが記載されているブロック」は、図2のように構成されていることが分かる（2007年12月時点）。この構造からは、次の条件で抜き出せば、それぞれの週の1位から10位を得ることができる。

図2■過去ランキングのブロック構造

1）過去ランキングブロック

　過去ランキングのブロックは、全体が次のようになっている。

<div id="postranking">
…過去ランキングのデータ…
</div>

　id属性に「postranking」という値をもつdiv要素の中に文字列がある。言い換えると、<div id="postranking">の中だけをスクレイピング対象とすればよく、ほかの部分は無視して構わないということだ。

2）それぞれの期間を特定

　それぞれの過去ランキングの期間は次のようになっている。

<div class="rankingdata">12/3〜12/9</div>

　class属性に「rankingdata」という値をもつdiv要素内のテキストとして構成されている。言い換えると、上記の 1）と総合して次のような条件でスクレイピングすればよいということになる。

• <div id="postranging>の配下にある
• <div class="rankingdata">内のテキスト

　この条件ですべて抜き出すと、「期間」を配列として取得できるのだ。

3）それぞれのランキングを特定

　それぞれのランキングは次のようになっている。

<div class="ranking">
  <span class="rank1"><a href="…">記事タイトル</a></span>
  <span class="rank2"><a href="…">記事タイトル</a></span>
〜中略〜
  <span class="rank10"><a href="…">記事タイトル</a></span>
</div>

　div class="ranking"の配下に、span要素として構成されている。つまり、1）と総合して、次のような条件でスクレイピングすればよいことになる。

• <div id="postranging>の配下で
• <div class="ranking">の配下で
• <span>の配下にある

　<a href="">のhrefに書かれているのが「記事へのリンク」

　<a href="">に囲まれたテキストが「記事タイトル」