Yahoo! Pipes V2エンジンへの移行 - Fetch Page モジュール

本日、以下のツイートで Fetch Page モジュールが V2 エンジンでうまく動作しないことを教えていただきました。

@toshiya240 それよりもヤバいのがv2だとFlickr2HTMLでDropboxのページをFetch Pageで取ってこれないです。これができなくなるとAppHtmlとかもどうなるのかって心配…。 2011-06-26 17:52 via Twitter for Mac oʇı ıʞnʎoɯoʇ
feelingplace

実際に試してみると…
確かにテンプレートの HTML が読み込めません(>_<)

原因を調査してみたところ、HTML として無効な要素があると全体を読み込まないようになっているようです。

具体的には、たとえば a タグの href 属性に '$' が含まれていると NG です。

取り急ぎ回避策を検討しましたのでシェアします。

回避策その１ - あくまで Fetch Page モジュールを使用して Pipe 側に回避用コードを追加する

1. テンプレートHTML 中の '$' を削除する。
2. Fetch Page モジュールで Pipe 内に読み込んだ後で HTML を文字列として編集する。

Pipe への読み込み後の編集内容

以下のイメージです。

編集内容は以下の通りです。

1. item の要素を指し示すようにするために '{' の前に '$' を付加する
   (上図の Regex モジュールの一つ目のルール)。
2. Yahoo! Pipes が a タグの href 属性などに読み込み元ファイルの URL を補完しているので削除する
   (上図の Regex モジュールの二つ目のルール)。

回避策その２ - Fetch Page モジュールの替わりに Fetch CSV モジュールを使用する

こちらは PicasaHtml でやっていることです。

まず、テンプレートファイルを以下のように、説明文とテンプレート一つにつき一行の形式に書き換えます(ファイルの拡張子はわかりやすくするために csv にしておいたほうがよいでしょう)。

Flickr2HTMLの設定ファイルです。
設定できる予約語は以下の通りです。

${pageURL} 画像ページURL
${title}　画像タイトル
${username}　ユーザー名
${imgURL}　画像URL
${userURL} ユーザーURL

サイズ接尾語は以下の通り。
s small square 75x75
t thumbnail, 100 on longest side
m small, 240 on longest side
- medium, 500 on longest side
z medium 640, 640 on longest side
b large, 1024 on longest side*
o original image, either a jpg, gif or png, depending on source format

拡張子は以下の3種類。
jpg
gif
png

サイズ接尾語と拡張子を組み合わせて${img_URL}の後に続けてください。
例
http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}.jpg
http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[mstzb].jpg
http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{o-secret}_o.(jpg|gif|png)

=====
<p><a href="{pageURL}" title="{title} by {username}, on Flickr"><img class="flickr_photo" src="{imgURL}.jpg"  alt="{title}"/></a><br /><cite class="flickr_photographer"><img src="http://farm4.static.flickr.com/3329/favicons/72157601614001242_7730.png" width="16" height="16" alt="flickr.com" class="favicon"><a href="{pageURL}">{title}</a> Photo by <a href="{userURL}">{username}</a></cite></p>
<a href="${pageURL}" title="${title} by ${username}, on Flickr"><img class="flickr_photo" src="${imgURL}.jpg" width="192" alt="${title}"/></a>
<a href="${pageURL}" title="${title} by ${username}, on Flickr"><img class="flickr_photo" src="${imgURL}.jpg" alt="${title}"/></a>

上記の例では、説明文が 30 行ありますので、Fetch CSV に対して最初の 30 行をスキップするように指定します(Skip the first 30 rows)。

出力のカラム名を Fetch Page に合わせて 'content' にするとよいでしょう。

あとがき

いずれにしてもテンプレートファイルを書き換える必要があります。

テンプレートファイルを書き換えずに Pipe 側で対処することができないこともありませんが、 パイプの処理が理解しにくくなってしまうのでおすすめできません。

V2 エンジンは互換性という点で思った以上に厄介かもしれませんね。

関連記事

loading..