普通のサラリーマンのiPhone日記 Rotating Header Image

[Pipes] Yahoo! Pipes講座01(FetchFeed、Sort)

Yahoo! Pipes講座の1回目。前振りのエントリーはこちら。

今日はYahoo! Pipesを初めて触れる方々の為に、アカウント作成から実際に使ってみるところまでを実践してみます。この講座の連載の最後には、ブックマークレット「AppHtml」の全容が分かるようにしたいと思ってます。

進め方としては、マッシュアップされて動いている「生の姿」を見ながら、つまり「結果」を共有しながら、私自身が何故そうしたのかとか、裏話を述べていく予定です。では、早速ゴー。第1回は、ベテランの方はスルーで良いかも。

アカウントの作成

Yahoo! Pipesは、Yahoo.comが提供するサービスで、開発環境や実行環境の全てがWeb上で操作できる。つまり、PCにツールとか入れなくても良く、いつでもどこでも触れるサービスなんです。最初にすることは、アカウントの作成っす。

こちらのサイトの右上にある「Join Now」をクリック。

  • 名前と性別と誕生日と国と郵便番号を入れる。
  • 新しく作るYahoo!のIDとパスワードを入れる。
  • パスワード忘れの為に代替メアドと質問回答を2つ入れる。
  • 画像に表示されてる文字を入力する。

これでOK。アカウントが作成されました。さっきのサイトに戻り、今度は「Sign In」をクリック。認証画面が出てくるので、IDとパスワードを入れればOK。

操作画面の説明

サインインすると最初に現れるのがトップ画面。

メニューで私が使ってるのは「My Pipes」と「Browse」と「Create a pipe」だけ。「My Pipes」は自分が作ったPipeの一覧画面。「Browse」は第三者のPipeを真似たりする場合に使う検索画面。「Create a pipe」はいきなりPipeを作る編集画面です。

画面の見方を説明しときます。
まずは「My Pipes」と「Browse」。見方はほぼ一緒です。

一覧化されてるのが過去に自分が作ったPipe達。お気に入りには「★」を付けることもできます。Pipesタブの上のURLにご注目。自分が作ったPipeを人に公開する時のURLが書かれてるのですが、暗号みたいで分かりにくいと思います。この部分、実は編集できます。私は「http://pipes.yahoo.com/hiro45jp」にしときました。

一覧化されてるPipeのどれかにカーソルを持ってくとメニューが現れるんですが、過去に作ったPipesの挙動を試したり、再編集したり、削除したり、Publish(後述)したり、コピーを作ったりができます。良く使う機能なんで、これは覚えておいて下さいまし。

次、メインとなる「Create a pipe」。開発時にずっと付き合う画面です。

画面全体は、上(メニュー)左(ライブラリ)真ん中(キャンバス)真ん中の下(デバッガー)と4分割されてます。それぞれに概要は以下の通り。

上(メニュー)はPipe全体に対して行うコマンドが並んでます。使うとこだけ列挙。

  • 「untitled」クリックすると編集モードになり、Pipesに名前が付けられます。
  • 「Layout」作ったPipesの中身を整形して見やすくしてくれます。A型必須。
  • 「Save」その名の通り保存。作り途中でも定期的に保存しとくと安心です。
  • 「Properties…」はPipesに説明を入れる時に使う。仕上げ用です。

左(ライブラリ)はYahoo! Pipesで使えるモジュールが並んでます。これを真ん中(キャンバス)に並べて色々と編集することで目的のPipeが組み上がっていきます。正直、いっぱいありすぎて、良く分かりません。使ってるのだけ列挙しときます。

  • 「Fetch Feed」RSSフィードを取り込む。
  • 「Fetch Data」各種APIの結果をデータとして取り込む。
  • 「Fetch Page」Webページを取り込む。
  • 「Item Builder」自分でPipeデータに仕立て上げる時に使う。
  • 「Number Input」Pipeの外からの数字入力用に使う。
  • 「Text Input」Pipeの外からのテキスト入力用に使う。
  • 「URL Input」Pipeの外からのURL入力用に使う。
  • 「Filter」Pipeデータから不要なデータを除く時に使う。
  • 「Loop」Pipeデータを元に更に別のデータを取ってくる時に使う。
  • 「Regex」Pipeデータを加工する時に使う。正規表現が使える。
  • 「Rename」値の呼び名を変更したり、コピーしたりする時に使う。
  • 「Sort」Pipeデータの並び順を変更する時に使う。
  • 「Union」複数のPipeデータを合体させる時に使う。
  • 「Unique」Pipeデータの重複を除く時に使う。
  • 「URL Builder」Pipeの中でURLを組み立てる時に使う。
  • 「String Builder」Pipeの中でテキストを合体させる時に使う。
  • 「Simple Math」入力された値を計算する時に使う。
  • 「Favorites」「My pipes」自分が作ったPipeを使う時のタブ

たくさんありますが「AppHtml」を作る時に使ってるのは上記くらい。これらのモジュールを覚えるだけでも、相当なことができるはず。もっと色々とありそうですが、この講座では割愛します。各モジュールの詳しい説明は、今後、説明していきます。

真ん中(キャンバス)は中身を作っていく場所。ここにどんどんモジュールを追加し、繋げていくことで目的のアウトプットを作っていきます。いくらでも詰め込むことができますが、私の場合は、見にくくなるんで適当に「Layout」ボタンを押して整形してます。

最後、真ん中の下(デバッガー)は、Pipeを作っていく過程で、適宜、今の状態がどうなっているのか、確認する為に使う場所。途中、途中でPipeのアウトプットが意図した通りになっているのか、ここで確認しながらステップbyステップで作っていきます。

Pipesを作ってみる

前振りがこのくらいにして、実際に作って動かしてみます。今回は第1回ということもあり、簡単な例のみにします。ただ、今回使ってるモジュールは「AppHtml」でも使ってるので、簡単な例とは言え、しっかりと抑えておいてもらえるとありがたいです。

完成系(講座01)は上記な感じ。例題は、私のblogのRSSフィードとどんぴさんのRSSフィードを合体して日付順に並び替え、Yahoo! Pipesを経由した新たなRSSフィードを作るという例。使うモジュールは「FetchFeed」と「Sort」のみ。

手順1
「FetchFeed」をモジュールから選択してキャンバスへドラッグ&ドロップ。URLの入力欄に私のblogのRSSフィード「http://iphone-diary.com/?feed=rss2」のURLを記載。

手順2
「FetchFeed」に「+URL」と書かれてる箇所がある。この「+」をクリックすると入力欄が増える。そこにどんぴさんのフィード「http://donpy.net/?feed=rss2」を追加。

手順3
「Sort」をモジュールから選択。左の入力欄は「item.pubDate」を選択。そして「descending」を選ぶ。「item.pubDate」には記事の配信日時が自動で入るんです。で、「descending」は大きい順という意味。つまり「私とどんぴさんのRSSフィードを合体して、配信日時の大きい順に並び替えをする。」ということを指定してます。

手順4
最後に「FetchFeed」と「Sort」と「Pipe Output」を繋げる。ちなみに「Pipe Output」のところにマウスを持っていくとデバッガーに結果が表示される。どんぴさんの投稿量はハンパ無いんで埋もれてますが、確かに私の記事も入ってます(笑)

手順5
メニューのところで「untitled*」になってるところを「講座01」とかに変更。「Save」をクリックすると「My Pipes」に現れるようになります。

結果を検証する

Pipeを作ってる最中はデバッガーを使って結果を検証してます。Yahoo! Pipesにおける結果確認のもう一つの方法は「Run pipe」してみること。実際にPipeを動かすとこんな風に見えるはず。「List」欄が新しいRSSフィードとして配信される情報になる。

良かった…。私の昨日の記事がどんぴさんの記事に埋もれてない(笑)

Publishする

Yahoo! Pipesは、開発環境だけでなく、実行環境も兼ね備えています。先ほど作ったPipeは、今のままだと作っただけ。実際に私やどんぴさんのサイトを巡回してくれません。巡回するには「Publish」というボタンをクリックする必要があります。

ちなみに「AppHtml」は「Publish」してません。だってRSSフィードじゃなくて、利用者が呼び出した時にだけ動くようにしてるから。「Publish」は裏で勝手に巡回して配信して欲しい!そんなニーズがあるPipeの時にだけ押せば良いのです。

一度「Publish」すると「Unpublish」というボタンに変わるので巡回を止めたい場合には、これで止めることができます。また、もし仮に「講座01」というPipeを再編集したとします。その場合、今「Publish」されてるのは、昔の「講座01」なので、再度「Publish」する必要があります。巡回の再設定です。

一度「Publish」したPipeを再編集すると今度は「Re-publish」というボタンが出てくるはず。「Re-publish」しないと前のまんまの巡回なのでご注意を。

RSSリーダーに登録する

完成して「Publish」したPipeを自分のRSSリーダーに登録します。RSSリーダーそのものの説明は割愛します。ここでは、Yahoo! Pipesからの登録方法のみ説明します。

やり方は簡単。上記のどっちかをクリックするだけ。

ちなみに「Get as RSS」を押してみた。Googleリーダー以外のRSSリーダーを使ってる人はこのやり方だと登録するRSSリーダーを選択できます。「購読」を押せば、自分が使ってるRSSリーダーヘ登録されます。

ここで「説明」のところに注目。「Pipes Output」とかって変な名前になってると思います。ここにPipesの中身の概要を入れたい場合は、Pipeの編集画面のメニューの「Properties…」にて説明をしっかり入れると良いのです。今回は割愛。

情報が配信される

情報が配信される時の注意点がいくつかあります。Yahoo! Pipesは、本家サイトがRSSで配信されてから、巡回し、それからPipeを作って配信します。つまり、経由してる分だけ、情報の鮮度が悪い。配信が遅いんです。そこは仕方ないのであしからず。

あと、本家サイトがYahoo! Pipesからのアクセスを拒否してる場合もあるんです。マッシュアップされたくないサイトが、防御の為にYahoo! Pipesからのアクセスをブロックするケースです。この場合は配信されません。そこも仕方ないのであしからず。

以上、第1回目は「AppHtml」とはかなーり遠い内容でしたが、Yahoo! Pipesの概要を掴むという目的でまとめてみました。本講座に関して、ご要望などありましたら、Twitterでもコメントでもご連絡下さいまし。

マッシュアップによって、iPhoneの可能性の幅を増やす!
これがテーマです。

あとがき…

目次が、前の告知と違うじゃねーか?とお気づきの方。はい、その通り。説明しやすいように適当に順番を組み替えて12回の構成を見なそうと思ってます。今のところの目次は以下の通り。前の記事もしれーっと変えてます(;^ω^)

  • 講座01(FetchFeed、Sort) ← 今ココ
  • 講座02(Text/URLInput、Yahoo!Search、Filter、Regex)
  • 講座03(String/URLBuilder、FetchData、Rename)
  • 講座04(MyPipe、Union、Unique)
  • 講座05(ItemBuilder)
  • 講座06(Loop)
  • 講座07(Dapperの使い方)
  • 講座08(Dapper情報の取得、FetchPage)
  • 講座09(NumberInput、SimpleMath)
  • 講座10(良く使う正規表現まとめ)
  • 講座11(MyPipeの可読性の向上)
  • 講座12(Javascriptとの連携)

-

タグ: Bookmarklet, Dapper, Google, hiroスタイル, Yahoo!Pipes

Similar Posts:

24 Comments

  1. [...] iPhoneに関する、はてなブックマーク新着情報です。 ?p=8492 [...]

  2. [...] Turn it on in Settings › Safari to view this website. ?p=8492 12月 25th, 2010 @ 09:22 pm › tyudon ↓ Leave a comment ?p=8492 [...]

  3. [...] [Pipes] Yahoo! Pipes講座01(FetchFeed、Sort) | 普通のサラリーマンのiPhone日記 [...]

  4. [...] [Pipes] Yahoo! Pipes講座01(FetchFeed、Sort) | 普通のサラリーマンのiPhone日記 今日はYahoo! [...]

  5. [...] [Pipes] Yahoo! Pipes講座01(FetchFeed、Sort) | 普通のサラリーマンのiPhone日記 (tags: pipes) [...]

  6. [...] pHtml」を作る時に使ってるのは上記くらい。これらのモジュールを覚えるだけでも、相当なことができるはず。” – [Pipes] Yahoo! Pipes講座01(FetchFeed、Sort) | 普通のサラリーマンのiPhone日記 [...]

  7. [...] [Pipes] Yahoo! Pipes講座01(FetchFeed、Sort) http://iphone-diary.com/?p=8492 [...]

  8. [...] [Pipes] Yahoo! Pipes講座01(FetchFeed、Sort) | 普通のサラリーマンのiPhone日記 [...]

  9. [...] [Pipes] 講座01(FetchFeed、Sort) [...]

  10. [...] [Pipes] Yahoo! Pipes講座01(FetchFeed、Sort) [...]

  11. [...]   WP SEO ブログ  Yahoo! Pipes講座  「Yahoo! Pipes」の超簡単な使い方  [...]

  12. [...] ◆ 普通のサラリーマンのiPhone日記 [Pipes] Yahoo! Pipes講座01(FetchFeed、Sort) [...]

  13. [...] さんの Yahoo!Pipes講座が、先日ついに始まった。 普通のサラリーマンのiPhone日記 Rotating Header Image /[Pipes/] Yahoo! Pipes講座01(FetchFeed、Sort) [...]

  14. [...] [Pipes] Yahoo! Pipes講座01(FetchFeed、Sort) Pipesに興味をお持ちの方は、こちらをじっくり読んで一緒に勉強しましょう! @hiro45jpさんには、Dapperを使うとPipesの世界が拡がるよーと教わったの [...]

コメントをどうぞ

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>