脱 Yahoo! Pipes その4 - PicasaHtml for MarsEdit

このエントリーをはてなブックマークに追加 Pocket

第 4 弾は PicasaHtml for MarsEditです。

参考

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

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

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

脱 Yahoo! Pipes その3 - FlickrHtml to MarsEdit

このエントリーをはてなブックマークに追加 Pocket

第 3 弾は FlickrHtml to MarsEdit です。

参考

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

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

脱 Yahoo! Pipes その2 - FavPaste for MarsEdit

このエントリーをはてなブックマークに追加 Pocket

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

参考

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

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

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

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

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

このエントリーをはてなブックマークに追加 Pocket

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

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

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

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

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

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

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

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

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

以下のイメージです。

Fetch Page

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

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

回避策その2 - 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 CSV

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

あとがき

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

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

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

脱 Yahoo! Pipes - YouTubeHtml for MarsEdit

このエントリーをはてなブックマークに追加 Pocket

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

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

YouTubeHtmlV2 2

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

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

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

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

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

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

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

このエントリーをはてなブックマークに追加 Pocket

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

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

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

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

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

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

PicasaHtmlV1

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

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

PiacasaHtmlV2

なお、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エンジンでは以下のように指定します。

PicasaHtmlV1 2

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

PicasaHtmlV2 2

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

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

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

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

PicasaHtmlV2 3

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

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

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

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

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

ところが…

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

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

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

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

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

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

あとがき

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

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

PicasaHtml2 for MarsEdit バグ修正

このエントリーをはてなブックマークに追加 Pocket

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

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

ダウンロード

修正内容

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

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

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

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

このエントリーをはてなブックマークに追加 Pocket

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

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

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

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

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

PicasaHtml for DraftPad

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

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

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

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

あとがき

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

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

PicasaHtml2 for DraftPad

このエントリーをはてなブックマークに追加 Pocket

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

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

PicasaHtml for DraftPad

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

導入と使用方法

iPhone または iPad で上記のリンクをタップしてください。

▼ DraftPadが起動されてアシストの登録画面が表示されます。
1000000140.png

▼アシストを起動すると、初回は設定画面が表示されます。
1000000148.jpg

▼ Picasa のユーザID を入力して [保存] ボタンをタップしてください。
あ。画像内にクリックって書いちゃったw
1000000149.jpg

▼メイン画面にもどりますので、[リロード] ボタンをタップしてください。
なお、初回以外はアシスト起動後に自動的にアルバム一覧がロードされます。
1000000150.jpg

▼ロードちう
1000000144.png

▼アルバム一覧がロードされました。
1000000147.png

▼アルバムを選択して…
1000000151.png

▼ [Get Photos] ボタンをタップしてください。
1000000158.jpg

▼写真のロードちう
1000000154.png

▼じゃーん。
1000000161.png

▼下の方にプレビューも表示されます。
1000000156.png

▼ [Insert to DraftPad] ボタンをタップすると…
1000000160.jpg

▼ DraftPad に生成した HTML が追記されます。
1000000157.png

あとがき

今回は jQuery Mobile と HTML5 に挑戦してみました。

jQuery Mobile はスマートフォンやタブレットに最適化されたページを HTML の記述だけで生成してくれるのが感動的です。アプリケーションロジックは Javascript でコーディングする必要はありますが。

本エントリは、以下の手順で書いてみました。

  1. スクリーンショットを撮影
  2. 必要に応じて iPhoton で画像を加工
  3. PictShare でアルバムを作成して Picasa にアップロード
  4. PicasaHtml2 for DraftPad でアルバムを指定して HTML を生成
  5. DraftPad で HTML を Dropbox に保存
  6. MarsEdit で文章を書いて仕上げ

するぷろが Blogger 対応したら iPhone だけで完結させることもできるんだけどなぁ…
BlogPress は不安定で使う気がしないし…

iPhoton 1.2.1App
iPhone、iPod touch および iPad 互換 iOS 4.1 以降が必要
カテゴリ: 写真 価格: 無料
更新: 2010/11/13

PictShare - multiple photos/movies uploader 2.1.2App
iPhone、iPod touch および iPad 互換 iOS 4.0 以降が必要
カテゴリ: ソーシャルネットワーキング 価格: ¥230
更新: 2011/06/08

DraftPad 1.4App
iPhone、iPod touch および iPad 互換 iOS 3.1 以降が必要
カテゴリ: 仕事効率化 価格: 無料
更新: 2011/03/24

MarsEdit 3.3App
Mac OS X 10.6.6以降
カテゴリ: ソーシャルネットワーキング 価格: ¥4,600
更新: 2011/05/27

[MarsEdit] アルバムが選択できるようになった PicasaHtml2 - Textforce/DraftPad で開くオプションも♪

このエントリーをはてなブックマークに追加 Pocket

先日、[MarsEdit] iPhoto から Flickr のセットを選択して写真へのリンクを貼り付けるサービスメニュー を発表させていただきました。

私は写真を Picasa にアップロードしているので自分で使うことは今のところありません。

セット(アルバム)の指定が思いの外便利そうなので、PicasaHtml でアルバムを選択できるようにしました。

PicasaHtml2 とは

選択したアルバムの写真へのリンクを取得する機能を追加したものです。

▼起動するとアルバムを選択する画面が表示されます。アルバム選択後はこれまでの PicasaHtml と同じです。
PicasaHtml2 ChooseAlbum 1

▼取得する写真の最大枚数はアルバムを限定しない場合のみ表示されます。
PicasaHtml2 InputMaxCount

▼タグは省略可能です。
PicasaHtml2 InputTag

▼テンプレートの番号を入力してください。
PicasaHtml InputTemplateNumber

▼指定したアルバム内の画像へのリンクが MarsEdit のエディタに挿入されます。
PicasaHtml2 Result

iOS 版もあるよ

iOS 向けのブックマークレットにも機能を追加しました。

▼ブックマークレットを起動すると以下の画面が表示されます。
1000000125.png

▼アルバムを選択して
1000000126.png

▼ Get Photos!!
1000000129.jpg

▼ DraftPad か Textforce で結果を開くことができます。
1000000130.jpg

導入手順

MarsEdit 版

ダウンロードは こちら から。

セットアップ手順はまとめページをご覧下さい。

iOS 版

@matubiz さんの AmazonHtml メーカーをパクって参考にして PicasaHtml2 メーカーを作りました♪

PicasaHtml2Maker

やっぱりブックマークレットメーカーがあると楽ですよね。

さいごに

iOS 版の Open In DraftPad ですが、今回のバージョンでは DraftPad 上から実行するとエラーになります。(Safari や Textforce から実行すれば正常に動作します。)

今回、ブックマークレットのロジック部分を外部ファイルにしましたので、今後の修正は利用者の方の作業なしに反映されます。修正できた際に本ブログにてご連絡いたしますのでお待ちください。


MarsEdit 3.3App
Mac OS X 10.6.6以降
カテゴリ: ソーシャルネットワーキング 価格: ¥4,600
更新: 2011/05/27
Textforce - Dropbox text editing 2.2.8App
iPhone、iPod touch および iPad 互換 iOS 4.0 以降が必要
カテゴリ: 仕事効率化 価格: ¥450
更新: 2011/05/18
DraftPad 1.4App
iPhone、iPod touch および iPad 互換 iOS 3.1 以降が必要
カテゴリ: 仕事効率化 価格: 無料
更新: 2011/03/24