Happy-Go-Lucky: 2011-06

脱 Yahoo! Pipes その４ - PicasaHtml for MarsEdit

Pocket

時刻: 22:32 ラベル: Blog, Mac, MarsEdit, Pipes

第 4 弾は PicasaHtml for MarsEditです。

参考

ダウンロードはこちらより。

Yahoo! Pipes を使用せず Picasa に直接アクセスするようにしました。

最新情報はこちら: Happy-Go-Lucky: MarsEdit

脱 Yahoo! Pipes その３ - FlickrHtml to MarsEdit

Pocket

時刻: 9:00 ラベル: Blog, Flickr, Mac, MarsEdit, Pipes

第 3 弾は FlickrHtml to MarsEdit です。

参考

[MarsEdit] iPhoto から Flickr のセットを選択して写真へのリンクを貼り付けるサービスメニュー

ダウンロードはこちらより。

Yahoo! Pieps を経由せず Flickr に直接アクセスするようにしました。

脱 Yahoo! Pipes その２ - FavPaste for MarsEdit

Pocket

時刻: 9:00 ラベル: Blog, Mac, MarsEdit, Pipes, Twitter

はい。第 2 弾は FavPaste for MarsEdit です。

参考

WordPress ユーザ以外もツイートを貼りつけようゼ - FavPaste

ダウンロードはこちらより。

Yahoo! Pipes を使用せず、Twitter の API を直接使用するようにしました。

そのためか、検索精度が上がっているような気がします。

追記: 最新版はこちらです。

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

Pocket

時刻: 22:05 ラベル: Pipes

本日、以下のツイートで 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 側に回避用コードを追加する

テンプレートHTML 中の '$' を削除する。
Fetch Page モジュールで Pipe 内に読み込んだ後で HTML を文字列として編集する。

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

以下のイメージです。

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

item の要素を指し示すようにするために '{' の前に '$' を付加する
(上図の Regex モジュールの一つ目のルール)。
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 エンジンは互換性という点で思った以上に厄介かもしれませんね。

脱 Yahoo! Pipes - YouTubeHtml for MarsEdit

Pocket

時刻: 9:45 ラベル: Blog, Mac, MarsEdit, Pipes

Yahoo! Pipes V2エンジンへの移行のポイントでは Simple Math モジュールの右オペランドが 0 になってしまう件が解決できていませんでした。

とりあえず、以下のように Simple Math モジュールのオペランドを外部からではなく item から指定するようにすることで回避することはできました。

ですが、やはり Yahoo! Pipes の仕様変更(バグも含む)に対応(回避)していくアプローチは品質保証の観点から採用し難いものがあります。
品質保証とか言っていますが、そんなにカッチリやっていませんｗ

そこで、可能なものに関しては Yahoo! Pipes を使用しない実装に変更して行くことにしました。

今回は第 1 弾として YouTubeHtml for MarsEdit です。

ダウンロードはこちらより。

YouTubeHtml for MarsEdit については以下のエントリを参照してください。

YouTube の動画をブログに貼り付ける - YouTubeHtml

Yahoo! Pipes V2エンジンへの移行のポイント

Pocket

時刻: 22:55 ラベル: Pipes

Yahoo! Pipes のエンジンが V2 に移行するとのことで、あれこれと絶賛苦戦中の toshiya240 です。

Yahoo! PipesがV2エンジンへ変わります | Blog.IKUBON.com

最近、ご無沙汰しているYahoo!Pipesですが、V2エンジンへの移行スケジュールが発表されました。6月28日からはV2エンジンのPipeしか作成できないようになり、8月1日には全てのPipeがV2エンジンにアップデートするとのこと。

今回はとりあえず現時点でわかった V2 エンジンへの移行のポイントをシェアしたいと思います。

String Regex モジュールへの入力が URL だとエラーになる
Rename モジュールのリネーム元の扱いが変わった
Simple Math モジュールの割り算の結果が整数になった
Loop モジュール内の Simple Math モジュールに別のモジュールを接続すると 2つ目以降の item 処理時の右オペランドが 0 になる

String Regex モジュールへの入力が URL だとエラーになる

ユーザ入力の有無によって GET パラメータを加工する目的で、URL Builder モジュールから String Regex モジュールに接続するケースがあります。

V2 エンジンではこれがエラーになってしまうようです。

以下のように String Builder モジュールを間に挟むと回避できます。

なお、URL Builder モジュールの出力中のクエリパラメータの順番が V1 と V2 エンジンで違うようですので、パラメータの順番に依存した処理は注意が必要です。

Rename モジュールのリネーム元の扱いが変わった

Rename 元の項目名が 'content' になっている場合は、'content' まで指定するとリネーム(コピー)されなくなったようです。

'content' というのは擬似的な要素であり、同じノードに属性がある場合にパイプ中に現れるのではないかと推測しています。

たとえば、Picasa Web Albums Data API のレスポンス中に media:title というノードがあるのですが、パイプのデバッガで見ると media:title.content と media:title.type という項目がぶら下がっています。

media:title.content を item.title にリネームする場合に、V1エンジンでは以下のように指定します。

V2 エンジンでは media:title.content という指定では期待した動作にならないため、以下のように指定する必要があります。

上記でリネーム先の名前が異なるのは次項の影響です。

Regex モジュールで item.description が置換できない？

これはよくわからないのですが、デバッガで確認すると Regex モジュールで item.description の置換ができないようなのです。置換する項目名を item.desc など別の名前にすると置換できるので、item.description が特別扱いされていると推測します。

私は、一旦 item.result 配下にデータを集めて、Sub-element モジュールで取り出すようにして対処しました。

Regex モジュールで置換後に、Rename モジュールで項目名を変更してもよいでしょう。

Simple Math モジュールの割り算の結果が整数になった

V1 エンジンでは Simple Math の割り算の結果は少数になりましたが、V2 エンジンでは整数になるようです。

YouTubeHtml で動画の縦横比から HTML タグの width および height 属性の値を計算しているのですが、 V2 エンジンでは計算結果が意図したとおりになりませんでした。

私は、演算の順番を変えて、最後に割り算を行うようにして回避しました。

ところが…

Loop モジュール内の Simple Math モジュールに別のモジュールを接続すると 2つ目以降の item 処理時の右オペランドが 0 になる

わかりやすい表現が思いつきませんでしたｗ

▼こんな状態のことです。 YouTubeHtmlV2

この状態の場合に、2つ目以降の item 処理時に Simple Math モジュールの右オペランド(number[wired]の部分)が0 になってしまうため、計算結果が期待したものになりません。

上記の場合は simplemath の値が 0 になってしまいます。

本件は解決できていません。

あとがき

まだβ版のせいもあると思いますが、けっこう大変です。

パイプの数が増えてきて構成管理が難しくなってきたこともあり、一部のプロダクトに関しては脱 Yahoo! Pipes も視野に入れ始めています。

PicasaHtml2 for MarsEdit バグ修正

Pocket

時刻: 21:01 ラベル: Blog, MarsEdit

6/5 にリリースしました PicasaHtml2 for MarsEdit に不具合がございましたので修正版をアップロードいたしました。PicasaHtml2.1 for MarsEdit としています。

DraftPad 版とはバージョン番号の意味が異なるのでわかりにくいでしょうか…
機能レベルをメジャーバージョンに割り当てて番号を統一しています。

ダウンロード

修正内容

アルバム指定なしの場合にエラー終了してしまう不具合を修正

基本機能の評価を怠っておりました。誠に申し訳ございません。

bit.ly のトラッキングによるとクリック数は 1 なので私がテストでクリックしただけでどなたもダウンロードされていないのかもしれませんがｗ

PicasaHtml for DraftPad バージョンアップ - プレビューの強化

Pocket

時刻: 18:55 ラベル: Blog, DraftPad, iPad, iPhone, Picasa

昨日、PicasaHtml2 for DraftPad を発表したところ、早速ご要望をいただきました。

@toshiya240 1つだけ要望が有るのですが、大きい画像だとプレビューで切れてしまって見えないのです。出来れば画面に収まればもっと良いなと思いました。ご検討お願いします。m(_ _)m2011-06-11 20:31 via Echofon鈍がめ
ma2mars

ということでプレビューを強化して PicasaHtml 2.2 としました。

PicasaHtml 2.1 を導入済みの方は、お手数ですが、DraftPad への再インポートをお願いします。今後のことを考えて内部のファイル名を変更したためです。

今後のバージョンアップは自動的にアシストに反映されます。

PicasaHtml for DraftPad

プレビューはこんな感じにしました

▼サムネイルの一覧が表示されます。

▼リストの項目をタップすると個別のプレビュー画面が表示されます。

▼横向きにすると画像サイズは画面サイズに追従します。

あとがき

jQuery Mobile のリストビューの表示制御に少々手こずりました。まだα版なので不具合なのかもしれません。私の使い方の問題かもしれませんがｗ

一覧と個別プレビュー画面との間の遷移がもたつきますが、いまのところ解決策を見いだせていません。
ブラウザか jQuery Mobile か私のコードか…

PicasaHtml2 for DraftPad

Pocket

時刻: 19:39 ラベル: Blog, DraftPad, iPad, iPhone, Picasa

[MarsEdit] アルバムが選択できるようになった PicasaHtml2 - Textforce/DraftPad で開くオプションも♪ で iOS 向けのブックマークレットを作成しましたが、DraftPad のアーキテクチャが素敵なので DraftPad のアシストとして PicasaHtml2 を作り直しました。PicasaHtml 2.1 としています。

以下は DraftPad にアシストをインポートするリンクです。

PicasaHtml for DraftPad

追記: 最新版はこちらです。