Yahoo! Pipesバッジ

提供: 閾ペディアことのは
2008年5月8日 (木) 16:34時点における松永英明 (トーク | 投稿記録)による版
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
ナビゲーションに移動検索に移動

Yahoo! Pipesバッジ(Yahoo! Pipes Badge)は、Yahoo! Pipesで生成されたコンテンツをブログ・ウェブサイト・SNS上に設置するためのものである。

以下はhttp://pipes.yahoo.com/pipes/badgedocs の内容を全訳したものである。(2008年5月8日現在の内容)

Yahoo! Pipesバッジとは何?

Yahoo! Pipesバッジは、あなたのブログ、ウェブサイト、SNS上にPipesで生成されたコンテンツを置くためのものである。

どのような種類のバッジが使えますか?

現在、3つのバッジがある。すべてのバッジは、色、サイズ、項目数を設定できる。いくつかバッジ特有の設定がある。

  • List(リスト)バッジ
    • 項目の単純なリスト。
    • もしフィードにdescription(説明)フィールドが含まれるなら、説明が表示される。
    • もしフィードに画像やサムネイルが含まれるなら、それが表示される。
  • Image(画像)バッジ
    • 画像がフィード上に存在しているならば、画像のスライドショー。
    • フィードの画像はバッジの下にサムネイル状で表示される。
    • もしフィードにdescriptionフィールドが含まれるなら、画像にマウスを乗せると表示される。
    • オートプレイ、オートプレイのディレイタイム、項目数を設定できる。
  • Map(地図)バッジ
    • geocodeがフィードに存在しているなら、ドラッグ可能なマップに項目のピンポイントつきで表示される。
    • ピンポイントをクリックすると、もしあればタイトル・説明・画像の含まれる情報吹き出しが表示されるだろう。

自分のページにバッジを載せるには?

「Get This」ウィザードを使うことによって、blogger、typepad、iGoogleページに自動的にバッジが追懐される。wordpressなどを使っていたり、ウェブページにバッジを追加したいのであれば(※日本の多くのブログはこの場合にあてはまる)、以下のスクリプトをコピーペーストする。

<script src="http://pipes.yahoo.com/js/TYPE_OF_BADGE_GOES_HERE.js">
{
    "pipe_id" : "8ne6mC_P3BG7soL0ODY80A" //ここにパイプid。
}
</script>

バッジには制約がありますか?

バッジはAグレードブラウザで見るのが最善である。Operaには対応していない。<script>節を受け付けないサイトもある(たとえばMySpace)。バッジに表示できる項目の最大数は50である。公開されていないパイプには、「Get This」リンクもないし、バッジのヘッダーにはパイプへの逆リンクも表示されない。

バッジの表示を整えるには?

  • divタグでバッジを囲む。
  • スクリプト・ノード・プロパティを編集する。

divタグでバッジを囲む

バッジの表示を整える最も易しい方法は、divタグでスクリプト・バッジ・コードを挟み、それにclassを割り当てることである。バッジは、それを挟んでいる親divタグのプロパティのほとんどを継承する。継承されないプロパティはいずれも、スクリプトノードで変更しなければならない。たとえば、Height(高さ)は継承されないので、下記に示すスクリプト・ノード・プロパティで変更しなければならない。バッジをさらにカスタマイズするために、我々のCSSネームを無視してもよい。

<style>
.myClass {
	width:180px;
	height:350px;
	background-color:#000;                      
}
.myClass h3.ybh a.ybt {
	color:#fff;
}
</style>
<div class="myClass">  
    <script src="http://pipes.yahoo.com/js/TYPE_OF_BADGE_GOES_HERE.js">      
    {           
        "pipe_id" : "8ne6mC_P3BG7soL0ODY80A",              
        "pipe_params" : {"urlinput1": "http://sfbay.craigslist.org/search/rfs?query=&minminAsk=min&maxmaxAsk=max&hasPic=1&format=rss"},   
        "height" : "350px"   
    }   
    </script>  
</div>

スクリプト・ノード・プロパティを編集する

スクリプト・ノードにプロパティを追加して、下記に示される様々なパラメーターを変更することができる。 注:"pipe_id"はすべてのバッジに必要であり、"pipe_params"はJSONフォーマットのためのもので、ウィザードで生成される。スクリプト・ノードの中のプロパティのあとに","をつけてはいけない。

プロパティ(すべてオプション) 値(すべて文字列)
position: デフォルト=継承
top: デフォルト=継承
left: デフォルト=継承
width: デフォルト=継承
height: デフォルト=300px
backgroundColor: デフォルト=継承
border: デフォルト=継承
font: デフォルト=継承
margin: デフォルト=継承
padding: デフォルト=継承
headlineColor: デフォルト=継承
hideHeader: 設定=true/false
headerBackgroundColor: デフォルト=継承
descriptionColor: デフォルト=継承
evenBackgroundColor: デフォルト=#fff
oddBackgroundColor: デフォルト=#f6f6f6
<script src="http://pipes.yahoo.com/js/TYPE_OF_BADGE_GOES_HERE.js">      
{           
    "pipe_id" : "8ne6mC_P3BG7soL0ODY80A",              
    "pipe_params" : {"urlinput1": "http://sfbay.craigslist.org/search/rfs?query=&minminAsk=min&maxmaxAsk=max&hasPic=1&format=rss"},   
    "width" : "400px",   
    "height" : "400px",   
    "backgroundColor" : "#000"   
}   
</script> 

レンダリングされたバッジHTML構造(class名つき)

以下は、実行後にスクリプト・ノードが生成するものの例である。 実行したとき、スクリプト・ノードはHTMLに置き換わる。 親divタグのクラス名は毎回別々に生成される。 これは、バッジが既存のCSSスタイルを汚さないためになされることである。 ページがレンダリングされた後、他のバッジのhtmlを調べるために、firebugを使ってもよい。

リストバッジHTML構造

<div class="jhwxuvejrjkpafeo" style="width: 100%;">
    <div class="">
        <div class="ybx" style="visibility: visible;">
            <h3 class="ybh"><a class="ybt" target="_blank" href="http://pipes.yahoo.com/pipes/pipe.info?_id=1mrlkB232xGjJDdwXqIxGw">Apartment Near Something</a></h3>
            <div class="ybr" style="height: 289px;">
                <li class="ybi">
                    <div class="pipesImgdescription">
                        <div class="pipesHolder">
                            <div class="pipesThumbnail" style="margin-right: 8px;"><img src="http://www.postlets.com/create/photos/20080116/160632_Middle1.JPG"/></div>
                            <div style="margin-left: 0px;" class="pipesText">
                                <div class="pipesTitle"><a target="_blank" href="http://sfbay.craigslist.org/pen/apa/597458172.html">Beautiful, Remodeled, West Menlo Park, 2x1, Wood Floors, Fireplace (menlo park) $2295 2bd</a></div>
                                <div class="pipesDescription">Cherisse | 650-325-2411          Middle Avenue, Menlo Park, CA          2 Bdrm Apartment   $2,295/month      Bedrooms 2   Bathrooms 1 full, 0 partial    Sq Footage 900    Parking  1 dedicated   Pet Policy No pets   Deposit $500   DESCRIPTION   Beautiful two bedroom 2nd floor apartment home available.         Hardwood Floors in living room and dining area. Large Patio. Walking distance to park. Fantastic deal in a great location on Middle Avenue!         Walk to downtown Menlo Park restaurants and stores,ɼ/div>
                                <ul class="pipesSmallthumb">
                                    <li><a target="_blank" href="http://www.postlets.com/css/styles/marina/blt_features.gif"><img src="http://www.postlets.com/css/styles/marina/blt_features.gif"/></a></li>
                                    <li><a target="_blank" href="http://www.postlets.com/create/photos/20080116/160633_Middle.JPG"><img src="http://www.postlets.com/create/photos/20080116/160633_Middle.JPG"/></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="ybi odd">
                    <div class="pipesImgdescription">
                        <div class="pipesHolder">
                            <div class="pipesThumbnail"/>
                            <div style="margin-left: 0px;" class="pipesText">
                                <div class="pipesTitle"><a target="_blank" href="http://sfbay.craigslist.org/pen/apa/597351882.html">Extra clean plus size studios available now! (445 E OKeefe) (east palo alto) $850 1bd</a></div>
                                <div class="pipesDescription">These lovely studios have recently been remodeled and feature a larger divided space to create a separate "room". Building is secure with two main gates. Units are quiet and off street. Common areas include on-site laundry, fenced BBQ area and fenced play area.         Move in special for qualified applicants for first month rent free! Security deposit is $850. Landlord pays water and garbage. Includes one assigned parking space.                Units available immediately! Don't miss thisɼ/div>
                            </div>
                        </div>
                    </div>
                </li>                 
            </div>
        </div>
        <div class="ybf" style="display: block;"><a class="yba" href="http://pipes.yahoo.com"/>
            <div class="ybad">Powered by <a href="http://pipes.yahoo.com" class="ybaa">Y! Pipes</a><sup class="ybas">?</sup></div>
            <a class="gt">Get This</a>
            <div class="gts">ȼ/div>
        </div>
    </div>
</div>

バッジ特有のパラメータ

リストバッジ

プロパティ
count: デフォルト=25項目 数字を文字列として扱わない。この値は" "で挟まない。

リストバッジで10項目表示の例

<script src="http://pipes.yahoo.com/js/listbadge.js">      
{           
    "pipe_id":"1mrlkB232xGjJDdwXqIxGw",   
    "pipe_params":{"location":"palo alto, ca","what":"parks","mindist":"10"},   
    "count" : 10   
}   
</script>

地図バッジ

プロパティ
count: デフォルト=すべての項目 数字を文字列として扱わない。この値は" "で挟まない。

地図バッジで5項目表示の例

<script src="http://pipes.yahoo.com/js/mapbadge.js">      
{           
    "pipe_id": "1mrlkB232xGjJDdwXqIxGw",   
    "pipe_params": {"location":"palo alto, ca","what":"parks","mindist":"10"},       
    "count" : 5   
}   
</script>

画像バッジ

プロパティ
img_params: デフォルト={maxitems:0, autoscroll:true, autoscrolldelay:5} maxitemsは表示させる項目の数。0にするとすべての画像。
autoscrollはtrueがデフォルト。
autoscrolldelayは5秒がデフォルト。

画像バッジで10項目、自動スクロール、10秒間隔表示の例

<script src="http://pipes.yahoo.com/js/imagebadge.js">      
{           
    "pipe_id" : "FBSVd9uT3BGRhnfjGcevXg",              
    "img_params" : {maxitems:10, autoscroll:true, autoscrolldelay:10}   
}   
</script>  

関連項目