2007-09-10

Google AJAX Feed API を使って最新情報ページを作る

Postal Search APIs & Solutions (本サイト) の最新情報は ブログ を通じて案内していますが、その最新情報を本サイトのコンテンツとしても案内できるように、Google AJAX Feed API を使って 最新情報 というページを作ってみました。

JavaScript コードは、次のとおりです。ブログ の Feed を取得し、その Feed の先頭から 15件分のエントリを表示しているだけです。

Google AJAX Feed API の JSON Result Format の説明には、エントリの著者を表すプロパティがありませんが、entry.author プロパティで期待どおり取得できています。
<script type="text/javascript" src="http://www.google.com/jsapi?key="></script>
<script type="text/javascript">
//<![CDATA[
google.load('feeds', '1');

// jQuery.ready
jQuery(function($) {
var feed = new google.feeds.Feed(
"http://postal-search-apis-and-solutions.blogspot.com/" +
"feeds/posts/default"
);
feed.setNumEntries(15);
feed.load(function(result) {
if (result.error)
return;
$.each(result.feed.entries, function() {
$('<h3 />')
.addClass('style6')
.text(this.title)
.appendTo('#feed');

var date = new Date(this.publishedDate);
date = date.getFullYear()
+ '年'
+ (date.getMonth() + 1)
+ '月'
+ date.getDate()
+ '日';

$('<p />')
.addClass('style3')
.addClass('small')
.addClass('bold')
.text(' by ' + this.author + ' ' + date)
.appendTo('#feed');

$('<div />')
.html(this.content)
.appendTo('#feed');
});
});
});
//]]>
</script>

<div id="feed"></div>
本サイトでは Feed2JS を使ってブログの最新情報を表示している箇所があるのですが、いろいろ自由に加工できる Google AJAX Feed API に置き換えることにします。

Web開発者のためのRSS & AtomフィードWeb開発者のためのRSS & Atomフィード
ベン ハンマースリー Ben Hammersley 菅野 良二

詳解RSS~RSSを利用したサービスの理論と実践 XML Hacks―エキスパートのためのデータ処理テクニック RSSマーケティング・ガイド 動き始めたWeb2.0ビジネス JavaScript & DHTMLクックブック―Webエキスパート必携テクニック集 Life Hacks PRESS ~デジタル世代の「カイゼン」術~

by G-Tools

0 件のコメント: