2008年5月8日 (木) 07:34に松永英明による

2008-05-08T07:34:22Z

松永英明: 新しいページ: ''''Yahoo! Pipesバッジ'''（Yahoo! Pipes Badge）は、Yahoo! Pipesで生成されたコンテンツをブログ・ウェブサイト・SNS上に設置するためのも...'

2008-05-08T07:33:56Z

新しいページ: ''''Yahoo! Pipesバッジ'''（Yahoo! Pipes Badge）は、Yahoo! Pipesで生成されたコンテンツをブログ・ウェブサイト・SNS上に設置するためのも...'

新規ページ

'''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などを使っていたり、ウェブページにバッジを追加したいのであれば（※日本の多くのブログはこの場合にあてはまる）、以下のスクリプトをコピーペーストする。
<pre>
<script src="http://pipes.yahoo.com/js/TYPE_OF_BADGE_GOES_HERE.js">
{
"pipe_id" : "8ne6mC_P3BG7soL0ODY80A" //ここにパイプid。
}
</script>
</pre>

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

バッジは[http://developer.yahoo.com/yui/articles/gbs/#gbschart Ａグレードブラウザ]で見るのが最善である。Operaには対応していない。<script>節を受け付けないサイトもある（たとえばMySpace）。バッジに表示できる項目の最大数は50である。公開されていないパイプには、「Get This」リンクもないし、バッジのヘッダーにはパイプへの逆リンクも表示されない。

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

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

===divタグでバッジを囲む===

[http://pipes.yahoo.com/pipes/docs?doc=surround_badgeexamples 例]

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

<pre>
<style>
.myClass {
width:180px;
height:350px;
background-color:#000;
}
.myClass h3.ybh a.ybt {
color:#fff;
}
</style>
</pre>

<pre>
<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>
</pre>

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

[http://pipes.yahoo.com/pipes/docs?doc=editscriptnode_badgeexamples 例]

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

{| border="1" cellpadding="5" cellspacing="0"
|-
! プロパティ（すべてオプション）
! 値（すべて文字列）
|-
| position:
| デフォルト＝継承
|-
| top:
| デフォルト＝継承
|-
| left:
| デフォルト＝継承
|-
| width:
| デフォルト＝継承
|-
| height:
| デフォルト＝300px
|-
| backgroundColor:
| デフォルト＝継承
|-
| border:
| デフォルト＝継承
|-
| font:
| デフォルト＝継承
|-
| margin:
| デフォルト＝継承
|-
| padding:
| デフォルト＝継承
|-
| headlineColor:
| デフォルト＝継承
|-
| hideHeader:
| 設定＝true/false
|-
| headerBackgroundColor:
| デフォルト＝継承
|-
| descriptionColor:
| デフォルト＝継承
|-
| evenBackgroundColor:
| デフォルト＝#fff
|-
| oddBackgroundColor:
| デフォルト＝#f6f6f6
|}

<pre>
<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>
</pre>

==レンダリングされたバッジHTML構造（class名つき）==

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

===リストバッジHTML構造===
<pre>
<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>
</pre>

==バッジ特有のパラメータ==

===リストバッジ===

{| border="1" cellpadding="5" cellspacing="0"
|-
! プロパティ
! 値
! 注
|-
| count:
| デフォルト＝25項目
| 数字を文字列として扱わない。この値は" "で挟まない。
|}

'''リストバッジで10項目表示の例'''
<pre>
<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>
</pre>

===地図バッジ===

{| border="1" cellpadding="5" cellspacing="0"
|-
! プロパティ
! 値
! 注
|-
| count:
| デフォルト＝すべての項目
| 数字を文字列として扱わない。この値は" "で挟まない。
|}

'''地図バッジで5項目表示の例'''
<pre>
<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>
</pre>

===画像バッジ===

{| border="1" cellpadding="5" cellspacing="0"
|-
! プロパティ
! 値
! 注
|-
| img_params:
| デフォルト＝{maxitems:0, autoscroll:true, autoscrolldelay:5}
| maxitemsは表示させる項目の数。0にするとすべての画像。<br>autoscrollはtrueがデフォルト。<br>autoscrolldelayは5秒がデフォルト。
|}

'''画像バッジで10項目、自動スクロール、10秒間隔表示の例'''
<pre>
<script src="http://pipes.yahoo.com/js/imagebadge.js">
{
"pipe_id" : "FBSVd9uT3BGRhnfjGcevXg",
"img_params" : {maxitems:10, autoscroll:true, autoscrolldelay:10}
}
</script>
</pre>

==関連項目==
*[[Yahoo! Pipes]]
*[[Yahoo! Pipesモジュール一覧]]

[[category:Yahoo! Pipes|#]]

@@ 1行目: / 1行目: @@
 '''Yahoo! Pipesバッジ'''（Yahoo! Pipes Badge）は、[[Yahoo! Pipes]]で生成されたコンテンツをブログ・ウェブサイト・SNS上に設置するためのものである。
-以下はhttp://pipes.yahoo.com/pipes/badgedocsの内容を全訳したものである。（2008年5月8日現在の内容）
+以下はhttp://pipes.yahoo.com/pipes/badgedocs の内容を全訳したものである。（2008年5月8日現在の内容）
 ==Yahoo! Pipesバッジとは何？==
@@ 270行目: / 270行目: @@
 *[[Yahoo! Pipesモジュール一覧]]
-[[category:Yahoo! Pipes|#]]
+[[category:Yahoo! Pipes|#3]]

Yahoo! Pipesバッジ - 版の履歴

2008年5月8日 (木) 07:34に松永英明による

松永英明: 新しいページ: ''''Yahoo! Pipesバッジ'''（Yahoo! Pipes Badge）は、Yahoo! Pipesで生成されたコンテンツをブログ・ウェブサイト・SNS上に設置するためのも...'