読者です 読者をやめる 読者になる 読者になる

bass-inu's blog

非IT企業Web担当者の孤独な雑記

Google AJAX Feed APIでRSS複数表示

Web JavaScript

JavaScriptだけでフィードを取得&表示できる。Google AJAX Feed API
複数のフィードを表示をするには、FeedControlクラスを使えば簡単ですが、表示内容を細かくいじることができない。。
見た目はCSSでカスタマイズ可能。公式参照。


■やりたいこと

  • 複数のフィードを表示
  • 日付は「年.月.日」で表示
  • 1週間以内の記事には日付の横に「NEWマーク」を表示
  • 記事の概要表示

APIキーを取得したら準備完了。

表示サンプル画像


head内

<script type="text/javascript"
 src="http://www.google.com/jsapi?key=(APIキー)"></script>
<script type="text/javascript" src="feed.js"></script>


feed.js

var limit = 7 * 24 * 60 * 60 * 1000; //7日
google.load("feeds", "1");
function initialize() {
var now = (new Date()).getTime();
var container = document.getElementById("feed");
container.innerHTML = '';
var feedurl = new Array("RSS1","RSS2","RSS3"); //RSSのURL
  for (n = 0; n < feedurl.length;n++ ) {
    var feed = new google.feeds.Feed(feedurl[n]);
    feed.setNumEntries(3); //記事を3件表示
    feed.load(function(result) {
      if (!result.error) {
           html ="<h4>"+result.feed.title+"<\/h4><dl>"; //タイトル
           for (i = 0; i < result.feed.entries.length; i++) {
  var entry = result.feed.entries[i];
  var entdate = new Date(entry.publishedDate).getTime();
  var newmark = '';

if (now >= entdate && now <= (entdate + limit)) {
	newmark = '<span style="color:red;">new!<\/span>';
//「NEWマーク」のタグ
}
 html += "<dt><a href='"+entry.link+"' target='_blank'>"+entry.title+"<\/a> ["+changeDate(entry.publishedDate)+"] "+newmark+"<\/dt>";
//記事タイトル [日付] 7日以内の記事ならNEWマーク
 html += "<dd>"+entry.contentSnippet+"<\/dd>"; //概要
             }
 html += "<\/dl>";
container.innerHTML += html;
      }
    });
  }
}
//日付表示変更
function changeDate(str){
  var myDate=new Date(str);
  var YY=myDate.getFullYear();
  var MM=myDate.getMonth()+1;
  if(MM<10){MM="0"+MM;}
  var DD=myDate.getDate();
  if(DD<10){DD="0"+DD;}
  var date=YY+"."+MM+"."+DD;
  return date;
 }  
google.setOnLoadCallback(initialize);


body内の表示させたい箇所に

<div id="feed">Loading</div>


JavaScriptは詳しくないので、もしかしたら間違ってたり、無駄なコードがあるかもしれません(^▽^;)
今のところ問題なく表示されていますが念のため…。


■参考にさせていただいたサイト
Google AJAX Feed API入門
Movable Type 備忘録 - Google AJAX Feed API
RSS取得(Google AJAX Feed API使用) - 麦日記 麦とすず