無理矢理RSS化pipes入門

By mattz, 2009/09/17

問題はRSS吐いてないサイトであるとのコメントをいただいたので、その辺触れてみたい。正直先程と同様の精細度では書けないので(後半明らかに手抜きになったように)ポイントだけ。

なお、RSS吐いてないサイトをpipesでどうにかするためには、正規表現に関する知識が不可欠かと思われます。まったく分からんという方はどっかで勉強してきてください。

まず、RSSを出力していない以上、最初のFetch Feedモジュールは使えませんので、Fetch Pageモジュールからスタートすることになります。実はYQLなんていうモジュールもあって、なかなか複雑なこともできたりするんですが、SQLやらXPathなんていう知識まで必要になってきちゃうので、ここでは扱いません。その辺知ってるって人は勝手に研究してください。

今回は一から説明するのではなく、既にある、RSSをでっち上げるpipeをサンプルにします。今回はスクリーンショットを載せたりしませんので、Pipesの実際のソースや、サイトのソースをご自分で見ながら読んでください。またそういう前提で書きます。

PipesでRSSをでっち上げているサイトは僕が作った中にもいくつかあるんですが、とりあえず僕の好きな女優さんの一人であるいとうあいこさんが地図のマップルのサイトでやっている、いとうあいこのふんわり京都のRSS化について説明します。

本題とは外れますが、このサイト、なんでRSS配信しないんでしょうかね。まぁいいですけど。

このpipeのURLは http://pipes.yahoo.com/pipes/pipe.info?_id=yAn1bUFo3hGeMQoB3cXxwQ
pipeのソースを確認するにはCloneしてEdit Sourceすればいいです。

もともとRSSを出力していないサイトをRSS化するのにまず必要なのが、最近の更新一覧的なリストです。これがないサイトに関しては、pipeでどうにかするのは正直言って厳しい。Numeriとかは一度挑戦してあきらめました。ふんわり旅行記の場合は、旅行記一覧というページがあるので、そこをベースにします。

まずは、旅行記一覧のページのURLを、Fetch Pageモジュールに渡します。んで、ページを見て、ページのソースを見てというのを繰り返すと、どうやら、<dl class="TravelDiary">というあたりを使うのがよさそうだねってのが分かりますので、Fetch PageモジュールのCut content fromに<dl class="TravelDiary">を設定します。で、toの方なんですが、</dl>としてしまうと、最初の1個しか取れなくなってしまうので、このリストの次の要素の始まりである、<div class="kensu10HyoujiBtm">にします。これで、旅行記の一覧部分が切り出せましたので、あとはこれを個々のエントリに分けてあげる必要があります。どうするかというと、分割するために目印となる文字列を探します。前回のエントリでは、これについての説明は面倒なので省略しましたか、それがdelimiterです。この例では</dl>なんかが十分その役目を果たしてくれそうなので、それを設定します。という説明だけでは分からないでしょうけど、頑張って元のHTMLのソースを見てなんとか納得してください。

これで、とりあえず一つ一つの旅行記がいくつかのitemに分割されたわけですが、このままではとてもRSSリーダが読める状態ではないので、それをどうにかしてあげます。

RSSだと言い張るためには各itemにtitle要素、link要素が最低限必要で、pubDateなんかはあった方がいいし、どうせだからこいつもdescriptionに本文突っ込んでしまえばRSSリーダで全部読めて幸せなので、そこを着地点に設定します。まぁ全文取得に関しては一応前回説明したので今回は説明する気はないですけど。

で、話を戻して、</dl>で分割してあげたRSSのなりそこないの各itemは、content要素だけを持っている状態です。なんとなく結構頑張って我慢して読んでいた人でもこの辺で読むのやめたんじゃなかろうか思うんですが続けます。Pipes' EditorのDebbuger領域で確認してもらうと、このcontent要素の中身には、title、link、pubDateの各要素に相当する情報が入っていますので、ここからtitle、link、pubDateとしてちゃんと使える形として取り出す作業をこれから行います。

当然このままではどうにもなりませんので、このcontent要素を先ほども使ったRenameモジュールを使って、title、link、pubDateの各要素としてCopy As(実際には最後の1個はRenameですが)します。で、コピーした各要素について、日付やタイトルやURLとして使える形になるようにRegexモジュールで形を整えていきます。実際の設定はソースを確認して欲しいのですが、

<dl class="TravelDiary">
<dt><a rel="nofollow" target="_blank" href="http://www.mapple.net/travels/itoaiko/19350.htm">
2009年9月16日の旅行記</a><div class="Traveldate">旅行日:<span class="date">
<span class="datetext">
2009.09.16</span></span></div></dt><dd><div class="linkage">“京都の生き物たち”</div><p></p></dd></dl>

こんな感じだったcontent要素をCopy As or Rename後、Regexで色々やることによって、

item
  link:http://www.mapple.net/travels/itoaiko/19350.htm
  title:2009年9月16日の旅行記 “京都の生き物たち”
  pubDate:2009-09-16

こんなものにすることができます。

すでにこの状態でもRSSとしてはぎりぎり成立してますから、名前をつけて保存すればRSSリーダで購読することが可能です。

この後は、入用であれば前のエントリの要領で全文化するとかすればいいだけです。サンプルはそのようになっていますので、興味があればご覧ください。

例によって最後は手抜きになりましたが、以上で「無理矢理RSS化pipes入門」を終わります。

ツッコミ・質問は歓迎です。遠慮なくどうぞ。

タグ

Yahoo! pipes入門

By mattz, 2009/09/16

「アメブロ rss カテゴリ別」のような検索キーワードでいらっしゃる方が結構いるのですが、アメブロさんはどうもそのような機能は提供されていないご様子。個人的に検索ニーズに応える月間実施中(今作った)なので、Yahoo! pipesを使ってアメーバのブログのカテゴリ(アメブロ的にはテーマか?)別のRSS を生成する方法など書いてみようと思う。

モデルケースが必要なので、アメブロのトップに行ってみた。一般の人のブログではなんなので、適当な芸能人ブログを使おうと思ったのだが、ランキング上位のほとんどの芸能人がろくにテーマを使ってません。テーマ:ブログばっかり。叶姉妹はまぁまぁ使ってるようなんですが、この人たちあまり好きじゃないのよねぇ、とか思ってたらいいブログ見つけた。「渋谷ではたらく社長のブログ」。これでいいじゃん。お誂え向きに『著作権保護のため、記事の一部のみ表示されております。』もしてやがるし。全文配信化のサンプルにもなるというね。

そろそろ具体的に話を進めます。

Yahoo!のアカウントを取得する

Yahoo! pipesを利用するには、Yahoo!にアカウントが必要です。ちなみにYahoo!JAPANのアカウントは使えないので日本以外のYahoo!でアカウント取得して ください。まぁ、www.yahoo.comで作っとけば一番確実。例外はあるかもしれませんが、日本以外ならどこのYahoo!でアカウント作ってもOKなはずですが、検証はしてませんので。

Google Chromeをインストール

まず、これは必須でもなんでもありません。Pipes' editorはいわゆるWebアプリなんですが、Yahoo!の推奨する環境はFirefox、IE7以降、Safariとなっています。これらのブラウザが既にインストールされているならそれを使っていただいて構いませんし、サポートしてねーよというダイアログこそ表示されるもののOperaでだって編集はできます。ただ、理屈は知りませんがPipes' editorはWebKitと相性がよいようなので。SafariもWebKitですけど、Safariはねぇ……

pipeを作る

入門とかうたっておきながら、いきなり作り始めます。こんなもん、実際に触るのが一番だし。
http://pipes.yahoo.com/pipes/ にログインしたら、「Create a pipe」というリンクをクリックします。

こんな感じの画面(ウィンドウは小さくしてます)になりますので、まずは「Fetch Feed」というボタンを右の方眼紙っぽいところにドラッグするか、右側の「+」ボタンを押します。

左側に並んでいるいろいろなボタンはモジュールといって、それぞれにいろんな機能を持っています。Fetch FeedモジュールはRSS(0.9も1.0も0.91も2.0も 全部含む)とかAtomとかそういういわゆるRSSリーダが扱うようなデータを構文解析して読みやすくしてくれるモジュール。RSSのURLを渡してあげるといい仕事をします。

渋谷ではたらく社長のブログのRSSのURLはhttp://feedblog.ameba.jp/rss/ameblo/shibuya/rss20.xmlなので、この文字列をコピペして、URLの欄に 貼り付けます。ちゃんとフィードが取得できるURLの場合は、この画像ではオレンジの三角になっている部分が、サイトのfavicon(ない場合は?マーク)に変わり、画面の下の方のデバッグ領域にエントリタイトルの一覧が表示されます。されない場合は、URLをよく確認してください。

今回は目的がカテゴリ(テーマ)別にRSSを生成する、ですが、RSSの形式や内容によっては、各フィードにカテゴリ情報が含まれていたりして、この段階でFilterモジュール(詳しくは後ほど)を使えば済んでしまう場合があります。残念ながらアメーバさんはあまりRSSでの配信には積極的ではないようですので、それは無理。ということで、次のステップに進みます。

LoopモジュールとFetch Pageモジュール

pipesは基本的にmoduleの組み合わせで目的を達成させるツールです。今から使うのが、LoopモジュールとFetch Pageモジュール(この二つは結構よく使うのでここでマスターしましょう)。Loopモジュールは左側のメニューのOperatorsグループの中の一つなので、まずはそこをクリックします。メニューが展開して、Loopっていうのが出てくるので、それをさっきと同じようにドラッグするか「+」をクリックします。

Loopモジュールは、RSSに含まれる複数のitemそれぞれについて、同じ処理を繰り返したいときに使うモジュールです。Fetch Pageモジュールは、Fetch Feedモジュールとよく似た名前ですが、機能も似ていて、URLを指定すると、そのページの内容を丸ごと取得してきます。Fetch Feedと違うのは、特に構文解析などはせず、ソースそのままの文字列(本文中に相対パスで書かれているようなものを絶対パスに変換してくれたりはする。意味が分からない人は無視して くれてOK)を返してくれるモジュールです。

これだけでは分からないので、実際にやってみましょう。

まず、Fetch Feedモジュールの出力(下側の水色○)とLoopモジュールの入力(上側の水色○)をつなげます。やり方はマウスでみよ~んとつなげるだけ。入力とか出力とか何言ってんの?というあなた。意味分からなくていいから上が入力、下が出力と覚えてください。とにかく、こうやってつなげることで、Fetch Feedモジュールがとってきたフィード情報を、Loopモジュールに渡してあげることができます。

Loopモジュールは、受け取ったRSSのitem(要はブログのエントリ)の1個1個について同じ処理をすると書きましたが、Loopモジュールはお腹に穴があいていますね。ここにその「処理をする」モジュール(や既に作ってあるpipe)を入れてあげます。今ここではFetch pageモジュールを入れます。左側のメニューのSourcesをクリックして、Fetch pageモジュールを表示させたら、Loopモジュールのお腹の穴の中にドラッグします。なお、お腹に入れられるモジュールのときは、穴のふちが赤くなるので覚えといてください。

こんな感じになってればOKなので、Fetch PageモジュールのURL欄の右側の右向きの三角をクリックします。

いろいろ選択肢があるんですが、ここでは「item.link」ってやつを選びます。item.linkというのは、Loopモジュールが扱う一つ一つのitemのリンク先を表します。要するに、ブログの記事一つ一つのURL(必ずしもそうとは言い切れませんが)。つまり、Fetch Pageモジュールに個別記事のURLを渡して、記事内容を取得してきてね、と命令していることになります。

とってきた記事内容は、つまりそのページのソースです、サイドバーだの何だのといったあまり必要ではないものも含んでいますので、必要な部分だけを取り出すのが必要になってきます。ここで使うのが、Fetch Pageモジュールの「Cut content from ____ to ____」の部分。ブログのトップではなくて、どれか一つの記事をブラウザで表示して、「ソースの表示」をします。

この辺は多少経験も必要になってきてしまいますが、ブログの場合、大体テーマとかスキンとはテンプレートとかがあるので、大体は機械的に判断できるようなつくりになっています。

今回の場合必要なのは、エントリのカテゴリ(テーマ)と、ついでに本文なので、それを切り出せるように始まりの文字と終わりの文字を探します。

この例では、From(始まり)として<!--//.entry_head-->、To(終わり)に<!--entryBottom-->と設定しました。本文を取りたいだけであれば、始まりの方は<div class="contents">でいいと思いますが、今回はテーマも欲しかったのでこのように設定し、さらに、delilmiterとして<span class="date">というのも使っています。

この辺のモジュールのさまざまなオプションやら何やらを一つ一つ説明していくと長くなりますし、そもそも僕がめんどくさいので、省略します。Pipes editorの左下にhelp textも表示されていますし使用例なんかも見ることができますので、詳しく知りたい人はそちらを参照のこと。

Renameモジュール

次は説明が難しいのですが、まずは実際にやってみます。使うのはRenameモジュール。これをLoopモジュールの下に配置してLoopモジュールとつなげます。Renameモジュールの「+Mappings」というのを1回クリックし、入力欄を二つにします。

1個目の入力欄。左側には「item.loop:fetchpage.0.content」、真ん中の選択肢はRename、右側の入力欄には「category」と入れます。
2個目の入力欄。左側には「item.loop:fetchpage.1.content」、真ん中の選択肢はRename、右側の入力欄には「description」と入れます。

Regexモジュール

これだけですと、まだまだ余計なものがくっついているのでそれを取っ払います。使うのはRegex(正規表現)モジュール。

今のこの時点でcategoryがどんな値になっているかというと、[<span class="theme">テーマ:<a rel="nofollow" target="_blank" href="http://ameblo.jp/shibuya/theme-10000000241.html">社長業</a></span>]こんな感じ。ここで欲しいのはこの例だと「社長業」の部分だけです。また、description(RSSリーダで読むのは結局ここ)にも、特に必要ではない日付情報が入っちゃっています。これはまぁ、Fetch Pageのやり方次第なのですが。

やはり「+Rules」を1回クリックして入力欄を1個増やします。

1個目の入力欄。左側には「item.category」、真ん中のreplaceには「(<.*?>|テーマ:)」、右側の入力欄は空っぽのまま、gとmにチェック。
2個目の入力欄。左側には「item.description」、真ん中のreplaceに「^.*?<」、右側の入力欄には「<」と入れます。

Filterモジュール

次がやっと出てきました。Filterモジュール。カテゴリ別配信の肝です。これは、それぞれのitemが特定の条件を満たすものだけ抽出するモジュール。いろいろオプションを設定すると、特定の条件を満たすものを排除するとか、条件を複数設定して全てに一致するなら、とか、どれかに一致するなら、など細かく設定できます。とはいえ、今は特定のカテゴリだけを抽出したいだけなので、次のように設定します。

右側のやつ。これはText Inputモジュールといいまして、任意の文字列をインプットしてもらうためのモジュールです。ホントに特定のカテゴリだけを抽出したいだけなら、Filterモジュールの右側の入力欄にその抽出したいカテゴリ(テーマ)を設定してやればいいのですが、カテゴリは自由に設定できるようにしよう、というのが、これ。これを使わないと、カテゴリ毎にパイプを作らなければならなくなってしまいますので、任意のカテゴリ名を入力できるようにこうしました。これなら出来上がったpipeのURLにカテゴリを含めることができます。

保存して実行

とりあえず、このブログの特定カテゴリのエントリだけを配信するpipeは完成なので、Filterモジュールの出力をPipe Outputにつなげ、このPipe自体の名前を入力してSaveします。Saveができると、上の方に「Pipe Saved Run Pipe...」と表示されますので、「Run Pipe...」の部分をクリックしてみましょう 。

いま僕が作ったpipeはこちら⇒「渋はた社ブ(カテゴリ別)」。

アクセスしたら、category欄に例えば「ブログ」とか「アメブロ」とか入力して[Run Pipe]ボタンを押します。Google Readerに登録するなら、そこにボタンがあるのでそれを押せばいいし、LDRなどで購読するには、「Get as RSS」のところをクリックするとか、右クリックしてリンクURLをコピーするとかして、どうにかしてください。

最後めんどくさくなって適当になりましたが、今日のところはこの辺で。多分、次はないけど。

質問などあれば、僕の分かる範囲でお答えします。

ま、でも、RSSをpipesでゴニョゴニョするのは、簡単な部類なんだな。楽しいのはRSSを出力していないサイトをゴニョゴニョすることであり。はてなアンテナでもいいんだけども。

タグ

たむらぱいぷす

By mattz, 2009/06/24

ノウニウノウン購入以来、すっかりお気に入りと化してしまったたむらさんなんですが、MySpaceでやっている公式 ブログは全文配信してくれなかったりとか、MySpaceブログで見ると正直に書いちゃうけどコメントがウザいので、Pipes化しました。

それから、Livedoor Newsが過去に結構取り上げてくれてるようなので、LivedoorニュースのRSSからキーワードで抽出するPipes。一応汎用性は持たせてありますが、デフォルトのキーワードが「たむらぱん」

それからVIBEという音楽情報サイトもよく取り上げてくれたりしてるみたいなんですけど、どうにもweb 1.0なサイトな ので、ゴニョった。他のアーティストさんをピックアップしたければ、cloneして最初にFetch Pageしてるところの"artist=030007225"のところを適宜書き換えてください。

追記

さらに3つほど追加した。オリコンとナタリーとBARKSと。リンクは張らない。

アメブロ

By mattz, 2008/08/27

アメブロ芸能人ブログの吐き出すフィードは元々糞だったが、最近仕様が変わったのかpipes通すと文字化けするわ、PR(広告)とか入れるようになるわで、更に 糞になった。

アメブロのRSSサーバが返すRSSのMIMEタイプはtext/xmlで、まぁ別に間違っちゃいないらしいけど、pipes君はこの手のフィードをFetchできない。まぁpipesに 渡す前に、Content-Type: application/xmlとかくっつけてやりゃいいだけの話だし、それさえしちゃえば、pipesが処理できるようになるから、PRもfilterかけられるんで、ちょっと対処してやって済ませてはいるけれども。

アメブロのフィードといえば「辛辣インターフェース評議会 - amebloのフィードが酷い件」この辺の話が記憶に新しい。

オレホントアメブロキライ

タグ

色々全文配信化してみました

By mattz, 2008/06/13

広告も見てもらいたいとかいう気持ちは分からないでもないのですが、LDRだけで済ませたいんですよ、僕は。

そんな訳でYahoo! Pipesを使っていろんなFeedを全文(になりきってない詰めの甘いのもたくさんありますが)配信化してみました。

Pipes from mattzcom(Yahoo!ではmattzのIDは取れなかったのでcom付き)

ITmediaさんなど一部のサイトでは、RSSのContent-Typeをtext/html; charset=UTF-8で配信しているせい(と思われる)で、Pipesでfetchすると文字化け しちゃうので、このサーバにリバースプロキシするプログラムを置いて、Content-Typeヘッダを付加するようにして対策してあります。一応念のため書いておきま すが、特定のURLに対してしかproxy動作はしないようにしてあります。

タグ

カテゴリ別のRSSを配信したい

By mattz, 2008/05/28

2009/10/16 追記

思うところあって、こちらで公開したpipeは削除しました。

もしも、このブログのカテゴリ毎のRSSを取得したくなったなら、まずはそのカテゴリのページを表示して(サイドバーのタグクラウドから探すとか、そのタグがつけられたエントリを表示してタグ一覧から探すとかすればよいです)そのページをRSSリーダに放り込めばよかろうかと思います。

元の文は以下に残しておきますが、現在は内容的には無意味です。


そんなにニーズがあるとも思えないんですけど、まぁ中にはOpera関係のエントリだけでいいのにお前が何の漫画読んでるかなんて興味ねーんだよ、的な人もいるかも知れないので、このブログのRSSをカテゴリ別に配信できるようにしてみたい、と思った。

最初はMT4のテンプレートをカスタマイズしてやる方法というのを模索していたのですが、Movable Typeのテンプレートって、よく分かんないんですよね、 私。よく分からないまま、言われるがままにコピペで設定してみて言われた通りにならないと対処のしようがない、というか実際そうだった訳なんですが、結局のところうまくいかなかった。

じゃぁどうしようかってんで、Yahoo!Pipesに頼ってみることにしました。

で、出来上がったのがこれ(試行錯誤の末にえらい間抜けなことをしているので、View Sourceとかは是非して、もっといいやり方を教えて下さい。実 はカテゴリじゃない、comicタグとかでも抽出できたりするタグつけるのやめた。いいやカテゴリだけで。)。「取得したいFeedのカテゴ リ」ってところに左の方に並んでる、カテゴリをコピーして入力して、[Run Pipe]を押してもらえれば結果が表示されるんで、More Options→Get as RRSとかしてもらえればいいのですが、それも面倒なので、サイドバーのカテゴリ一覧の右か左かにボタンをつける、くらいのことはテンプレートいじりできそうなので、その内やりますった

2009/05/15 追記

Pipe自体は今も有効ではありますが、旧ブログの方を更新していないものですから、ここに書いてあることはほぼ無意味です。

というか、サイドバーに表示されている「タグクラウド」ってやつ(Drupalのtaxonomyモジュール)がその辺のことはよきにはからってくれるので、無用になりました。

タグ