[Ajax] Google AJAX Feed APIでRSSを表示する

Google Ajax APIシリーズ記事その３はFeedについて。
RSS表示に関しては前にPHPで表示する方法を書きましたが、Magpie RSSだとページをPHPにする必要がありました。
Google AJAX Feed APIを利用すると、javascriptファイルを読み込むだけでhtmlファイルに外部のRSSを表示させることが出来ます。
なんでか妙にマイナーな気がするのはきっと難しそうに見えるからに違いないと思い、３ステップで使えるようにしてみた。
ZIPも用意してみたのでお試しあれ！

※Mapはこの記事、Searchはこの記事で解説しています。

使い方

まず、Feedを表示させる要素を用意します。IDをつけてください。
デフォルトはgfeedです。

<div id="gfeed"></div>

必要なスクリプトタグをＲＳＳを表示させたいページに読み込ませます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="gfeeds.js"></script>

google.load()を最後に追加して終了。

<script type="text/javascript">
//<!&#91;CDATA&#91;
google.load("feeds", "1",{"callback" :gfeed.load,"language" : "ja_JP","nocss" : true});
//&#93;&#93;>
</script>

※上記ソースでは”nocss”オプションを有効にすることで、Googleデフォルトのスタイルシートを読み込まないようにしています。

以上で表示されるはず。
配布ZIPにはindex.htmlとjsファイルが入っています。

Class wtnGfeed

クラスの説明。

Method: set

オプションまたはURLをセットします。
テキストの場合はURLのセッター、オブジェクトの場合はオプションのセッターになります。

gfeed.set("http://japan.internet.com/rss/rdf/index.rdf");

Options

オプションはset()を使って指定します。

gfeed.set({
	"feedBlock":"ul",
	"lineBlock":"li",
	"titleBlock":"",
	"titleBox":"",
	"dateBox":"span",
	"contentBlock":false
});

Default:

{
	"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"がつきます。
設定を変更した場合はその設定に準じた出力を行います。

<dl>
<dt class="title"><span class="date">2010/10/18</span>
<a target="_blank" href="http://shop.plaza.rakuten.co.jp/*****/diary/detail/201010000000/">ブログタイトル</a></dt>
<dd class="snippet">ブログ本文の抜粋...</dd>
</dl>

Download

gfeeds.jsはMITライセンスです。

[ダウンロードが見つかりません]