Yahoo! PipesのRSSをブログパーツ化する「Get as a Badge」でスクロールバーが出ないようにする

 Yahoo! PipesでRSSフィードをブログパーツ風に表示する「Get as a Badge」機能でスクロールバーが出たり出なかったりする件の検証。

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

 Badgeの作成ではjavascriptのスクリプトを出力する。そのスクリプト作成時に幅と高さが指定できるのだが、それによって表示が変わってくる。それの検証。

 今回は、5件を表示するように指定。フィードは、画像付きのもの。


●何も指定しない

 これだとスクロールバーが表示されてしまう。

●高さを指定(height = 300)

 スクロールバーがまたしても表示される。もちろん、300を400にしたりすればスクロールバーはなくなる。
 しかし、フィードの内容によって、タイトルが長くなるとそれでもはみ出す場合がある(フィードの内容は特定できない)ので、スクロールバーは出る可能性がある。
 でもって、そのへんを考えて大きめに指定してしまうと、フィードの表示の下、Pipesのロゴとの間に空間ができてしまう。これもちょっといただけない。

●高さを指定しておいて、消す

 これは、スクリプト生成時に高さを指定しておいて、生成されたスクリプトのheight指定の数値を消すというもの。
 「height”:”400″」となっていた部分を「height”:””」としたわけである(高さを指定しない場合はこの記述部分自体が存在しない)。

 これならOK。スクロールバーは表示されないし、内容によって自動的に高さが調整される。記事数が増えても大乗仏教。

 ということで、これでいけると思われ。まだ、検証が足りないような気もするけど、ひとまず。

 なお、今回はブログ投稿時の設定で「改行を反映させない」にしておいて、自分でbrタグを加えてある。こうしないと意図したとおりにならない。また、フィードの記事件数はPipes側でそう表示されるように作ったもの。Badgeの機能でやってるわけではない。念のため。フィードはiTunes Storeのものでリンクシェア(LinkShare)のアフィリエイトを適用するPipesを通してある(ちょっとしたアフィリエイトブログパーツ)。

 それから。このブログの右サイドバーの下のほうにも同様の方法でBadgeを数日前から表示してある。幅が変わっても特に問題なく表示されている模様。(追記:すでに削除済み)

 ブログパーツとして、活用したい方はぜひお試しを。とはいえ、表示されるまでちょっと時間がかかったりするので、表示させる位置には注意が必要かも。ほかの部分の表示をさまたげるものではない(ページ全体が表示されたあとに、Badgeが描画される)みたいなのでさほど問題はないかもですが。

コメント

  1. ここの人 より:

    追記が面倒なのでコメントで。

    スクロールバーが出る件ですが、何も指定しない場合は300pxになると公式のドキュメントにありました。

    高さを固定することで、ほかのページ内の要素に影響を与えないように、ということかもしれませんね。

    ということで、公式のBadgeに関するドキュメントのURLは以下。

    http://pipes.yahoo.com/pipes/badgedocs

    パラメーターを与えることで、このほかにもいろいろな指定が可能です。

    たとえば、フィードのタイトルを表示させないようにするとか、フォントを指定したりだとか。

    背景色を記事の奇数番目、偶数番目、個別に指定できたりも。

    descriptionの文字カラーも同様。しかし、記事タイトルの色とかは指定できません。そのへんはCSSでやってくれ、っていうことみたいです。リンクになるから、元のスタイルシートにより親要素からの継承になるからってことですかね。また、スクリプトで生成される内容が冗長になりすぎるってこともあるかもですね。

    別の機会にこのへんはまたまとめたい気もします。

    まあ、このBadgeを使っている人はあんまりいないみたいなので、需要ないような気もしますが。

  2. ここの人 より:

    前のコメントでフィードのタイトル、と書きましたが、間違い。pipeの名前ですね。

    とくに指定しないと、pipeの名前がBadgeのタイトルみたいに出てきます。ヘッダーといったほうがいいでしょうか。

    オプションでは「hideHeader」とか「headerBackgroundColor」というのがあります。

    あと、記事タイトルの色は「headlineColor」で変えられるのかな、もしかして。