2011.02.15

Google AJAX Feed APIを使う

AUTHOR

こんばんは
今週末は、jQueryの勉強会!
来月ぐらいには、javascriptをある程度マスタ-してるんじゃないか??と
なめてかかってます。

ということで今回は、javascript関連の記事を書きます。
ブログの新着情報をトップページに表示したい!!という時ってよくありますよね———————。

Google AJAX Feed APIを使うと簡単にできます。

Google AJAX Feed APIとはatomやRSS を取得して表示するためのJavaScript APIです。

Google Feed API JavaScript reference

google.feeds.Feedクラスのloadメソッドを使うと簡単にRSSを取得できます。

以下は、取得したRSSを「タイトル(日付)」で一覧表示するサンプルです。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"><!--
google.load("feeds", "1");
function initialize() {
var feedurl = "取得したいRSSのURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(20);
feed.load(dispfeed);
function dispfeed(result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
htmlstr += "<dl>";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr += "<dt>"
htmlstr += '<a href="' + entry.link + '" target="blank">' + entry.title + '</a>';
htmlstr += "</dt>"
htmlstr += "<dd>"
var strdate = createDateString(entry.publishedDate);
htmlstr += "  " + strdate + "";
htmlstr += "</dd>"
}
htmlstr += "</dl>";
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
}
}
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
if(pday<10){pday="0"+pday;}
var pmonth = pdate.getMonth() + 1;
if(pmonth<10){pmonth="0"+pmonth;}
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
var strdate = "(" + pyear + "年" + pmonth + "月" + pday + "日)";
return strdate;
}
google.setOnLoadCallback(initialize);
// --></script>
<div id="feed"></div>

戸田@ドアズ社長ブログ

  • No items
PAGE TOP