2012年6月3日日曜日

Yahoo!Pipesの新モジュール「XPath Fetch Page」の基本的な使い方

スポンサードリンク

2012年6月末から使用不可になる「Fetch Page」モジュールに代わり、新しく「XPath Fetch Page」モジュールが導入されました。XPathに対応したことで、従来の「Fetch Page」よりも簡潔かつ正確に、HTML文書を取得することが可能になりました。

それでは、「XPath Fetch Page」の基本的な使い方ついて解説します。

Pipes- Rewire the web02

今回はエンタメ | 東スポWebの新着ニュースのRSSフィードを作成したいと思います。完成形は以下のようになります。

作成するPipesの完成形
tousupo_pipes

完成までの流れ

  1. HTML文書の中から必要な範囲を探す
  2. PipesでオリジナルのRSSを作成する
  3. 作成したRSSをRSSリーダーに登録

1.HTML文書の中から取得する範囲を決める

HTMLソースを表示して、取得する範囲を決めるのもいいですが、それよりもブラウザ機能やアドオンを使う方がスムーズに作業が行えます。

Firefoxならアドオンの「Firebug」をインストールして使います。Chromeならデフォルトで「Webデベロッパーツール」が用意されていますので、これを使います。どちらもブラウザ上でキーボードの「Ctrl+Shift+C」を押すと起動できます。

では、エンタメ | 東スポWebにアクセスし、「Ctrl+Shift+C」を押してください。

ここではFirebugを例に解説します。下の画像で赤枠で囲まれているのが、今回取得したい部分です。

2012-06-03_1439

Firebugの「要素の検証」機能を使うと、赤枠の部分に対応するのが「div#cate_reportlist」であることがわかります。

これで取得する範囲を絞ることができました。次は、項目ごとに1つ1つ分解していきます。

2012-06-03_1454

同様にFirebugの「要素の検証」で確認すると「先ほどのdiv要素の子供であるh2要素の子供のa要素」を指定するとうまくいきそうです。

まとめるとa要素までは、以下のような階層構造になっています。
<div id="cate_reportlist"> / <h2> / <a>

ここまでわかればあとは簡単です。

2.PipesでオリジナルのRSSを作成する

Yahoo!Pipesにアクセスし、「Create a Pipe」をクリックします(Pipesを使うのが初めての方は、アカウント登録が必要です)。

Pipes- Rewire the web

左サイドバーから「XPath Fetch Page」をドラッグします。

Pipes- editing pipe

「URL」には先ほどの東スポWebのURL(http://www.tokyo-sports.co.jp/category/entame/)を入力します。

次に、「Extract using XPath」にXPathを入力します。XPathは以下のような形式で指定します。

//要素名[@属性名="属性値"]/要素名/...

今回の東スポWebの例だと

//div[@id="cate_reportlist"]/h2/a

となります。これを「Extract using XPath」に入力します。XPathについてもっと詳しく知りたい方は、「XPath Tutorial」や「XML XPath」を参照してください。

「Use HTML5 parser」には常にチェックを入れておいてください。「Emit items as string」にはチェック入れずにしておいてください。

左サイドバーからOperatorsをクリックし、「Rename」をドラッグしてください。続けて、2つのモジュールをドラッグしてつなぎます。

Pipes- editing pipe02

次に、Renameモジュール内のMappingsの左横にある「+」をクリックして、カラムを1つ追加します。続けて、Renameと書いてある青いバーをクリックします。すると、モジュール全体がオレンジ色に変わります。

Pipes- editing pipe03

この状態で画面下を見ると、「0,1,2,…」のような番号が振られているのが確認できると思います。0をクリックして展開してみます。

Pipes- editing pipe04

hrefとcontentという項目があることがわかります。この場合ではhrefをlinkに、contentをtitleに割り当てたいので以下のように入力します。

item.href [Rename] link
item.content [Rename] title

このようにitemのあとに「.」でつないでいきます。今回のケースでは1階層しかありませんが、さらに階層が深くなった場合でも、item.div.p.a.hrefのように「.」でつないでいくだけでOKです。

linkはフィードのリンク、titleはフィードのタイトルになります。他にもdescription(フィードの説明文、ブログだったら記事の抜粋文)、pubDate(フィードの公開日)などがあります。

入力が終わったら「Rename」と「Pipes Output」をつないで、画面下の「Refresh」をクリックして、うまく出力できているかどうかを確認してください。

Pipes- editing pipe05

続いて、左上の「Untitled*」をクリックし、適当な名前を入力します。今回は、「東スポWeb - エンタメ」としました。

Pipes- editing pipe06

次に、右上の「Save」をクリックして、設定を保存し、「Run pipe…」をクリックして、実行します。

Pipes- editing07

3.作成したRSSをRSSリーダーに登録

Pipes- 東ス・Web - エンタメ

ここでは、作ったPipesを一般に公開したり、RSSやJSON形式で取得したりできます。

「My Yahoo!」と「Googleリーター」には登録用のリンクがあらかじめ用意されているので、そこから簡単に登録できます。その他のRSSリーターで登録したい場合は、「Get as RSS」を右クリックし、URLをコピーして、そのURLをRSSリーダーに登録すればOKです。

今回作成したPipesの完成形はこちらです。

関連記事