なんだか小さな船で広い海へ漕ぎ出してしまったかのように受講を始めたYahoo!Pipes講座も9回目を迎え今回も勉強させて頂きました。今回のテーマはiTunesからスクリーンショットを引っこ抜く！という事です。
まずはiTunesのスクショのHTMLの分析です。講師のブラウザと違うのですがSafariですとメニューバーの表示からソースを表示させます。このソースから法則性を見い出しPipesでスクショを抜き出すそうです。例えば 各スクショの前には必ずDIVタブclass="lockup"が入っている。とかスクショが横ならIMGタグにはclass="landscape"が入っている。というような事です。これらのデータをもとにiTunesのURLと画像サイズを入れるとスクショを返すPipesを作るのが今回の目的だそうです。こうやって復習すると何をやったのか少しだけ理解出来ますね。
次に このPipesはスクショの取得を一回で5枚取ってくる仕様になるそうで そのために２つのPipesを組み合わせて作るそうです。サブのPipesで複数のスクショを取ってきてメインのPipesでそれをイメージ 1〜5にセットして一件の結果として出力するそうです。う〜む。。。ムズカシ
◆とりあえずサブのPipesで
- まず[URL Input]でiTunesのスクショのHTMLをそのまま指定して[Fetch Page]のdelimterでこれを分解します。
- 次に画像サイズを指定するための準備をします。iPhone縦 横 iPad縦 横のwidth属性の指定をする部分ですね。
- 1と2を[Regex]で連結してシンプルなalt属性とclass属性のwidth属性付きのHTMLが出来ました。
- ここまでをサブのPipesとして一旦保存します。
◆メインのPipes
1.[URL Input]と[Item Builder]で完成直前の状態を作ります。
2.ここで[NumberInput]と[SimpleMath]で以下を計算させます。
▪ 「iPhone縦幅」＝「iPhone縦サイズ」
▪ 「iPhone横幅」＝（「iPhone縦サイズ」÷2）×3
▪ 「iPad縦幅」＝「iPhone縦サイズ」×「iPad比率」
▪ 「iPad横幅」＝（（「iPhone縦サイズ」×「iPad比率」）÷2）×3
3.準備が整ったのでメインとサブを合体させます。[Loop]と[MyPipes]で結果を出し[Rename]でcontentをimage1〜5に着替えます。
4.お終いに[Regex]でitem.loopを空にして今回は完成です。
