pipesを使ってみる

Bloggerでエントリを書いて、記事を読んだらTumblrに追加して、Twitterでつぶやいて、deliciousへブックマークを登録。普段からこんな事をしているが、こいつらがバラバラに散らばっていて何かあったときに探しづらい。deliciousに追加したっけ？Tumblrでコメントしたんだっけ？みたいな事にもなるし、Twitterで見かけた内容を元にたどっていく途中で見かけた覚えがあるが…みたになってしまう。そこでこいつらを時系列に並べて一覧で見たいと思っていた。xreaにアカウントがあるからphpで作るか、と思っていたけど気が変わってYahooPipesで試すことにした。まだPipesを触ったことが無かったから良い機会だと思ったし。説明中に(図)とあるものは、このエントリ最下部に埋め込んであるGoogleDocの各Slideに貼ってあるモノへの参照。

1. まずは海外Yahooのアカウントが必要。これが無いとPipesできないのはおろか、他人のソースすら見れませぬ。
2. Pipesのページの上部にある「Create a pipe」。
3. 上記のような画面になり、これがPipesのソース編集画面。最低限の使い方を書いておく。というか、普段IDEで開発している人なら直感的に分かる。
   • 左側の領域が部品の選択画面で、各部品をClickすると左下に部品の簡単な使い方とサンプルへのLinkが表示される。
   • 部品を使用したい場合は、部品の右にある「+」アイコンをClickする。すると右の方眼紙のようなデザイン領域に追加される。
   • デザイン領域の下は、各部品を選択したとき（選択されている部品はタイトルバーがオレンジ色になる）にその部品から出力される結果が表示される領域。Debuggerて書いてあるからそのまんま。部品の設定に問題があったりする場合はここにエラーが表示される。
   • 左上の「Layout」は自動的にレイアウトを整えてくれる機能。その時のブラウザの表示領域に合わせたレイアウトになる。GMFのXYLayoutもそぅだけど、この手のレイアウト機能はすごいよなぁ。
   • 部品から部品へつなぐには、基本的には部品の下にあるOutputの丸いアイコンから、部品の上にあるInputの丸いアイコンへドラッグする。この操作でふたつの部品がpipeでつながれる。
   • pipeを切るには、部品上のInput/Output用の丸いアイコンにカーソルをあてて少し待つと現れる「はさみアイコン」をClickする。
4. まずは、部品「Sources/Fetch Feed」を追加する。「Sources」カテゴリには主に入力データを引っ張ってくるための部品が登録されている。部品の属性であるURLにはBloggerのFeedのURLを入力する。このブログなら「http://shin1o।blogspot.com/feeds/posts/default」みたいなカンジ(図1)。
5. その部品のタイトルバーをClickすると、オレンジ色になりデバッグ領域に出力結果が表示されるはず。(図2)
6. 今回はtwitterとtumblrとdeliciousも必要なので、とりあえずは同様の手順でtumblrのFeedも追加する。例えば「http://shin1o।tumblr.com/rss」とか(図3)。 本当は、ひとつのFetchFeed部品だけで複数のFeedを引っ張ってこれるから複数のFetchFeed部品を追加する必要は無い。部品の「URL」の横にある「＋」アイコンをClickするとURLの入力欄がひとつ追加される。逆に入力欄の左の「-」をClickすると、対象の入力欄が削除される。
7. 一旦ここでこれらふたつだけで「時系列に並べて一覧」というGoalを試してみる。部品「Operators/Union」を追加する。はしっこに追加されると使いづらいので真ん中あたりにドラッグしておく。話がそれるけど、このモデリング用のコンポーネントってYUIにも含まれてるのかな？カコイイよなぁ。
8. ここからが「pipes」と呼ばれる所以の手順。派手でかっこいい。最初に追加したBlogger用のFetchFeed部品の下にある丸いアイコンからドラッグを開始して、Union部品の上にある丸いアイコンまでドラッグする。すると、パイプでつながる。FetchFeed部品からUnion部品に流し込まれるカンジ。同様にTumblr用のFetchFeed部品の結果もUnion部品へpipeで接続する。
9. ここで、Union部品を選択状態にしてDebugger領域を見ると、ふたつのデータソースからのデータが結合されている。ただし、どちらかが先にまとめて表示されて、一定件数以上は「+**more」のように省略されてしまうからデータの中身では判断つかない。件数で判断しよう。また、そもそもDebuggerに表示されない！とかは接続が間違っているか、Debugger領域の「refresh」で再描画する必要がある。
10. 次は、日付別にソートする部品「Operators/Sort」部品を配置する。
11. どのフィールドでソートするかを指定するか設定する必要がある。Union部品からSort部品へpipeすると、フィールドの入力欄が「Updating」となり、流し込まれてきたデータから選択できるフィールドのListを作ってくれる。
12. 今回はFeed配信日付の降順に並べたいので、「item.pubDate」を「descending」でSortする設定にする。
13. この状態でSort部品を選択してDebugger領域を見ると、BloggerとTumblrから取得したデータが目的どおりの状態で取得できている事が確認できる。
14. 外からこのデータをそのまま利用するので、後はSort部品から「Pipe Output」というデフォルトで存在している部品にpipeするだけ。ここから先がpipesで作ったサービスが外の世界へ出力する口となる。これで完成なので右上にある「Save」を忘れずに。

この手順でpipesのサービスは完成。これを外から使う方法はまた明日。