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

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>