前回jsoupを使い、個別要素を取得するメソッドを幾つか紹介した。また、HTMLの構造が複雑な場合など、前回紹介したメソッドでは不便なケースも多い事にも触れた。しかし、cssセレクターが分かれば、いや極論すれば分からなくても簡単に要素を取得する事ができる。

カテゴリー別RSSの取得

https://headlines.yahoo.co.jp/rss/listにおいて、画面右側にある

  • 国内
  • 国際
  • 経済
  • エンタメ
  • スポーツ
  • IT・科学
  • ライフ
  • 地域

の8カテゴリーの総合的なRSSのURLを取得する場合を考える。HTMLソースのうち、どの部分がRSSと書かれたボタンに対応するかを探すには、Google Chromeでボタンを右クリックし、「検証」を選べばデベロッパーツールが表示される。

「国内」の総合RSSで、この操作を行うと、画面が分割表示され、片方にはHTMLが表示され、該当部分がハイライト表示されるはずだ。この場合、<img>タグがハイライト表示されているが、もう少し外側の構造を見れば、前回も示した以下の構造が見つかるはずだ。他のカテゴリーも同じ構造になっているので、cssセレクターを使えば、簡単に8つのURLを取得できそうだ。

class名が2つ含まれるので、以下のように取得するのが簡潔な表現だろう。タグ名はそのまま書き、classは”.”に続けて書く。ここには無いが、idなら”#”に続けて書く。なお、セレクターの”>”は無くても問題無いが、あった方が見やすい。

タグ名と合わせて以下のように書いても良い。

cssに慣れていない人は”.”や”#”が覚えられないという人もいるだろう。その場合は、以下のようにタグ名に続けて括弧を付加して書いても良い。idの場合は[id=***]と書けば良いので、cssセレクターを覚えていなくても使える。この時、タグ名と[]の間にスペースをつけてはならない。子ノードと認識されてしまうからだ。

htmlの木構造が分からない人も心配無い。Google Chromeでソースを表示している状態で、<a>タグをクリックしてハイライト表示している状態で、

右クリック > Copy > Copy selector

を押すと、以下の文字列が取得される。これは「国内」の総合RSSだけを指しているので、一つのURLしか取れない。div:nth-child(n)は、divのn番目の子要素を意味しており、複数のRSS URLを取得する際には不要である。

そこで、nth-child(1)の部分を除去し、以下のようにすれば、同じようにfor文で回して各<a>タグ要素を取得できる。

メディア別RSSの取得

前節では、カテゴリー別にRSSのURLを取得したが、数多くある個別RSSのURLも取得してみよう。試しに、「国際」カテゴリーの「AP通信」のHTML構造を見てみると、以下のようになっている。どの個別RSSもymuiArrowクラスに属しており、<dd>タグで囲まれているのが特徴的だ。

Chromeデベロッパーツールでセレクターを取得すると以下のようになる。

全個別RSSを取得するので、nth-childを無視すると、以下のようにすればRSSのURLを取得できる。

div:nth-child(4)は「国際」カテゴリーなので、cssセレクターに以下を指定すれば、「国際」カテゴリーのURLを全て取得できる。

次回はRSSフィード(xml)を解析する方法を紹介する予定だ。