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

[Pipes] Yahoo! Pipes講座06(Loop)

Yahoo! Pipes講座の6回目。これまでのエントリーはこちら。

前回のLinkshareリンク作成は、AppHtmlの肝のひとつでした。ただ、単体のPipeだったんで、今回は前々回までに作ってきたPipeと前回のPipeを繋げたいと思います。

Pipeに肉付けする

やりたいことは、講座04で作ったiTunesリンクの検索結果から、講座05で作ったLinkshareリンクを肉付けし、新たなPipe(講座06)を作ること。特に今回は、Pipeの中でも分かりにくいLoopを中心に説明していきたいと思います。

手順1(Text Input、URL Inputモジュール)
講座04に渡す入力パラメータを準備します。Text Input(=アプリ名を入れる)とURL Input(=サイト縛りの為)を使います。

ライブラリから「Text Input」を選び、キャンパスへドラッグ&ドロップします。

Text Inputは以下のように設定します。

  • 「Name」Pipe内で使う呼び名。「kwd」と入れる。
  • 「Prompt」入力値のラベル名。こちらも「kwd」と入れる。
  • 「Position」入力値の表示順番。「1」と入れる。
  • 「Default」入力値の初期値。「textforce」と入れる。アプリ名
  • 「Debug」Pipe内の初期値。Defaultと同じ値を入れる。

次、ライブラリから「URL Input」を選び、キャンパスへドラッグ&ドロップします。

URL Inputは以下のように設定します。

  • 「Name」Pipe内で使う呼び名。「url」と入れる。
  • 「Prompt」入力値のラベル名。こちらも「url」と入れる。
  • 「Position」入力値の表示順番。「2」と入れる。
  • 「Default」入力値の初期値。「http://itunes.apple.com/jp/app」と入れる。
  • 「Debug」Pipe内の初期値。Defaultと同じ値を入れる。

手順2(My Pipeモジュール)
「My Pipes」から「講座04」を選び、キャンパスへドラッグ&ドロップします。

デバッガーで確認してみましょう。「item.link」にiTunesリンクが入ってます。

手順3(Text Inputモジュール)
Linkshareリンクを作成する為に、Linkshareのサイトidを指定するText Inputを作ります。ライブラリから「Text Input」を選び、キャンパスへドラッグ&ドロップします。

Text Inputは以下のように設定します。

  • 「Name」Pipe内で使う呼び名。「id」と入れる。
  • 「Prompt」入力値のラベル名。こちらも「id」と入れる。
  • 「Position」入力値の表示順番。「3」と入れる。
  • 「Default」入力値の初期値。「サイトid」を入れる。無い場合は「DMY」。
  • 「Debug」Pipe内の初期値。Defaultと同じ値を入れる。
  • Loopモジュールの解説

    いよいよ、今日の肝となるモジュール「Loop」を説明します。Yahoo! Pipesは、上から下へ情報が流れていきます。講座04の結果で言えば、8件の結果が流れてきます。

    手順4(Loop、My Pipeモジュール)
    Loopモジュールは、Pipeの流れに+αの要素を加える時に使います。ライブラリから「Loop」を選び、キャンパスへドラッグ&ドロップすると、真ん中が空いてます。

    「Drop module/pipe from toolbol here」と書かれている部分にご注目。ここにライブラリの中から新たな情報を取得する為のモジュールを追加します。今回は「My pipe」タブから「講座05」を選択し、Loopの中に配置します。

    Loopは配置した「講座05」と連動して動きます。Loopに流れてくる情報を使って「講座05」の入力パラメータを指定(今回の場合はitem.linkとidを指定)すると、Loopの中で「講座05」が(結果が存在するだけ)繰り返し動きます。

    Loopの結果出力には2種の方法が指定できます。

    • 「emit」Loop出力が、既存出力を乗っ取り、完全に置き換わります。
    • 「assign」Loop出力が、既存出力に肉付けされます。

    「emit」と指定した場合には、既存の出力が講座05の結果に完全に置き換わります。デバッガーで見ると一目瞭然です。講座05の結果に置き換わっています。

    「assign」と指定した場合には、既存の出力に肉付けされます。肉付け時に何というitem名にするかは、Loop内で指定できます。今回の例で言うと「item.loop」です。

    Loopの結果出力が複数件存在する場合の挙動も指定できます。

    • 「all」結果を全件取得します。
    • 「first」結果を最初の1件だけ取得します。

    今回の例の場合、どちらにしても講座05の結果出力は1件なので分かりにくいのですが、デバッガーでの見え方の違いを確認してみましょう。「emit」の場合、今回だと「all」「first」のどちらに指定しようと見え方は変わりませんでした。一方、「assign」の場合、「all」と「first」でデバッガーの見え方に違いが出ました。

    上記は「first」の例。item.loopの直下にdescriptionが来ています。

    上記は「all」の例。item.loopの直下に「0」というitemが現れ、その下にdescriptionが来ています。もし、講座05が複数件ヒットした場合には「1」「2」….とヒットした件数分だけitemが追加されていきます。

    今回の例の場合「肉付けをする」そして入力パラメータに対して「講座05の結果は常に1件である」ことを考えると「assign」「first」とするのが正解です。

    今後の講座で「emit」を使う例も出てきます。何回かLoopモジュールを使うことになりますので、じょじょに慣れていきましょう。

    取得した値の加工(タイトルと中身の変更)

    Loopモジュールで肉付け(assign)すると結果がitemの奥深くになっちゃいます。なので、私の場合はLoopが終わった後は、必要なitemはRenameして1階層目に持ってきちゃいます。他にもRenameを使って、色々と結果をいじってみましょう。

    手順5(Renameモジュール)
    Pipeの結果で、外に現れるのはtitleやlinkやdescription。それ以外は、Pipe内のデバッガーで見ないとitemは認識できません。今後の為に結果を綺麗にしときます。

    ライブラリから「Rename」を選び、キャンパスへドラッグ&ドロップします。

    まずはitem.link(=iTunesリンク)を別名(=itunesurl)に変更します。
    次にitem.loop.description(=Linkshareリンク)を別名(=link)に変更します。
    item.linkは更に別名(=linkshareurl)としてコピーしておきます。
    最後にitem.linkの内容でdescriptionを上書きします。

    結果、デバッガーで見ると以下のように変更されてるはず。

    手順6(Regexモジュール)
    最後にLoopモジュールを使った残骸を掃除しときます。

    ライブラリから「Regex」を選び、キャンパスへドラッグ&ドロップします。

    「item.loop」の全て「.*」を「空」にします。

    以上で今回のPipeは完成です。

    あとがき…

    今回説明したLoopモジュールは、マッシュアップに不可欠なモジュールです。今回の説明でもし不明な点があれば、質問して下さいましm(_ _)m

    次回は、Yahoo! Pipeとはちょっと離れて、DapperというWebサービスを紹介します。Dapperを学ぶことは、Yahoo! Pipesを学ぶ上でも有益です。楽にPipeが作れるようになるからです。Dapperは、難しいと思われてる人もいるようですが、Yahoo! Pipesと一緒に使う用途だと、使い方は限られているので、その部分だけ説明します。

    こうやって欲しいとか要望があればTwitterやコメントにてご指摘下さい。今後のカリキュラムですが、またまた構成を入れ替えて以下のようになってます。

    • 講座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:

15 Comments

  1. [...] [Pipes] Yahoo! Pipes講座06(Loop) | 普通のサラリーマンのiPhone日記 [...]

  2. [...] [Pipes] Yahoo! Pipes講座06(Loop) [...]

  3. [...] [Pipes] Yahoo! Pipes講座06(Loop) ◆ 普通のサラリーマンのiPhone日記 [Pipes] Yahoo! Pipes講座04(MyPipe、Union、Unique) [...]

  4. [...] [Pipes] Yahoo! Pipes講座06(Loop) ソース投稿日 2010/12/31 20:57:48 Source: 普通のサラリーマンのiPhone日記 @ttachiコメント: 第6回! #macjp #iphonejp [...]

  5. [...] [Pipes] Yahoo! Pipes講座06(Loop) ソース投稿日 2010/12/31 20:57:48 Source: 普通のサラリーマンのiPhone日記 @ttachiコメント: 第6回! #macjp #iphonejp [...]

  6. [...] ◆ 普通のサラリーマンのiPhone日記 [Pipes] Yahoo! Pipes講座06(Loop) ◆ 普通のサラリーマンのiPhone日記 [Pipes] Yahoo! Pipes講座04(MyPipe、Union、Unique) [...]

コメントをどうぞ

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>