Prev 2008.4 Next
S M T W T F S
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      
 
スポンサード リンク
広告
Others
  • RSS1.0
  • RSS2.0
  • atom0.3
  • valid XHTML1.0
  • valid CSS2
  • Credit
Today: Yesterday: Total: Online:
  • BookMark
  • Category
  • Archives
  • Main
  • Search
  • Comment
  • TrackBack
  • Gallery
  • Login

カテゴリー ウェブApril 15, 2008

ケーススタディで学ぶYahoo! Pipes入門 ID:1208233725 このエントリーを含むはてなブックマーク


 最近「Yahoo Pipes」というキーワードで検索にいらっしゃる方があまりにも多いので、せっかくだからという理由でケーススタディというか、具体例を1つ解説したいと思います。

 まぁ、内容は大したことないんですが、入門者にとってはそこそこ有益かな、と…。
 やることは、「複数のブログ検索サービスを統合して1つのRSSにまとめるサービスを作る」です。
 手順としては次の通りになります。

1. Text Input: キーワード入力を受け付ける。
2. URL builder: 入力されたキーワードを、各ブログ検索のAPIに渡すURLを生成する。
3. Fetch Feed: 取得した各ブログ検索のRSSを一つにまとめる。
4. Unique: 同じURLがRSSに含まれていたら統合する。
5. Sort: 時系列にソートする(新しいサイト順にする)。

 完成図はこんな感じです。

Pipes完成図

 こちらから実際のパイプを見れます。

 http://pipes.yahoo.com/pipes/pipe.info?_id=PnJluRUK3RG2_66IxQnzeQ

 以下、一つ一つ解説していきます。

1. Text Input: キーワード入力を受け付ける。

 Pipesは、決まったURLを処理するだけではなく、ユーザー入力によって処理を変更することができます。今回は、入力されたキーワードを元にRSS取得用のURLを作る必要があります。

 例えば、livedoorのブログ検索のRSSは次のようになっています。

 http://rss.sf.livedoor.com/search?q=kaossilator

 これは、「kaossilator」というキーワードで検索をかけた場合のRSSのURLです。
 「q」というパラメータに対して、キーワードがそのまま付けられていますね。
 
 ここを自分の好きなキーワードで差し替えれば、その内容のブログ検索RSSが取得できるはずです。

 その為に、まずは「キーワード」そのものを入力するインタフェースをPipesにつけてあげましょう。
 左側の「User inputs」カテゴリから、「Text Input」をドラッグ&ドロップでフィールドに置きます。

blogsearch_text_input


 完成図で言うと、右上のボックスです。
 「Name」は、ここで入力するテキストにつける名前です。深く考える必要はないので、ここは「keyword」としておきます。
 「Prompt」は、完成したパイプを実行する際に表示されるこのテキストの入力欄の左側に「項目名」として表示されるテキストです。ここは同じく「keyword」としておきます。もちろん、分かり易く、「キーワードを入力してください」と書いてもOKです。
 「Position」は、複数のUser Inputsモジュールを置いた際に、どういう順番で入力項目が表示されるかを指定しますが、今回は1つだけなので空欄のままにします。
 「Default」は、入力項目に最初から入っている初期値です。今回は不要です。
 「Debug」は、パイプの編集中に、仮の値として与える初期値です。ここに指定した値を適用した結果が、編集画面下の「Debugger」に表示されます。ここでは「kaossilator」としています。

 以上、キーワード入力はこんな感じで実現します。

2. URL builder: 入力されたキーワードを、各ブログ検索のAPIに渡すURLを生成する。

 テキストを入力しただけではダメで、今度はそれを元に、RSSを取得する為のURLを作る必要があります。
 livedoorの例だと、ブログ検索のRSSはこのような感じでした。

 http://rss.sf.livedoor.com/search?q=kaossilator
 
 この「kaossilator」の部分に、Text Inputモジュールの結果を入れたいわけです。
 
 この操作には、「URL Builder」というモジュールを使います。このモジュールは、複数の文字列から1つのURLを作ることができます。今回はText Inputの入力値からURLを生成するのに使います。URL Builderは、「Url」カテゴリの中にあります。同じく、画面上にドロップしましょう。

blogsearch_url_builder


 完成図では、3つのURL Builderが置かれているのが見えると思います。
 それぞれ、livedoor、テクノラティ、Yahoo!のブログ検索のURLを作っています。
 
 左上のURL Builderのボックスが、livedoor用です。
 「Base」に入っているのは、URLのうちパラメータ部分を除いたものです。
 livedoorの例だと、
 
 http://rss.sf.livedoor.com/search
 
 までがBaseになります。
 「Path elements」は、URLにスラッシュ付きでパラメータを付けたい時に指定します。
 
 例えば、Baseに「http://myapp.xxx.xxx」と指定して、Path elementsに「subfolder」とつけると、「http://myapp.xxx.xxx/subfolder」というURLを生成することができます。「+」ボタンを押すと、複数のPath elementsを追加していけます。
 
 livedoorの例では、「/search」の部分まで含めてBaseに指定しているので、これ以上のPath elementsは不要ですね。空欄にしておきます。
 
 「Query parameters」は、「q=キーワード」の部分です。複数指定すると、自動的に&でつなげてくれます。
 Query parametersには二つの設定欄があります。左側がパラメータ名、右側がパラメータ値です。今回はパラメータ名は「q」、パラメータ値はText Inputから引っ張ってきます。
 
 さて、ここまでURL Builderを説明しましたが、実はこれらの設定を自動的に行う機能がURL Builderにはついています。
 試しに、「Base」に「http://rss.sf.livedoor.com/search?q=kaossilator」というURLをそのまま入力してみて下さい。どうですか? 自動的にQuery parametersに「q」と「kaossilator」という文字が入りましたね? Baseの内容も、自動的に「http://rss.sf.livedoor.com/search」にカットされています。
 
 このように、Baseに具体的なURLを入れると、URL Builderは自動的に適切な形で設定項目を埋めてくれます。もちろん、自分で1つ1つ埋めて行っても構いません。
 
 さて、「q」の値は「kaossilator」固定ではもちろんありませんから、Text Inputから引っ張ってくる必要があります。これは文字通り、Text Inputモジュールの下の「○」の部分をドラッグして、このQuery parametersのテキストボックスの左側についている「○」に繋げてください。これで、Text Inputの入力値が、自動的にURLの「q」の値として設定されるようになりました。
 
 同様に、Yahoo!ブログ検索RSSのURLは次のようになります。
 
 http://blog-search.yahoo.co.jp/rss?p=kaossilator&ei=utf-8
 
 もう一つURL Builderを設置して、Baseにこれを入れると、「p」と「ei」のQuery parameterを自動的に作ってくれます。
 「ei」パラメータは見ての通り文字エンコーディングを指定しているだけなので、このままにして、「p」の方に、Text Inputの出力を繋げてやります。
 
 テクノラティのURLは少し変わっています。
 
 http://feeds.technorati.jp/search/kaossilator?authority=a4&language=ja
 
 これをBaseに入れると、「authority」と「language」というQuery parameterが設定されましたが、これらはキーワードのパラメータではありません。テクノラティでは、キーワードをPath elementとして指定するようになっています。
 
 Baseには現在、「http://feeds.technorati.jp/search/kaossilator」までが入っています。これを「http://feeds.technorati.jp/search」にしてください(最後のスラッシュはつけないで下さい)。
 そして、Path elementsの空欄になっている所に、Text Inputの出力を繋げます。
 
 これで、入力キーワードがテクノラティのURLのPath elementとして指定されるようになりました。
 
 ちなみに、「日本語を入力する場合の文字エンコーディングはどうなっているんだ?」という疑問を持たれる方もいらっしゃると思います。これはとても大事な事ですが、今回の場合はUTF-8を前提としているので、特に考えないで置きましょう。最近のウェブサービスはほとんどの場合、入力値をUTF-8で受け取れるようになっています。Yahoo PipesのText Inputも、UTF-8での入力になります。

 尚、今回3つのブログ検索サービスを使いましたが、別にこれらがお勧めというわけではありません。たまたま「ブログ検索」で検索したらこの3つがヒットして、RSSも取得できた、というだけです。Googleブログ検索もRSSを取得できるのですが、なんとPipesから呼び出そうとするとエラーになってしまったので断念しました。皆さんはお好みのブログ検索エンジンをご利用下さい。

3. Fetch Feed: 取得した各ブログ検索のRSSを一つにまとめる。

 URL Builderで3つのRSSのURLを作りました。
 これを1つにまとめるには、「Fetch Feed」モジュールを使います。Fetch Feedは、RSSのURLを指定すると、RSSを取得してくれるという、シンプル且つ基本的なモジュールです。複数のRSSソースを指定可能です。
 これは「Sources」カテゴリに入っています。

blogsearch_fetch_feed


 Fetch Feedの「URL」の右側の「+」ボタンを押して、設定欄を3つ作ってください。
 ここに、URL Builderの出力をそれぞれ繋げます。
 
 これで、3つのRSSが1つにまとまりました。
 
 このFetch Feedモジュールのタイトル部分をクリックしてオレンジ色になっている状態で、画面下の「Debugger」を見てください。すると、Fetch Feedの出力結果が一覧で表示されていると思います。Text Inputモジュールの「Debug」の値を変えて、Debuggerの「Refresh」を押すと、内容が変わるのを確認して下さい。
 
 このように、各モジュールをアクティブ(オレンジ色)にした状態でDebuggerを開くと、その時点でのモジュールの出力を確認することができます。

4. Unique: 同じURLがRSSに含まれていたら統合する。

 3.の状態で、既に3つのブログ検索を統合することが出来ている訳ですが、このままだと、それぞれのブログ検索に同じページがヒットしていた場合に、同じページが何度もリストアップされてしまうことになります。それは頂けないので、同じページは削除したいところです。
 それをやってくれるのが、「Unique」モジュールです。
 Uniqueモジュールは「Operators」カテゴリにあります。
 
 これを置いて、Fetch Feedモジュールの出力をUniqueの入力に繋いで下さい。

blogsearch_unique

 「Filter non-unique items based on」とは、「〜を元にして重複する項目をフィルタリングする」という意味です。
 今回は、何が重複していると困るかといえば、URLです。URLは、RSS上ではitem要素中のlink要素として格納されています。よって、このコンボボックスから、今回は「item.link」を選びます。
 ちなみに「件名でフィルタリングしてもいいのではないか?」という方もいらっしゃると思います。もちろんその通りで、その場合には「item.title」を選んで下さい。ただ、今回作るのがキーワードによるブログ検索であることを考えると、違うページであってもたまたま同じ件名をつける事はありえるかもしれません。

 さて、Uniqueモジュールをアクティブにして、Debuggerを見てみましょう。重複項目は削除されているでしょうか?
 私はここで、Yahoo!ブログ検索の罠に気づきました。
 なんと、Yahoo!ブログ検索が出力するRSSのitem.linkは、一旦Yahoo!を経由するようなURLが設定されていたのです。
 この為、実際には同じページであっても、Uniqueを使って重複を削除することができませんでした。この点については、Yahoo!ブログ検索のRSS中のitem.linkからジャンプ先のURLを抜き出して置き換える処理を加える、などが考えられます。これは結構面倒な処理になるので、今回省きます。

5. Sort: 時系列にソートする(新しいサイト順にする)。

 さて、ほとんど完成なのですが、現状のままだとFetch Feedの出力は「各ブログ検索単位」に固まって出力されています。これを、ブログ検索関係なしに、日付順に並び替えましょう。
 「Operators」カテゴリより「Sort」を使います。
 
 Sortモジュールを置いて、Sortの入力に、Uniqueの出力を繋いで下さい。

blogsearch_sort

 Sort byには、日付ということでRSSに多少詳しい方なら「item.pubDate」を選びたくなる方もいると思いますが、pubDateはRSS2.0の場合にはついていますが、RSS1.0の場合には更新日時は「dc:date」になります。これを吸収してくれるのが「item.y:published」です。これはYahoo! Pipesが自動的につけてくれる項目です。今回はこれを使いましょう。
 
 orderは、降順(descending)か昇順(ascending)かを指定します。今回は新しいものほど前に持っていきたいので、降順(descending)を選びます。

 全てのモジュールの設置が終わったので、Sortモジュールの出力を「Output」モジュールに繋いで終了となります。

 さて、以上で完成です。
 
 画面右上の「Save」を選んで、パイプを保存してください。名前はなんでもいいです。私は「Blog search」としました。
 
 保存すると、画面上に「Run Pipe」が表示されるようになります。これをクリックすると、パイプの実行画面に写ります。最初に設定したText Inputの入力欄がここに表示されています。ここに適当に値を入れてRun Pipeすると、結果が表示されるのが見えますでしょうか?
 この結果をRSSで取得して、RSS Readerなどに入れておくと、自分が追っているキーワードについて言及された最新ブログを追うことができますね。

 ブログ検索に限らず、例えばニコニコ動画やYouTubeのキーワード検索結果を加えたりなどして、自分だけの情報収集ツールを作るのも面白いかもしれません。
 
 以上、入門者の皆様の参考になれば幸いです。
— posted by chikura @ 01:28PM | LinkMe | Comment(0) | TrackBack(0)

ツッコミをどうぞ。名前とURLはオプションです。

Comment Form
名前:   URL: 文字色: cookie?
アイコンクリックで絵文字挿入
:)
:D
8-)
;-)
:P
:o
:(
(TT)
):T
(--)
(++!)

←メールアドレスを入力しておくと新たなコメントがついた際に通知します:
        
あわせて読みたい