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はこちら。
あとがき…
今回は難しかったかもしれません。講座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
[...] [Pipes] Yahoo! Pipes講座08(Dapper情報の取得、FetchPage) | 普通のサラリーマンのiPhone日記 [...]
[...] [Pipes] 講座08(Dapper情報の取得、FetchPage) [...]
[...] [Pipes] 講座08(Dapper情報の取得、FetchPage) [...]
はじめまして、pipesを使ってアンテナサイトを作成したいと考えている者です。
pipesの管理画面上に「Pipe Web Address」という項目がありますが、これがRSSのURLになっていると思います。
私の作成しているpipesの場合「http://pipes.yahoo.com/pipes/pipe.info?_id=b6de7d0486e8ae96c30b26c60b635896」がRSSになっています。
ここで質問させていただきたいのですが、上記のRSSを読み込むと、pipesに登録している各サイトのページにジャンプすることになります。
RSSリーダー⇒各登録サイト
ただ、アンテナサイトを作成しておりますので、間にアンテナサイトを挟みたいと思っています。
RSSリーダー⇒アンテナサイト⇒各登録サイト
ですから、「http://pipes.yahoo.com/pipes/pipe.info?_id=b6de7d0486e8ae96c30b26c60b635896」の転送先を変更でも出来ればよいのですが、方法をご存知ではないでしょうか?アンテナサイトを作るうえで、この点に躓いております。
ご存知でしたら、教えていただけると助かります。