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>

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

バッジはＡグレードブラウザで見るのが最善である。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>

関連項目

「http://www.kotono8.com/pedia/w/index.php?title=Yahoo!_Pipesバッジ&oldid=622」から取得