- 2009-06-13 (土) 1:00
- Memo
Google Ajax APIシリーズ記事その３はFeedについて。
RSS表示に関しては前にPHPで表示する方法を書きましたが、Magpie RSSだとページをPHPにする必要がありました。
Google AJAX Feed APIを利用すると、javascriptファイルを読み込むだけでhtmlファイルに外部のRSSを表示させることが出来ます。
なんでか妙にマイナーな気がするのはきっと難しそうに見えるからに違いないと思い、３ステップで使えるようにしてみた。
ZIPも用意してみたのでお試しあれ！
※Mapはこの記事、Searchはこの記事で解説しています。
使い方
まず、Feedを表示させる要素を用意します。IDをつけてください。
デフォルトはgfeedです。
HTML:
-
<div id="gfeed"></div>
必要なスクリプトタグをＲＳＳを表示させたいページに読み込ませます。
HTML:
google.load()を最後に追加して終了。
HTML:
-
<script type="text/javascript">
-
//<![CDATA[
-
google.load("feeds", "1",{"callback" :gfeed.load,"language" : "ja_JP","nocss" : true});
-
//]]>
-
</script>
※上記ソースでは"nocss"オプションを有効にすることで、Googleデフォルトのスタイルシートを読み込まないようにしています。
以上で表示されるはず。
配布ZIPにはindex.htmlとjsファイルが入っています。
Class wtnGfeed
クラスの説明。
Method: set
オプションまたはURLをセットします。
テキストの場合はURLのセッター、オブジェクトの場合はオプションのセッターになります。
JavaScript:
-
gfeed.set("http://japan.internet.com/rss/rdf/index.rdf");
Options
オプションはset()を使って指定します。
JavaScript:
-
gfeed.set({
-
"feedBlock":"ul",
-
"lineBlock":"li",
-
"titleBlock":"",
-
"titleBox":"",
-
"dateBox":"span",
-
"contentBlock":false
-
});
Default:
JavaScript:
-
{
-
"element":"gfeed",
-
"max":3,
-
"text":100,
-
"feedBlock":"dl",
-
"lineBlock":"",
-
"titleBlock":"dt",
-
"titleBox":"",
-
"titlePlace":"APPEND",
-
"dateBox":"span",
-
"contentBlock":"dd",
-
"dateformat":"%Y/%M/%D"
-
}
- element (string)
- 出力先要素のID
- max (number)
- 表示件数
- text (number|string)
- 本文の文字数。all で全て表示
- feedBlock (string)
- フィードの要素。
- lineBlock (string)
- タイトル・日時と本文を入れる要素
- titleBlock (string)
- タイトルと日時を入れる要素
- titleBox (string|false)
- タイトルを入れる要素。falseで非表示。空文字の場合はlineBlockかtitleBlock内に表示
- titlePlace (string) v1.1
- タイトルを入れる位置。デフォルトはAPPEND。'PREPEND'にすると日付より前に挿入する。
- dateBox (string|false)
- 日付を入れる要素。falseで非表示。空文字の場合はlineBlockかtitleBlock内に表示
- contentBlock (string|false)
- 本文を入れる要素。falseで非表示。空文字の場合はlineBlockかfeedBlock内に表示
- dateformat (string)
- 日時の表示形式。規定の文字列を置換します
- %Y → 西暦
- %M → ０が付かない月
- %m → ０を付けた月
- %D → ０をつけない日付
- %d → ０を付けた日付
- %h → 時（２４時間形式）
- %i → 分
デフォルトのHTMLソース
各要素のクラスは変更できません。リンクにはtarget="_blank"がつきます。
設定を変更した場合はその設定に準じた出力を行います。
HTML:
Download
gfeeds.jsはMITライセンスです。
