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の完成形はこちらです。

関連記事

Twitter、翻訳途中のメールを送信

twitterblog

2012年5月31日の昼前に、Twitterから翻訳途中のメールが送信されてしまう事件が発生しました。

Twitter社は、フィッシングメールとも取れる内容のメールを送信してしまったことをTwitterブログで謝罪し、「今後、この内容のメールを送信することはありません。」と、陳謝の意を表明しました。

修正前のメール (一部抜粋)
Twitterと利用規約を更新する - zakker6page@gmail.com - Gmail

修正後のメール (一部抜粋)
twitter_mail

Yahoo!Pipesの「Fetch Page」が非推奨に

Pipes  editing pipePipes  editing pipe02
Yahoo!Pipesの「Fetch page」が非推奨になり、6月末から使用不可になります。
代わりに「XPath Fetch Page」というモジュールが追加されます。このモジュールを使いこなすには、XPathの知識が必要になります。

XPathとは?

Wikipediaによると、

XML Path Language (XPath; XMLパス言語) は、マークアップ言語 XML に準拠した文書の特定の部分を指定する言語構文である。

つまり、XPathを用いることで、HTMLやXMLドキュメントのあらゆる場所や位置関係を簡単な構文で指定することができます。XPathは、JavaやJavaScriptでもよく使われています。
XPathを理解するには、HTMLやXMLの階層構造を頭に入れておく必要があります。たとえば、以下のようなHTMLドキュメントがあるとします。
<div class=”foo”><p>これを取得したい</p></div>
この場合は、親がdiv要素かつクラス名がfooであるp要素を取得したいので、
//div[@class=”foo”]/p と表記します。

XPath Fetch pageの関連リンク

英語のマニュアルしかまだないようなので、次回は「XPath fetch pageの使い方」に関する記事を書く予定です。

ネットの反応

2ちゃんねる

790 :名無しさん@お腹いっぱい。:2012/04/24(火) 14:46:31.79
fetch pageなくなってね?
791 :名無しさん@お腹いっぱい。:2012/04/24(火) 15:30:18.60
それはDeprecatedに入って、新しくXPath Fetch Pageができてる
792 :名無しさん@お腹いっぱい。:2012/04/24(火) 15:46:06.96
何が変わったん?
793 :名無しさん@お腹いっぱい。:2012/04/24(火) 16:14:58.33
xpathわかってればこっちのほうがずっと使いやすいと思う
Emit items as string使うとFetch Pageぽくなる
HTMLの構造がはっきりしてるならas string使わずに抜き出す方が便利かもしれないけど
たとえば<p>1<span>2</span>3</p>みたいな構造のときに1が消えるのは注意だな
795 :名無しさん@お腹いっぱい。:2012/04/25(水) 07:47:30.97
Fetch Pageは6月末で使えなくなるんだって
それまでにXPATH Fetch Pageに書き換えろと
メインでたくさん使ってると大変だな
796 :名無しさん@お腹いっぱい。:2012/04/25(水) 09:02:08.55
>>795
工エエェェ(´д`)ェェエエ工
マジかそれ
なんか泣きそうだ
800 :名無しさん@お腹いっぱい。:2012/04/26(木) 15:42:43.65
というかxpath自体が何なのかよく理解できない。
802 :名無しさん@お腹いっぱい。:2012/04/28(土) 05:13:49.95
yql使うためにxpathは覚えたいと思っていたから、ちょうどいい機会だと思うことにした
804 :名無しさん@お腹いっぱい。:2012/04/29(日) 05:14:27.94
大体修正終わった。
ただfetch pageだとリダイレクトされてるページも取り込めたけど、
xpathだと追えないみたいで困ってる。
805 :名無しさん@お腹いっぱい。:2012/04/29(日) 08:45:32.49
xPathに限らず、リダイレクトに遭遇したときはマジで困る
809 :名無しさん@お腹いっぱい。:2012/05/07(月) 00:34:38.03
いかん全然理解できない

多分一度わかれば今までよりずっと簡単なんだろうけど

818 :名無しさん@お腹いっぱい。:2012/05/18(金) 14:30:23.88
いかんエックスパスわからん(‘A`)
820 :名無しさん@お腹いっぱい。:2012/05/21(月) 14:02:33.67
dapperが不調なのでRSSクリエイターに移行したら、こちらも先週から不調。
XPath勉強しないとダメなのか…。
832 :名無しさん@お腹いっぱい。:2012/05/27(日) 09:58:05.78
//a/@href で href属性のURLが取得できなかったり、

//hoge/*[3] で hoge下の 3番目の子要素が取れないとか。

XPathの機能が完全に実装されてない感じ。

それとスレタイ検索で探したけど XPath専用スレが無いのは意外。

838 :名無しさん@お腹いっぱい。:2012/05/29(火) 22:29:53.70
わかってくるとこれ便利だな
楽しいし

関連記事

FeedBurnerのSocialize機能が復活!

2012-05-27_1719

2012年2月頃から使用不能になっていたFeedBurnerのSocialize機能が、いつのまにか復活していました。

そこで今回は、Socializeの使い方について解説します。

FeedBurnerとは?

FeedBurnerは複数のRSSやAtomフィードをひとつにまとめたり、RSSの購読者数を計測をしたりできます。他にもフィードの形式変換やAdSense広告を挿入したりと、多くの機能を備えています。

Socialize機能とは?

Socializeは、RSSを利用してブログなどの更新情報をTwittterに自動投稿できる機能です。ブログサービスでは、RSSが自動で生成される仕組みができているので、すぐに導入できます。

Socializeの使い方

1.FeedBurnerにログインする

FeedBurnerのマイフィードにアクセスし、Socilizeを設定したいフィードを選びます。(FeedBurnerに登録していることが前提です)

英語表記になっている場合は、右上のバーにある「Languages」をクリックし、日本語を選べば日本語表記に変更できます。

2.Socialize設定画面へ

上部にあるタブから「集客支援」をクリックし、左サイドバーから「Socialize」をクリックします。

集客支援 --フィードで集客しよう

3.Socializeの設定

集客支援 --Socialize02

まずは、「Add a Twitter account」からTwitterアカウントを登録します。

「Post content」では、ツイート内容を記事のタイトルのみにするか、タイトルと本文両方にするか、本文のみにするかを設定します。

「Hash tags」は、「#」ではじまるハッシュタグをつけるかどうかを設定します。

「Additional text」は、ツイートの先頭または語尾に定型文を挿入する場合に設定します。今回は、ツイートの先頭に【ブログ更新】と追記されるように設定しました。

「Item Selection」の項目は、デフォルトのままで特に問題ありません。最後に「Sample Item Preview」で、どんな内容でツイートされるかを事前に確認しておきましょう。

設定が完了したら最後に「保存」をクリックして確定してください。

記事のURLは、「goo.gl」の短縮URLに自動で置き換わります。

st