Google AJAX Feed APIでRSS複数表示
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使用) - 麦日記 麦とすず