普通のサラリーマンのiPhone日記iPhoneに魅せられた普通のサラリーマンの日々の生活を綴ってます。早くこのマニアックなBlogからは卒業したいな...(;^ω^)久しく時間が空いちゃいましたがYahoo!Pipes講座を再開します(・∀・)!過去の講座は以下を参考にして下さい。講座08(Dapper情報の取得、FetchPage)スクショの引っこ抜き方ですが、Dapper経由にした方が簡単なのでは?と最初は思っていたんですけど、iTunes情報のスクショって画像のURLだけ分かっても片手落ちだったんです。縦なのか横なのか?その情報はIMGタグのclass属性に記載されてます...。HTMLタグをまんま抜き出せないとダメ。Dapperはタグの属性は抽出できません。いうことで、講座09ではFetchPageを使ってYahoo!Pipesのみでスクショを取得する方法をご紹介します。́ー`)ノ長らく空いたので全体像を示してみる...このPipes講座は、AppHtml(旧バージョン)をどうやって作ったのか、順番に説明しつつPipesの理解を深めるという意味合いで連載してます。各連載で作ったPipeがどう繋がっているのが、全体像が欲しいという声もあったので先に明示しときます。どの講座がどういった役割でAppHtmlの構成要素になっているかを図で表現してみました。これまで作ってきた講座のOutputをうまく組み合わせることでAppHtmlが完成する訳です。́ー`)ノiTunesのスクショのHTMLを分析する引っこ抜く対象であるiTunesの情報(HTMLソース)を見てみます。ソースは長いんですがスクショの部分は上記です。探し方はChromeならば右クリメニューに入ってる「要素の検証」FirefoxならばFirebugのAddonを使っての「要素の調査」で該当箇所を探します。このソースから分かったことは以下の点。※注意!!iPhoneスクショ群とiPadスクショ群の間にはDIVタグ終了が連なる各スクショの前には必ずDIVタグ「class=”lockup”」が入ってるiPhone用のスクショのIMGタグには「alt=”iPhone....”」が入ってるiPad用のスクショのIMGタグには「alt=”iPad....”」が入ってるスクショが縦ならばIMGタグには「class=”portrait”」が入ってるスクショが横ならばIMGタグには「class=”landscape”」が入ってるということでこの法則性を使って(10枚でも良かったけど)最大5枚のスクショを取得していこうと思います。ここで注意点ですが、上記の「metrics-loc」属性ですが、最近のiTunesウェブから登場した属性みたいで、昔のはついてないみたい。ここ最近iTunesウェブが段階的に変更されていて決め打ちのマッシュアップは危ないということを痛感しました。古いほうも新しい方も同じルールになってる部分だけ使ってスクショを抜き出そうと思います!具体的には青字の法則を使ってPipeでスクショを抜き出していきます。講座09で作るPipeのゴールiTunesのURLと画像サイズを入れるとスクショのセットを返すPipeを作ります。画像サイズの指定はiPhoneの縦スクショのサイズを指定し、横スクショはPipe内で計算。iPadスクショはiPhoneスクショとの大きさの比率を指定するようにしました。「url」iTunesのURL「imagesize」iPhoneの縦スクショのサイズ(px)「ipadrate」iPadスクショのiPhoneスクショと比較した場合の比率Pipe実行後の結果は、Pipeのデバッガーに「image1」から最大で「image5」までのスクショタグをセットするところまでとします。実は、アプリによってはスクショが1枚しか無いものも存在します。その場合には「image1」だけセットされて「image2」から「image5」までは何もセットされない。このようにしたいと思います。1回の取得で5枚?5回の取得で5枚?この部分、実は概念的な部分なんですけど、超重要なのでしっかりと説明しておきます。Pipeは複数件の結果が返ってきた場合、結果も複数件になります。今回は1回の取得で結果を「image1」から「image5」にセット、1件の結果として返したいのです。そんなことできんのか?できるんです!その為に今回は2つのPipeを組み合わせて結果を取得するようにしました。子供のPipeでスクショを複数件取ってくる。親のPipeで、子供の結果を「image1」から「image5」までにセットする。子供の結果が3件だった場合「image4」と「image5」はセットされますが空がセットされるので、結果的に「image1」から「image3」までの結果が1回で返ります。具体的に作ってみましょう!最初に子供のPipeから作ってみる子供のPipeは「講座09-sub」という名前にしました。子供のPipeは親から以下の値を引き継ぎ、結果を返します。結果はスクショの枚数分の件数を返します。「url」iTunesのURL「iPhonePortrait」iPhoneの縦スクショのサイズ(px)「iPhoneLandscape」iPhoneの横スクショのサイズ(px)「iPadPortrait」iPadの縦スクショのサイズ(px)「iPadLandscape」iPadの横スクショのサイズ(px)完成した子供のPipeは以下の通り。講座09-sub(ScreenShots)手順1(URLInput、FetchPage)入力値であるiTunesのサイトを見にいって特定条件でソースの一部分を取得。delimiter(区切文字)を設定して繰り返しのHTMLを複数の結果に分割します。Page」を選択し、配置します。「url」にはiTunesのURLが入ります。デバッグしながら進めたいのでTextforceのURL「http://itunes.apple.com/jp/app/textforce-dropbox-text-editing/id396444947/?mt=8」をDebug欄に入力します。Pageですが、ここでiTunesスクショのHTMLの法則をそのまんま指定していきます。URLには先のURLInputで入力した値を連結。class=”lockup”>」を指定。この条件に最初にヒットした場所から、toに指定する「</div></div>」までのHTMLソースを抜き出します。この時点でデバッグを見てみると分かるのですが、5枚のスクショのHTMLがひとつのitem.contentの中に入ってるはず。この5枚を5つのデータに分解するのがdelimiterの設定になります。class=”lockup”>」を指定するとこのキーワードが登場する度にデータを分割してくれます。結果は以下のようになるはず。上記を見て分かることは、ひとつのHTMLソースが5件のデータに分割されたってこと。分割された個々のitem.contentを見ると上から順番にスクショが収まってます。手順2(NumberInput、StringBuilder)次にスクショのIMGタグをいじって画像サイズ(width属性)を指定する為の準備をしておきます。画像には4種(iPhone縦、iPhone横、iPad縦、iPad横)があるのでそれぞれのwidthタグを作ります。手順1のデバッグ内容でalt属性があり、そこでiPhoneなのかiPadなのか分かります。その後にclass属性があり、縦か横かが分かります。alt属性でiPhoneなのかiPadなのかが分かるclass属性で縦なのか横なのか分かるIMGタグにwidthも加えた値をセットする為、NumberInputで指定された数字とStringBuilderを使って予め文字列を作っておきます。Builder」を選択し、配置します。