ラベル Pipes の投稿を表示しています。 すべての投稿を表示
ラベル Pipes の投稿を表示しています。 すべての投稿を表示

2012年7月6日金曜日

Yahoo Pipes でXPath で指定した要素の直下にあるテキストを取得するためのパイプ - ノードテスト text() の代わりに content 属性を用いる

1. XPath のノードテスト text() でテキストを抽出する

XPath で HTML のタグで囲まれたテキストを取得するには、ノードテスト text() を利用する。

XML Path Language – Wikipedia によると、

text()
全てのテキスト (文字列) ノードを指定する。例: <k>こんにちは</k> の中の 'こんにちは'

例えば、Yahoo!Pipesのテスト のページにおいて、

<div name="hogepiyofuga">
<p>ほげ</p>
<p><b>ぴ</b>よ</p>
<p>ふが</p>
</div>

以下の XPath を指定すると、

//div[@name="hogepiyofuga"]/p/text()

タグで囲まれたテキストが抽出できる。

SnapCrab_NoName_2012-7-6_0-51-32_No-00

 

2. Yahoo! Pipes でテキストを取得するには content 属性を利用する

Yahoo! Pipes には、XPath を指定できる XPath Fetch Page モジュールがある。

しかし、XPath Fetch Page モジュールの Extract using XPath フィールドに、ノードテスト text() を指定すると、

//div[@name="hogepiyofuga"]/p/text()

結果が出力されない。どうやら、単一の値を返せないようだ

ノードテスト text() を指定しない場合、

//div[@name="hogepiyofuga"]/p

パイプの content 属性に、ノードテスト text() で抽出したときと同じテキストが設定される。

SnapCrab_NoName_2012-7-6_1-20-46_No-00

ここでは、XPath Fetch Page モジュールにおいて、Use HTML5 parser にチェックを入れた。なぜなら、このパーサを使うことが推奨されているため。

New Module: XPATH Fetch Page | Yahoo! Pipes Blog によると、

Currently this module will extract the page and fix malformed tags using Tidy. You have the option to run the parser using support for HTML4 (by default) or checking the “Use HTML5 parser” checkbox to use the HTML5 parser. We recommend using the HTML5 parser when using this module for most cases.

 

sub-element モジュール

上記より、content 属性だけを抽出したい場合、

  • Operator > Sub-element モジュール

を使い、item.content を指定する。

SnapCrab_NoName_2012-7-6_1-38-56_No-00

これにより、XPath で指定した要素の直下にあるテキストを抽出できる。

以上より、XPath で指定した要素の直下にあるテキストを取得するためのパイプを作成しておく。

 

3. XPath で全てのテキストを抽出する

ところで、XPath では、指定した要素の子孫に当たるテキストを選択することはできる。

//div[@name="hogepiyofuga"]/p//text()

先ほどと違い、「ぴよ」の「ぴ」も抽出された。

SnapCrab_NoName_2012-7-6_1-48-40_No-00

Yahoo! Pipes で、同じ動作をするパイプを作ることは難しいようだ。

2012年6月30日土曜日

Yahoo! Pipes の XPath Fetch Page でフィードを出力してないサイトからRSS を配信する (2)

Yahoo! Pipes の XPath Fetch Page でフィードを出力してないサイトからRSS を配信する のつづき

1. パイプをどのサイトでも使えるように変更する

前回、フィードを配信していない「特定のサイト」から RSS を配信した。

今回は、上記のパイプを、どのサイトでも使えるように変更した。

SnapCrab_NoName_2012-6-30_12-7-56_No-00

例えば、Yahoo!モバゲー の場合、「○○○○ さんの日記」のページを対象としてパイプを実行する。パイプのフィールドに入力する値は以下の通り。

ブログの各記事へリンクを含むページの URL http://yahoo-mbga.jp/XXXXXX/diary
ブログのタイトル一覧を取得するXPath //li[@class="lv2-lay"]/a
ブログの内容を取得するXPath //li[@class="blk4-lay"]

GREE の場合、「日記」のページを対象としてパイプを実行する。

ブログの各記事へリンクを含むページの URL http://gree.jp/XXXXXX/blog
ブログのタイトル一覧を取得するXPath //h1[@class="title"]/a
ブログの内容を取得するXPath //*[@class="maincol"]//*[@class="content"]
記事から削除する内容(正規表現) <div class="footlink">.*?</div>

Amebaなう の場合は、以下の通り。

ブログの各記事へリンクを含むページの URL http://now.ameba.jp/XXXXXX/
ブログのタイトル一覧を取得するXPath //span[@class="status"]/a
ブログの内容を取得するXPath //li[@class="now"]//p[@class="content"]
記事から削除する内容(正規表現) <span class="status">.*?</span>

以下、作成手順を述べる。

 

2. モジュールを独立させる

SnapCrab_NoName_2012-6-29_12-1-22_No-00最初に、ウェブページから、各記事のタイトルと URL を含むパイプを独立させる。

前回作成したパイプのソースを開き、Save a copy により、新しいパイプを作成する。

Loop モジュールを削除し、Rename モジュールから Pipe Output へパイプを繋ぐ。

 

ユーザからの入力を受け付ける Input モジュール

対象となるブログの URL と、各記事の URL とタイトルを指定するための XPath をユーザが指定できるように変更する。

  • User Input >
    • URL Input モジュール
    • Text Input モジュール

を配置する。

Input 系のモジュールの

  • Name フィールドは、作成したパイプのフォームのパラメータ名となる。
  • Prompt は、フォームにおけるフィールドのラベル名となる。
  • Position は、フォームにおけるフィールドが表示される順番を表す。

次に、Input モジュールから、XPath Fetch Page モジュールのフィールドにパイプを繋げる。

SnapCrab_NoName_2012-6-30_1-17-12_No-00

独立させたパイプは、以下のもの。

 

3. 作成したモジュールを配置する

先ほどと同じく、前回作成したパイプのソースを開き、Save a copy により、新しいパイプを作成する。

  • XPath Fetch Page モジュール
  • Rename モジュール

を削除し、上記で作成したモジュールと置きかえる。

自分で作成したパイプは、

  • My pipes > ブログ記事のタイトルと URL の一覧を取得する

より配置する。

このとき、ユーザからの入力を受け入れるために、User Input より、URL Input, Text Input モジュールを置く。

SnapCrab_NoName_2012-6-30_1-34-46_No-00

Loop モジュールで使う、XPath もユーザの入力を受け取るようにする。

SnapCrab_NoName_2012-6-30_1-52-53_No-00

 

4. Regex モジュールで不必要な文字を削除する

上記に加えて、各記事の内容から、特定の文字列を削除するために Regex モジュールを追加する。この際、正規表現で削除対象を指定する。

Operator > Regex を配置し、Loop モジュールの出力を Regex モジュールに入力する。 User Inputs より、Text Input を配置し、Regex モジュールの replace に繋ぐ。

SnapCrab_NoName_2012-6-30_1-57-11_No-00

これで出来上がり。

SnapCrab_NoName_2012-6-30_23-55-56_No-00

2012年6月29日金曜日

Yahoo! Pipes の XPath Fetch Page でフィードを出力してないサイトからRSS を配信する

1. Fetch Page から XPATH Fetch Page モジュールへ

http://pipes.yahoo.com/pipes/

Pipes via kwout

Yahoo! Pipes で、フィードを出力してないサイトから RSS を配信するために、Fetch Page モジュールを利用してきた。Fetch Page モジュールは、指定した URL のウェブページを取得するためのモジュール。

現在では、Fetch Page モジュールは、非推奨 (deprecated) となり、代わりに

が登場した。

Fetch Page モジュールは、文字列によりフィードにしたいウェブページの対象を指定した。これに対して、XPATH Fetch Page モジュールは、XPath を利用して指定する。

New Module: XPATH Fetch Page | Yahoo! Pipes Blog によると、

To use the XPATH Fetch Page module, first enter the URL of the site you want. By default, the module will output the DOM elements as items in the preview pane. You can optionally use the “Emit items as string” checkbox if you need the html as a string.

 

2. XPath について

XPathの使い方は、以下を参照

 

3. パイプの例

例えば、Yahoo!モバゲーの日記一覧から、RSS を配信させたいとする。

SnapCrab_NoName_2012-6-27_23-31-48_No-00

作成したパイプは、

全体の構成は下図のとおり。

SnapCrab_NoName_2012-6-29_12-1-22_No-00

以下、作成手順を述べる。

 

4. XPath Fetch Page モジュール

Pipes: Rewire the web にアクセして、Create Pipe ボタンを押す。

最初に、Source > XPath Fetch Page モジュールを配置する。

  1. URL フィールドには、対象となるウェブページの URL を入力する。
  2. Extract using XPath フィールドには、各記事の URL を含んだ記事タイトルを指定する XPath を入力する。
    • //li[@class="lv2-lay"]/a

SnapCrab_NoName_2012-6-27_23-34-25_No-00

 

5. Rename モジュール

作成した XPath Fetch Page モジュールをクリックして選択すると、以下のような出力がされる。

SnapCrab_NoName_2012-6-28_14-45-9_No-00

href は、記事の URL を表す。 content は、記事のタイトルを表す。

この出力を RSS に変換するには、

  • href ⇒ link
  • content ⇒ title

のように変更したい。

RSS(RDF Site Summary)によるサイト情報の要約と公開 によると、

SS 1.0はサイトの情報を簡便に伝えられるよう、次のような簡単な基本構造を持ちます。

http://www.kanzaki.com/docs/sw/rss.html#construct

RSS(RDF Site Summary)によるサイト情報の要約と公開 via kwout

出力を変換するために、Operator > Rename モジュールを配置し、XPath Fetch Page の出力を入力とする。

Rename モジュールのフィールドには、以下のように設定する。

  • item.href ⇒ Rename, link
  • item.content ⇒ Rename, title

SnapCrab_NoName_2012-6-29_1-56-4_No-00

item.href, item.content という値は、Rename モジュールへ入力する前の XPath Fetch Page の出力を見て判断する。(フィールドには、href, content を入力すると、自動的に item. が付けられる。)

Rename モジュールを通すことにより、以下のような出力となる。

SnapCrab_NoName_2012-6-29_2-4-23_No-00

 

6. Loop モジュール

ここまでの操作により、各記事の URL が取得できた。次に、この情報を利用して、記事の内容を取得する。

方法は、Oprator > Loop モジュールを使い、取得した各 URL ごとに、再び Source > XPath Fetch Page モジュールで内容を取得する。

パイプの配置は、Loop モジュールの中に XPath Fetch Page モジュールを置く。

XPath Fetch Page モジュールに設定する値は、

  • URL: item.link
  • Extract using XPath: //li[@class="blk4-lay"]
  • Emit item as String にチェックをつける。

Loop モジュールの出力は、RSS の構造に沿うために、

  • assgin all results to item.description

と設定した。

SnapCrab_NoName_2012-6-29_2-6-57_No-00

これにより、Loop モジュールの出力が以下のようになる。

SnapCrab_NoName_2012-6-29_2-19-18_No-00

後は、このパイプを保存し、実行する。

Yahoo! Pipes の XPath Fetch Page でフィードを出力してないサイトからRSS を配信する (2) つづく…

2009年9月1日火曜日

Ameblo の 全文配信 RSS の登録を簡単にするブックマークレット - Yahoo Pipes でユーザ入力に対応したパイプをブックマークレットで呼出す例

1. ブックマークレットの登録

  1. アメブロ登録」のリンクをブックマークツールバーへ D&D
  2. 登録したいブログを開いたら、上記で登録したブックマークをクリックする。
  3. Pipes: Ameblo Content All が開かれるので、Get as RSS をクリックしてフィードリーダーに登録する。

追記(2012.3.5): 現在、全文配信のために、Full Text RSS Feed を利用している。

 

RefControl で画像を表示させる

 

2. ブックマークレットの作り方

以下、上記のブックマークレットで利用しているサービスと作り方。

Ameblo の RSS を全文取得するために Pipes: Ameblo Content All をブックマークレットで呼出す。(cf. Yahoo! Pipes で強制全文配信化 - てっく煮ブログ )

パイプの入力フィールドを見ると、input 要素の name 属性が `ameblo_rss’ になっている。

090901-001.png

上記を利用してクエリ文字列を作成。名前は ameblo_rss で、値は http://rssblog.ameba.jp/[ユーザ名]/rss20.xml を URLエンコード

ブログ上でブックマークレットをクリックして利用することを想定。

var user = location.href.split("/")[3],
yp = "http://pipes.yahoo.com/closer_nabeshimaeido/amebloall?ameblo_rss=",
rss0 = "http://rssblog.ameba.jp/",
rss1 = "/rss20.xml";
location.href = yp + encodeURIComponent(rss0 + user + rss1);

 

ブックマークレットに変換

Compress javascript でコードを圧縮したものをブックマークレット変換。 → アメブロ登録

このブックマークレットを上記のパイプを利用したいブログ上でクリック。

ブックマークレットを作るための参考

 

3. クエリ文字列の名前に対応するところ

試しに自分でユーザ入力が可能なパイプを作成してみる。

Blogger で複数のタグ (ラベル) の付いた記事を抽出 - サイトフィードを使って」で書いたように、Blogger では特定のタグが付いた記事を RSS で取得できる。この RSS を生成するパイプを作成。ユーザが入力できる部分は、「Blogger のドメイン」と「タグ名」の二つ。

 

パイプ の作成

Yahoo Pipes の作成画面において、User Inputs より Blogger のドメインを受ける URL Input と、タグを受ける Text Input を使う。(ただし、今回はタグを一つ指定できるのみ。)

上記の入力を、Url の URL Builder  >>> Source の Fetch Feed に流し込む。

090901-003.png

Pipes: test User inputs

 

JavaScript でテスト

URL Input > Name と、Text Input > Name で設定した値を使ってクエリ文字列を作成する。

var yp = "http://pipes.yahoo.com/pipes/pipe.info?_id=e2aaad527b948dfd1dab9aa69162d98a",
url = "jutememo.blogspot.com",
tag = "Firefox";
location.href = yp + "&url=" + encodeURIComponent(url) + "&tag=" + encodeURIComponent(tag);

 

4. 余談

RSS の URL の取得

アメブロの RSS の URL の取得は、link 要素から自前で検索した方がいいのかな?

function getRSS(){
 var links = document.getElementsByTagName("link");
 for (var i = 0; i < links.length; i++){
  if (links[i].type === "application/rss+xml"){
   return links[i].href;
  }
 }
}

 

わからなかったこと

当初、以下のようにパイプに遷移してからテキストフィールドに値を設定すればいいのかと思った。

location.href = "http://pipes.yahoo.com/closer_nabeshimaeido/amebloall";
document.forms["runform"].ameblo_rss.value = // ここに RSS の URL を設定

しかし、パイプにパラメータを渡す方法がわからず。 Tumblr のブックマークレットを見て、クエリ文字列にブログの RSS の情報を持たせ、遷移後にそこからデータを取り出せばいいのかと考えたけれど断念。。

 

それならば、ブログ内に iframe を作り、その中にパイプを読み込みフィールドの値を操作すればいいかと考えた。

// ページの上部に iframe を挿入
var newElem = document.createElement("iframe");
newElem.src = "http://pipes.yahoo.com/closer_nabeshimaeido/amebloall";
newElem.setAttribute("id", "yahooPipes");
document.body.insertBefore(newElem, document.body.firstChild);
// iframe の読み込みが完了した後に iframe にアクセスすると..
document.getElementById("yahooPipes").contentWindow.document.getElementById("runform");

しかし、結果は

"Permission denied for <http://ameblo.jp> to get property Window.document from <http://pipes.yahoo.com>."

Javascript & Dhtml Cookbook (p.448) によると、

保護されている iframe のコンテンツ領域に、スクリプトからアクセスできるように、主ページと外部ページの両方が同じドメインとサーバから送信されていなければなりません。

なるほど、クロスドメインだと色々と制約があるのかぁ。。 (@_@;)

2007年12月24日月曜日

Yahoo! Pipes の Fetch Page モジュールでフィードを出力してないサイトから RSS を配信する

1. フィードを出力してないサイトは、情報発信する気がないのだろうか?

Web サイトによっては、未だフィード (RSS, Atom など) を出力しないところが多々ある。フィードがなければ、定期的な情報の受信ができない。情報発信の手段として、とても有効だと思うけれど、企業やポータルサイトで、フィードを出力してないサイトを、しばしば見かける。

フィードを出力していないサイトに対して、

を使うと、お手軽に RSS を出力させることができる。ただし、サイトによっては利用できないこともある。 (+_+)

 

2. Yahoo! Pipes の Fetch Page モジュールで、フィードを作成する

そこで、Yahoo! PipesFetch Page モジュールを利用して、フィードを出力してないサイトの、フィードを作成することにした。

This module fetches the source of a given web site as a string. This data can then be converted into an RSS feed or merged with other data in your Pipe using the Regex module.

というように、サイトの内容を文字列として出力するためのモジュール。

出力されたデータを元に、他のモジュールと連携して RSS のデータ形式として、出力させることができる。

追記(2012/06/29): 現在、Fetch Page モジュールは非推奨となり、XPATH Fetch Page モジュール を利用する。

 

3. 利用するモジュール一覧

以下のモジュールと組み合わせることにより、フィードを生成できる。

  • Fetch Page : 特定のサイトのページをソースとするためのモジュール。
  • Filter : 入力元をフィルタ。
  • Rename : 入力変数の名前を変更する。
  • Regex : 正規表現によって変換。

 

4. Fetch Page の利用例

例えば、障害保健福祉研究情報システム(DINF)ホームページ の「新着」を RSS出力させてみる。

(現在、上記ページは消滅している。過去の内容については、新着情報 を参照。)

071224-003

 

5. Fetch Page モジュールの設定

Sources > Fetch Page モジュールを、Pipes の右側の領域へドラッグ&ドロップする。

追記(2012/06/29): 現在、Deprecated > Fetch Page モジュールにある。

  1. URL フィールドには、「新着」ページのアドレスを入力。
  2. Cut content from: フィールドには、抽出する範囲を指定。この例の場合、Web サイトに表示されている「新着情報・更新履歴」から、ページの下の方にある文字列「>Copyright」までを対象とした。
  3. 071224-004
  4. Split using delimiter: フィールドには要素を区切るための文字列を入力する。ここでは、<p を指定した。これは、以下の理由による。

「新着」ページの「新着情報・更新履歴」付近のソースを表示させた。ソースを見ると、pタグ要素ごとに、情報がひとつのまとまりとなっている。

071224-005

 

6. Filter モジュールの設定

Fetch Page で取得したデータの範囲内の中で、最初の行の「新着情報・更新履歴」が不必要。

これに対して、Operators > Filter モジュールを利用して、最初の行をブロックする。

  1. 対象が表示されないようにするために、 Block をセレクトボックスから選択。
  2. Rules における最初の列の値、item.content は、Fetch Page モジュールによって出力される内容が content という変数に入れらる。 これに対して、隣のセレクトボックスで Matches regex を選択し、正規表現^新着情報・更新履歴」により、行頭が「新着情報・更新履歴」を指定する。

071224-006

 

7. Rename モジュールの設定

Operators > Rename モジュールを利用して、Fetch Page モジュールで抽出され、content 変数に入れられた内容を、RSS の出力に合わせるための、元になるデータを出力する。

  • item.content を title という変数にコピーする。
  • item.content を description という変数名に変更する。

071224-007

これを理解するためには、RSS の構造が説明されている、こちらのサイトを参考にした。 RSS は channel という入れ物の中に、

title

link

description~

という構造がある。

ところで、Rename モジュールで出力される前のデータは、 content という名称の入れ物があるだけだった。これを RSS の出力を真似るために、上記の RSS の構造に近いものに変換することが必要となる。それを実現するために、 content を複製 (Copy As) 、または、名称の変更 (Rename) をすることによって、後につなぐモジュールで、必要となるデータのみ抽出するようにする。そのための土台を作ってくれるのが、 Rename モジュール。

 

8. Regex モジュールの設定

正規表現を利用して、入力された文字列を抽出したり、変換したりする。

Rename モジュールで出力された titledescription の中身に対して、操作を適用した。

各々、二行づつ正規表現を適用している。

  • In Item.title
    • replace style.*>(\d{1,2}月\d{1,2}日) with $1
    • replace <.*?> with 空白 : g, m にチェック
  • In Item.description
    • replace style.*>(\d{1,2}月\d{1,2}日) with $1
    • replace (http://www.dinf.ne.jp/) with $1doc/japanese/ : g にチェック

071224-009

Item.title に対しては、不必要なタグの一部を削除して、日付を残し、HTML のタグを削除した。

Item.description に対しては、同様に不必要なタグの一部を削除し、リンクの一部を書換えた。これは、元のサイトで、相対パスで指定されているものが、Fetch Page モジュールによって、不適切なパスに書換えられているために、リンクの一部を書換えた。

 

正規表現

正規表現については、以下を参考にした。

$1 という表現は、正規表現 [Perl講座 -Smart] の正規表現のメタ文字の一覧より、

\1 または $1 グループ化にマッチした文字列を参照

.*? については、#085 正規表現の落とし穴の「最左最長一致の原則」と、量と位置を指定する より、

最初の"と、次の"に囲まれた文字列にマッチします。最短でマッチするので、"と"の間には、別の"は有りません。

".*?"

最短の?を省くと、最初の"と行末の"に囲まれた文字列にマッチします。
この場合、マッチした文字列の中に何度も"が入ることも有ります。

".*"

g, s, m, i のオプションについては、正規表現 [Perl講座 -Smart] の「m//演算子のオプション一覧」を参考にした。

作成したパイプには、冗長なところがあるけれど、とりあえず動くので、これでよしとしておく。

最後に全てのパイプをつないで保存し、起動した。

2007年12月20日木曜日

Yahoo! Pipes で、RSS を配信しているサイトから必要な記事のみ抽出してチェックする

情報系のサイトやブログを読んでいると、自分の関心のある記事の脇に、別の記事へのリンクがある。読んでいた内容に類似していて興味を持つものもあれば、逆に、全く関心がなかったけれど、タイトルがおもしろそうで読みたくなることもある。そんなとき、セレンディピティを感じる。新聞や雑誌を読むことのおもしろさは、偶然出会う記事の質に依存している。

しかし、逆に、必要な記事のみ抽出して読めればいいやというときもある。「このサイトで扱っている、この内容の記事だけはチェックしておきたい」というようなときだ。そのようなとき、Yahoo! Pipes を利用すると便利。

 

前提

米Yahoo! の ID を取得している。

 

利用する Pipes のモジュール

Sources > Fetch Site Feed

Operators > Filter

 

Open Tech Press の特集記事の中で、「Firefox」と「OpenOffice」に関する記事があったときだけ、Google Reader に表示されるようにする。

 

Pipes: Rewire the web にアクセスし、Create a pipe をクリックする。

071219-002

 

そうすると、Pipes の画面が表示される。左側には利用できるモジュールが表示され、右側でそれらモジュールを組み合わせる。

071219-003

 

Fetch Site Feed の設定

情報の取得元であるサイトの設定を行う。

 

Sources > Fetch Site Feed を画面の右側の領域にドラッグ&ドロップする。

URL のフィールドに、 http://opentechpress.jp と入力する。このとき、対象サイトの RSS はモジュールが探して取得してくれる。

071219-014

 

Filter の設定

抽出条件を Filter モジュールで設定をする。

 

Filter モジュールを、画面の右側の領域へドラッグ&ドロップする。

指定した単語のいずれかと一致したものを抽出されるように設定。

セレクトボックスを次のような文になるように選択をする。

Permit」 items that match 「any」 of the following

Rules のセレクトボックスでは、item.description を選択し、抽出対象の単語をフィールドに入力する。

071219-006

 

ここで、 item.description 以外に、いくつかの項目が選択できることがわかる。

071220-018   071220-017

 

item.description を選択した理由は、対象サイトの RSS を見るとわかる。 description タグで、記事の内容の説明が書かれるからだ。

071220-016

 

モジュールの連結

モジュールの下端と上端にある丸印をつなげ、 Pipe Output に情報が流れるようにする。最後に、 Pipe Output をクリックすると、画面下に抽出された情報が出力される。

071219-015

 

Pipe の保存と起動

作成した Pipe を右上にある Save ボタンを押すことによって保存する。

071219-012

 

その後、 Run Pipe... のリンクが表示されるのでクリックすることによって、今作成した Pipe を動作させることができる。

071219-009

 

Pipe を動作させると次のような画面が表示されるので、 Google Reader に登録する場合には、 Google のボタンをクリックして、登録作業を続ける。

071219-013