フィードをブログパーツ化するYahoo! Pipesの「Get as a Badge」

 久しぶりに触る、Yahoo! Pipes(Pipes: Rewire the webはてなブックマーク - Pipes: Rewire the web)。
 RSSを組み合わせたり加工したりして作ったフィードをブログとかに手軽に貼りつけたい。ということで使うのが「Get as a Badge」機能。「Run Pipe」すると、フィードのプレビューの上にこのリンクが出てくる。
 Badge = バッジ。昔はバッチと発音することが多かった気がするが正しくはバッジ、だそうだ(バッジ – Wikipedia参照)。まあ、それはいい。
 で、問題はここに表示される内容だ。
 記事タイトルにリンクが張られた状態で出てくる。descriptionも一部表示される。長すぎるのは丸められるという感じだ。
 でもって、画像。アイコンみたいに表示される。サイズは適当にリサイズされるので見た目もいい。配置もなかなか文句ないレベルのデザイン。もうこれにまかせていいんじゃないか、と思ったり。
 で、HTMLタグはごっそり削除されている模様。画像にリンクがあってもそれも無視される。リンクはあくまでもタイトルにだけ付いている模様。
 既存のフィードをいじって、あくまでもこのバッジ作成のために加工することを試した。
 titleとlinkを普通にいじる。descriptionは元のを削除して、ほかの要素(この呼名で正しいかどうか不安)からひっぱってくる。${要素名}で参照できるのを今日知った。これカンタン、便利。
 Regexモジュールでがんがん作業。withに指定する文字列に「${要素A} | ${要素B}」みたいな感じで。選択肢として出てこない要素については、プレビュー見ながら要素名を確認すればよい。こんな使い方知らなかったよ。


 というわけで、このへんを見ながらいろいろテスト。

 それからこのバッジ。幅と高さサイズの指定ができるのだけど、サイズを指定するとはみ出した場合にスクロールバーが出てくる。最初、指定なしでやってたら表示が崩れたので指定してあったのだけど、今度はスクロールバーに悩まされることになった。フィードの内容によって高さが変わってしまうからだ。で、もう一度、サイズを指定しなかったら問題なくスクロールバーなしで崩れることもなく表示された。うーん。遠回り。とか思ってるとやっぱり出たり。配置する場所ひゃcssによって違ってくるのか。このへん未検証。
 でもって、できたのがエントリの最後のやつ。
 リンクシェア(LinkShare)のiTunes Storeのブログパーツが終了して困ってる人が多いみたいだけど、これで代用(代替か?)できたりするかもしれない。いや、だめか。このままじゃ。スクロールバーの問題とか解決したらもう一度書くという方向で。

コメント