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

[Pipes] Yahoo! Pipes講座03(String/URLBuilder、FetchData、Rename)

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

前回はYahoo! Searchを使ったiTunesのリンクの取得でした。今日は、Google APIを使ったiTunesのリンクに挑戦してみます。前回のYahoo! Searchの結果と今回の結果は最終的には合体し、AppHtmlの検索結果として活用していくことになります。

だんだんと日本語が難しくなって恐縮ですが、お付き合い下さいm(_ _)m

Google APIの概要

正式にはGoogle AJAX Search APIというらしい。元々JavaScriptから利用することを前提にしたAPIのようです。APIの仕様は、ベースURLにパラメータをつけて呼び出すと結果がJSON形式で返ってくるらしい。はっきり言って宇宙語です…ヽ(;´Д`)ノ

とは言え、Yahoo! Pipesは、URLが扱えるし、結果もデータで取得できる。なので今回、使ってみることにしました。Yahoo! Searchとツートップで検索精度の向上を狙います。Google APIの入力書式と結果書式は、以下の通り。

ベースURL
「http://ajax.googleapis.com/ajax/services/search/web」

入力パラメータ
「q」検索条件(GoogleのWeb検索と同様に値をセット)
「v」APIのバージョンらしい(1.0で固定っぽい)
「rsz」結果の数を指定(デフォは4件、largeにすると8件)
「hl」どの言語環境で検索したいか(日本語なんでja)

結果データ
「GsearchResultCalss」GwebSearch(これ固定みたい)
「url」ヒットしたURL(ぶっちゃけこれだけ分かれば良い)
「unescapaedUrl」特殊文字を英数字に変換したURL(使わん)
「visibleUrl」ヒットしたドメイン(itunes.apple.comとか)
「casheUrl」GoogleのキャッシュURL(使わん)
「title」これもタイトルらしい(使わん)
「titleNoFormatting」タイトルが入るらしい(使わん)
「content」ヒットしたサイトの内容を抜粋(使わん)

AppHtmlからすれば、結果的にiTunesのリンクが取得できれば良いだけ。なので他の結果データはどうでも良く、結局のところ、使うのは「url」だけになります(;^ω^)

尚、Google APIの検索結果は最大で8件までなんです。つまり、お目当てのiTunesリンクを8件以内にヒットさせないとダメ。よって検索条件を工夫する必要があります。別の見方をすると、逆にノイズが含まれていたとしても8件で終わる。ここが嬉しかったりします。無制限にヒットしちゃうと処理速度に影響でちゃうので…。

Google APIをPipeで使う

Yahoo! Pipesには、URLを入力値にしてデータを取得してくる「Fatch Data」というモジュールがあり、これを使うことでGoogle APIが使えてしまいます。

APIにて指定する検索条件は「(アプリ名) site:itunes.apple.com/jp/app」とし、サイト絞込をした上での検索を行います。この条件で検索するとAppStoreの日本語サイトのアプリだけを検索し、ヒットしたサイトだけを返すことが可能です。

手順1(Text Input、URL Inputモジュール)
検索条件をPipeの外から指定できるようにText Input(=アプリ名を入れる)とURL Input(=サイト縛りの為)を使います。尚、GoogleAPIの渡す引数は、検索条件以外は固定でセットしようと思っている為、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(String Builderモジュール)
複数の文字列を組み合わせたり、文字列を加工したりするのに便利なモジュールが「String Builder」です。手順1の2つのパラメータを1つの文字列に結合します。

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

「+String」の「+」部分をクリックすると入力欄が増えます。今回は3つ欄を作ります。1つ目の欄には、Text Inputの値を紐付ける。2つ目には「 site:」の固定文字を設定。3つ目には、URL Inputの値を紐付ける。これで検索条件が完成しました。

String Builderモジュールを選択し、デバッガーで内容を確認してみて下さい。結果が、
「textforce site:itunes.apple.com/jp/app」であれば正解です。

手順3(URL Builderモジュール)
検索条件が完成したので、他の入力パラメータも合わせてGoogle APIのURLを作成します。URLを作成するには、「URL Builder」を使います。

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

このURL Builderは結構かしこいんです。「Base」のところにURLを入れると要素を勝手に分解してくれて「Path elements」や「Query parameters」を作ってくれます。試しに、今回使うGoogle APIの簡単なURLを指定してみます。

「http://ajax.googleapis.com/ajax/services/search/web?v=1.0&rsz=large&q=textforce&hl=ja」

上記がGoogle APIを使う場合のURLになります。

「v」には1.0を指定、「rsz」には「large(つまり8件の検索結果取得)」、「q」には「textforce」、「hl」は「ja(つまり日本語)」。これをブラウザ上で叩くとJSON形式のデータが返ってくるはず。とりあえず結果は放置。このURLの「q」のパラメータを適宜変えていけばデータ取得ができるということだけ覚えておけばOKです。

上記のURLをURL Builderの「Base」にコピペします。

じゃーん。上記のようになりましたでしょうか?

たまたま「Path elements」が入りませんでしたが、例えばURLの中で「/hogehoge」という「/」付きのURLがあった場合、「hogehoge」はPath elementsに入ります。

今回のGoogle APIを見ると…。「/ajax/services/search/web」ってのがあるんで、「Path elements」に入るかなぁと思ったんですが、どうやらGoogle APIに関しては、これらの部分は「Base」として認識されるようですね。まー、ほっといて大丈夫。

「q」の部分だけ、String Builderの結果と紐付けます。これで完成です。

手順4(Fetch Dataモジュール)
先ほどURL Builderで作ったURLを使っていよいよJSON形式のデータを取得します。データ取得は「Fetch Data」を使います。Fetch FeedはRSSフィードのURLが入力、結果がRSS。一方、Fetch DataはAPIのURLが入力、結果がJSON形式。違いに注意です。

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

URLは先のURL Builderの結果を繋げます。Path to item listとは、JSON形式の結果の中で、どの結果をPipe上の結果として扱うのか?という指定でしてGoogle APIだと「responseData.results」が固定値になります。

Fetch Dataモジュールを選択し、結果をデバッガーで見てみましょう!

なんか日本語が英数字に変換されてて変に表示されてますが、無事に取得してきてくれたようです。しかも8件きっちり。更に中身をデバッガーで見てみると「url」の部分にちゃんと「http://itunes.apple.com/jp/app」の結果が取れています。

見つかった課題と対処の方針

結果から考察するに、Fetch Dataに関しても、Yahoo! Searchと同様、(8件と言えども)ノイズを拾ってきているようです。「domo Todo」やら「じしんあった」やら。

Yahoo! Searchの時にはdescriptionに法則性を発見し、ノイズ除去に成功しました。同じようにGoogle APIの結果の「content」を見てノイズ除去できるか法則性を探ってみました。しかしながら….。法則が分かりませんでした(;^ω^)

ということでFetch Dataにおけるノイズ除去は断念。8件しか無いし、放置で。
今後の方針としては、以下のように考えます。

  • Yahoo! Searchはノイズ除去できた(但し結果は無制限の件数)
  • Google APIはノイズ除去できない(但し結果は8件が最大)

この事実を受け、無制限の件数になるYahoo! Searchがしっかりとノイズ除去できているのならば、Google APIのノイズ除去ができなくてもほっておこう。AppHtmlの結果取得の最後の最後の部分で、アプリ名のマッチングをして、出力するギリギリのところでノイズ除去すればいいや….。ってことにしました。

結果を整形する(Yahoo! Searchと同じ形式にする)

Yahoo! Searchの結果とGoogle APIの結果は、URLの値が微妙に違う。また、出力されるitemの名称もバラバラ。Yahoo! Searchは「link」、Google APIは「url」。

ということで、もし合体しても、このままだと後続を同じように処理できません。そこで、URLやitem名を、Yahoo! Searchの結果と合わせることにします。

手順5(Regexモジュール)
Yahoo! Searchで取得したiTunesリンクとGoogle APIで取得したiTunesリンク。よーく眺めてみると「%3F」と「?」、「%3D」と「=」が異なります。

  • Google APIのiTunesリンク
  • http://itunes.apple.com/jp/app/textforce-dropbox-text-editing/id396444947%3Fmt%3D8

  • Yahoo! SearchのiTunesリンク
  • http://itunes.apple.com/jp/app/textforce-dropbox-text-editing/id396444947?mt=8

    後々使うことを考えて、この結果も統一しときます。具体的には「url」の中の「%3F」を「?」に、「%3D」を「=」に変換してYahoo! Searchと同じURLにします。

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

    やることは簡単。「url」の中の「%3F」や「%3D」に合致する部分を「?」や「=」に置換します。その他の部分(gsmiとか)はとりあえずは放置。Regexについては、今後の講座で詳しく説明したいと思います。今は、少しずつ使って慣れていければ良いかと。

    Regexモジュールを選択し、結果をデバッガーで確認。無事に変換されてればOK。

    手順6(Renameモジュール)
    次にGoogle APIの「url」というitemを、Yahoo! Searchに合わせて「link」に変更します。itemの名称変更やコピーは「Rename」を使います。

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

    左側には、対象となるitem。右側には変更したいitem名称をセットします。真ん中の部分は「Rename」と「Copy As」が選べます。今回はRenameでしたが、実はCopy Asはめっちゃ今後使っていきます。ですので簡単なモジュールですが覚えておいて下さい。

    以上で完成です。Pipe Outputを選択して「link」というitemにiTunesリンクが正しくセットされていることが確認できれば今日は終わりです。

    完成系はこちら。

    あとがき…

    なんか、だんだんとマニアックで難しくなってきたかも知れません。ただ、私自身があんまり分かってなくても使えてしまっている。この事実は大きいっす。どの部分だけ抑えておけば大丈夫か。学ぶ上で、各自そんな取捨選択の場になってくれれば幸いです。

    今回の講座で、Yahoo! PipesはAPIも扱えることが分かりました。

    世に出回ってる色々なWebサービスが提供しているAPIをYahoo! Pipesで扱うことができるかも知れない。これは凄いことで、任意のAPIを使って情報をかき集め、マッシュアップすれば自分好みのAPIができちゃうってことなのです。凄いこっちゃ。

    次回は、Yahoo! Searchの結果とGoogle APIの結果を合体する部分を説明します。

    こうやって欲しいとか要望があれば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:

    12 Comments

    1. [...] [Pipes] Yahoo! Pipes講座03(String/URLBuilder、FetchData、Rename) | 普通のサラリーマンのiPhone日記 [...]

    2. [...] [Pipes] 講座03(String/URLBuilder、FetchData、Rename) [...]

    3. [...] [Pipes] 講座03(String/URLBuilder、FetchData、Rename) [...]

    4. [...] [Pipes] 講座03(String/URLBuilder、FetchData、Rename) [...]

    5. [...] [Pipes] 講座03(String/URLBuilder、FetchData、Rename) [...]

    6. [...] ◆ 普通のサラリーマンのiPhone日記 [Pipes] Yahoo! Pipes講座03(String/URLBuilder、FetchData、Rename) [...]

    7. [...] [Pipes] 講座03(String/URLBuilder、FetchData、Rename) [...]

    8. [...] [Pipes] 講座03(String/URLBuilder、FetchData、Rename) [...]

    9. [...] ◆ 普通のサラリーマンのiPhone日記 [Pipes] Yahoo! Pipes講座03(String/URLBuilder、FetchData、Rename) [...]

    コメントをどうぞ

    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>