[Pipes] Yahoo! Pipes講座08（Dapper情報の取得、FetchPage）

Yahoo! Pipes講座の8回目。過去の講座はこちら。再びPipeの話に戻ります。

• [Pipes] Yahoo! Pipesを勉強したい方へ
• [Pipes] 講座01（FetchFeed、Sort）
• [Pipes] 講座02（Text/URLInput、Yahoo!Search、Filter、Regex）
• [Pipes] 講座03（String/URLBuilder、FetchData、Rename）
• [Pipes] 講座04（MyPipe、Union、Unique）
• [Pipes] 講座05（ItemBuilder）
• [Pipes] 講座06（Loop）
• [Pipes] 講座07（Dapperの使い方）

講座08では、講座07で作ったDapper情報をPipeにて抽出する部分を説明します。

実はこの講座は09からボリューム的にも難度的にも劇的にややこしくなります。その準備も兼ねて、講座08では操作の説明を一部省略しながら進めてみます。逆に、何故その定義を書くのかに比重をおいた説明にしていく予定です。

Dapper用URLを作成する

Dapper情報を呼び出す場合、以下のURLが使えることを講座08で学びました。このURLの中で、iTunesリンクに相当する部分をPipeで作り、URLを完成させます。

手順1（Text Input、Item Builder）
最初にすべきこと。Pipeの入力パラメータを設定します。URL Inputでも良いのですが、すぐにDapper用にURLを加工することもあり、Text Inputとしました。

ライブラリから「Text Input」と「Item Builder」を選択し、配置します。

Text InputにはiTunesリンクを指定します。今回も「Textforce」のURLにしてみましょう。「http://itunes.apple.com/jp/app/textforce-dropbox-text-editing/id396444947?mt=8」です。DefaultとDebugに同じ値を入れておきます。

Item Builderの左辺は、Text Inputと紐付け、右辺は「url」と指定します。こうすることで、以降のモジュールでは、item.urlとしてText Inputの値を扱えるようになります。Regexの左辺で「item.url」を指定したかったので、Item Builderを噛ませてます。

手順2（Regex）
DapperのURLにて表現されるiTunesリンクは、法則に基づいて文字が変換されています。これは講座05でLinkshareリンクを作成する時にも使った法則と同じです。

ということで「item.url」を変換していきます。Linkshareの場合は変換を2回噛ましましたが、今回は1回でOKです。「: → %3A」「/ → %2F」「? → %3F」「= → %3D」「& → %26」これらの変換をしていきます。

ライブラリから「Regex」を選択し、配置します。

「?」はRegexのreplace欄の予約語なのでバックスラッシュをお忘れ無く。

次に、変換されたiTunesリンクの前にDapperの固定URLをくっつけます。

「^」は文頭という意味。文頭に「http://open.dapper.net/transform.php?dappName=iTunesInformation&transformer=HTML&applyToUrl=」をくっつけます。URLで「iTunesInformation」という箇所があります。この部分は、皆さんが講座07の宿題で作ったDapper名にしても良いです。お好みでどうぞ。

ちなみにDapperのURLにはユーザーIDの指定がありません。つまり、定義名は、ユーザー毎ではなく全ユーザーで一意じゃないとダメということが、このことからも理解できるかと思います。講座07の復習です。

以上までが、DapperのURLを生成するまでのPipeになります。

Dapper情報の取得

URLが完成したので、いよいよDapper情報をPipeに取り込みます。

手順3（Loop、Fetch Pageモジュール）
ライブラリから「Loop」そして中に「Fetch Page」を選択し、配置します。

「Fetch Page」は本講座では初めて使うモジュール。URLに指定したWebページ（≠RSS）を取得することができます。「Cut content from」と「to」には、HTMLタグ等々を記載すると、Webページの特定部分を切り出して取得することができます。

切り出しの部分。ここ超重要です！

通常、Webページにはサイドバーだとか色々なものが付与されてて記事の部分は、Webページの中の一部分のみだったりします。そんな時に「Cut content from」と「to」を使って記事部分だけを切り出す…といったことをしていく訳です。

「PipeでRSSの一部配信フィードを全文配信にする」ことも、同じようにできます。一部配信の「item.link」から元ページの記事部分を「Loop」と「Fetch Page」で取得してくる。こうやって作ったRSSは、全文配信フィードになるのです。

と、色々書きましたが、今回取得するDapper生成のHTMLは構造が超シンプルなので、切り出しをせずに、全部持ってくることにします。

尚、説明を省きましたが「Split uning delimiter」は、アプリ一覧のようなページを見た時に、アプリ毎にデータを分割したい時に使います。私は使ったことありませんけど…。

「Loop」の設定は「emit」の「all」にします。これは、前の値がどうあれ、結果を全てLoopからの結果に置き換えるという意味です。前の値は「url」だけなんで、消しても良いと判断し「emit」を使うことにしました。

「Loop」を選択し、デバッガーで挙動を確認してみます。

「item.content」に値が格納されています。Webページをまんま取得してきたのが分かります。Yahoo! Pipesは、HTMLデータを取得してきた場合、「html」と「source」のそれぞれを見ることができます。上記は「html」ビューになります。

上記が「souce」ビュー。HTMLのタグがそのまんま記載されてます。

Dapperからの取得データは全て「item.content」に入っているので、この中のデータを切り出して「appname」や「desc」といったitemに振り分けていけば、後々、そのitemをPipe内で使える。それこそが、今回目指すべきゴールです。

取得したHTMLをItemに切り出す

「item.content」の中のデータを切り出してitemに格納していきます。切り出しにはRenameモジュールとRegexモジュールを使います。

手順4（Renameモジュール）
ライブラリから「Rename」を選択し、配置します。

「item.content」を切り出したいitem分だけコピーします。appname、desc、sellersite、devsite、descnew、itunesurl、univ、price、category、pubdate、version、lang、seller、moveos、appsipe。以上の15項目。

そして最後は「item.content」をdescriptionに変更しておきます。

descriptionにしておけば「Run Pipe」時に中身として表示されます。と言いつつ、このPipeでは、descriptionは以降は使わないのでやらなくても良いですけどね（；^ω^）

手順5（Regexモジュール）
講座07で少し見ましたが、Dapperで生成されたHTMLは構造がとてもシンプルで、データが切り出しやすくなってます。HTMLのsouceを眺めて確認して下さい。

「souce」をテキストエディタにコピーして確認すると分かりやすいです。

Dapperで定義した項目名と実体となる値が、非常に分かりやすい構造でHTML化されていることが分かります。分かりやすいということはPipeで抜きやすいということ。それぞれのitem毎に目的のデータを切り出していきます。

ライブラリから「Regex」を選択し、配置します。

上記が切り出し部分のRegex。すっごく長い記載ですが、やってることは単純です。「item.price」を例に見てみます。使ってる正規表現は「.*」のみ。

「price</td><td>」で「souce」を検索すると一撃でヒットするはず。そのヒットする場所より前を全て空にする。続いて「</td></tr>」でヒットする箇所以降の全てを空にする。そうすることでpriceの中身を取得することができます。

これも「souce」をテキストエディタにコピーして検索すると分かりやすいです。

Regexモジュールは上から下に評価していくので、どういう順番でreplaceさせていくのかはむっちゃ重要です。今回の2行の手順を参考にして下さい。

ちなみに「gsmi」のオプションですが、「s」のみチェックを付けてます。「s」はデータに改行が含まれていようと1行として扱うという意味。HTMLには改行も含まれているので、全体を1行と見なしてsouce全体に対して、このRegexを適用する。

チェックを入れないと最初の改行までを対象としたRegexになっちゃいます。そうなると折角のreplaceが効きません…。試してみると分かるはず。

以上、priceの例を参考に、全てのitemに対して2行ずつ、同じことをしてみましょう。終わったら、Regexを選択し、デバッガーで確認です。

無事に切り出せたでしょうか？ ここで注目なのが、sellersite、itunesurl、category、devsiteのitem。これらのitemは、HTMLになってます…。AppHtmlで使うのはURLだけなのでこれらは後から更に加工することにします。

更に加工してitemを完成させる

ちょっと話は変わりますが、取得したアプリがiPhone用か、iPad用かは、どこで区別したら良いのか…。AppHtmlは、画像サイズをiPadのみのアプリの場合だけ大きくしてます。つまり、Pipeの中でiPhone用なのか、iPad用なのかを判別しているのです。

この判別用に「os」というitemを作ってます。「os」は「moveos」の値を参考に「iPhoneという単語が含まれていたならiPhone用」、「iPhoneという単語が含まれておらずiPadという単語が含まれていたならiPad用」として判別しています。

この「os」というitemの作成も含め、手順5までで作成したitemを仕上げていきます。

手順6（Rename、Regexモジュール）
ライブラリから「Rename」と「Regex」を選択し、配置します。

上記が完成したもの。以下、それぞれの変換の説明をしていきます。

item.os
まずはRenameにて「item.moveos」を「os」にコピー。次にRegexにて「.*iPhone.*」でiPhoneという単語がmoveosのコピーに含まれているかチェック、存在するなら「iPhone」をセット。もし最初のが空振りしていた場合、今度は「.*iPad.*」でiPadという単語が含まれているかチェック。存在するなら「iPad」をセットします。

item.sellersite
HTMLになってしまっている為、タグを取り除いてサイトのURLだけにします。「.*href=”」までの前半部分を空にする。その後、「”.*」以降を空にする。残ったのはサイトのURLだけになる。URLのみ抜き出す王道パターンです。覚えておくと良いかも。

item.devsite
item.sellersiteと同様の方法でサイトのURLだけにします。

item.itunes
item.sellersiteと同様の方法でサイトのURLだけにします。但し、iTunesのURLをデバッガーで見ると「mt=8#」の部分「#」が邪魔。なので「#”.*」を空にするとしました。

item.category
こちらはリンクじゃなくて文字だけ取りたい。ということで「.*”>」として文字の開始位置までのタグを空にする。次に「</a>」を空にする。このやり方は、リンクの文字だけ抜き出す王道パターンです。覚えておくと良いかも。

item.price
前にどなたかに円マークがバックスラッシュになってしまうと指摘を受けたことがあり、半角の円は、各自の環境で見え方がことなるってことで、それ以来、半角の円マークは止めて全角の円マークを使ってます。「¥」を「￥」に変換します。

item.version
iOS4になってから、バージョンに「（iOS 4.0 テスト済み）」と記載されるようになりました。これ実はうざい。なので取り除いておきます。

item.title
今のまんまだとタイトルは「0」なので格好良い名前に変更しておきます。「.*」で全てを選択し、「${appname} ${version}（${price}）」と指定します。これで「アプリ名＋バージョン＋値段」というタイトルができあがります。

item.descnew
textforceのアプリ検索ですと「descnew」は取得できるのですが、何らかの理由で他アプリはdescnewが取れないケースがあります。その場合、手順5の「.*descnew</td><td>」がヒットせず、descnewにはDapperのHTMLがまんま残り続けます。

取得できなかった場合、HTMLがまんま残るので、元々のHTMLにあった「Dapp:」という記載が残ります。この法則を利用し、「Dapp:」があるなら取得できなかったと判断し、descnewというitemそのものを空にして抹消するようにしてます。

以上、駆け足でしたがRegexの意味は分かりましたでしょうか？

結果をPipe Outputへ紐付け、Pipeを完成させます。デバッガーで確認してみます。

別のアプリのリンクで試してみても面白いです。一番最初のText InputのDebug部分に別のアプリのiTunesリンクを入れて、結果をデバッガーで確認してみましょう。きちんとそのアプリの詳細情報が取れるようになりました (・∀・)

完成したPipeはこちら。

• Pipes: 講座08（Dappter）

あとがき…

今回は難しかったかもしれません。講座08は、操作方法というよりは「何を導きたいか？」によって色々な手段を駆使し、「どう考えて」目的を達したかを主眼に置いた書き方にしてみました。講座09以降は、更に難度があがる予定です…。

次回の予告をしておきます。

今回、Dapperでは画像情報は一切取得していません。それにはいくつかの理由があります。結論から言うと、Dapperではできなかったからです。

• アイコン画像がDapperのマウス操作でどうしても取得できなかった…
• スクショ画像はDapperで取れるのですが片手落ちで使えなかった…

上記の中で特にスクショ。これがやっかいでして、実はURLだけ分かったらOKか？というとそうではなく、縦画像なのか、横画像なのかといったIMGタグの属性まで取得しないといけなかったのです。タグの属性はDapperでは拾えない…。なので断念しました。

次回の講座09ではDapper経由ではなく、直接iTunesのサイトから画像を引っこ抜きます。そして、画像のサイズを、iPhone縦用、iPhone横用、iPad縦用、iPad横用の4パターンに分けてIMGタグを作っていきます。iTunesのサイトには最大でスクショが5枚あります。それら全てを引っこ抜きたいと思います。

乞うご期待！

ちなみにアイコン画像は、講座10で説明します。

全般を通じて、こうやって欲しいとか要望があれば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との連携）

講座09のPipeボリュームは相当です…。どうやって説明しようかな…。

-

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

Similar Posts:

• [Pipes] Yahoo! Pipes講座06（Loop）
• [Pipes] Yahoo! Pipes講座07（Dapperの使い方）
• [Pipes] Yahoo! Pipes講座04（MyPipe、Union、Unique）
• [Pipes] Yahoo! Pipes講座10（良く使う正規表現まとめ）
• Yahoo! Pipes講座のまとめページを作りました♪