Yahoo!Pipesの「XPath Fetch Page」でXpathを指定する際に、要素に複数のclassが指定されている場合とidやclass属性が指定されていない場合の対処法について解説します。
初めて「XPath Fetch Page」を使う方は、Yahoo!Pipesの新モジュール「XPath Fetch Page」の基本的な使い方を参照してください。
複数のクラス属性が指定されている場合
たとえば、以下のようなHTML文書があるとします。
<div class=”foo bar”></div>
このdiv要素をXpathで取得したい場合、あなたならどうしますか?
- クラス名を1つだけ選んで指定する
//div[@class=”foo”] or //div[@class=”bar”] - まとめて指定する
//div[@class=”foo bar”]
上記のような指定の仕方を考えるかもしれません。残念ながらPipesでは、どちらもエラーが出てうまく取得できません。
このように複数のクラスが指定さている場合は、Xpathにあらかじめ用意されている関数を使います。contains()という関数です。
contanins(‘str1’,’str2’) : str1にstr2が含まれていれば true を返し、そうでなければ false 返します
つまり、先ほどの例では
//div[contains(@class,”foo”)] or //div[contains(@class,”bar”)]
と指定すればOKです。
実際にやってみましょう。MOVIE Collectionという映画サイトにあるNews一覧ページのRSSフィードを作成してみたいと思います。
取得範囲を決める
「Firebug」やChrome「Webデベロッパーツール」の「要素の検証」を使います。
<div class="kiji clear">
という要素を指定すればうまくいきそうです。今回は画像や日付は不要なので、このdiv要素の直下であるa要素のみを指定したいと思います。
Xpathは、クラス属性に kiji という文字列含まれている要素の子供のa要素を指定すればいいので
//div[contains(@class,”kiji”)]/a
と指定します。
Yahoo!Pipesでモジュールを組み立てる
「XPath Fetch Page」モジュールには以下のように指定します。
URL : http://www.moviecollection.jp/news/
Extract using Xpath : //div[contains(@class,"kiji")]/a
Use HTML5 parser にチェック
Renameモジュールについては割愛します。
今回の完成形はこちらです。
idやclass属性が指定されていない場合
取得したい要素の範囲内にid属性やclass属性が指定さていない場合は、「番号」を使うとうまくいくケースがあります。
実際のページで考えてみましょう。東スポWebの人気ランキング一覧にアクセスしてください
取得範囲を決める
このページには6つのランキングが用意されています。
Firebugなどで調べると、それぞれがol要素でマークアップされていることがわかります。PipesでRSSフィードを作成する場合は、ol要素の子孫にあたるa要素を指定すればうまくいきそうです。
ですが、6つのランキングのうち「エンタメ人気ランキング」のみを取得したい場合はどうすればいいでしょうか?
//ol/li/a
と指定した場合は、6つのランキングすべてが取得されてしまいます。「総合人気ランキング」や「スポーツ人気ランキング」も余計に含まれてしまうわけです。
このようなときに便利なのが「番号」です。以下のように書き換えます。
//ol[4]/li/a
と指定すると、4番目に登場したol要素の子孫のa要素のみに限定して取得することができます。
Yahoo!Pipesでモジュールを組み立てる
「XPath Fetch Page」モジュールには以下のように指定します。
URL : http://www.tokyo-sports.co.jp/rankinglist/
Extract using Xpath : //ol[4]/li/a
Use HTML5 parser にチェック
Renameモジュールについては割愛します。
今回の完成形はこちらです。