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

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

使い方

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

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

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

<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 → 0が付かない月
  • %m → 0を付けた月
  • %D → 0をつけない日付
  • %d → 0を付けた日付
  • %h → 時(24時間形式)
  • %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ライセンスです。

“[AS]FLVPlayBackでループ” をダウンロード – 0 回のダウンロード –