Google AJAX Feed APIを使ってAtomやRSSフィードを読み込んでみます。まずはGoogle AJAX Feed API への登録を行います。するとサンプルが表示されるので、それを元に以下のように設定。
--- 表示されるサンプルを元に「表示件数」「リンク」「投稿日の表示スタイル」を追加設定 ---
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>タイトル</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=生成されたAPIキー"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("フィードURL");
feed.setNumEntries(10); //表示させる件数
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div"); //取得するデータが<div>タグで囲まれる
var a = document.createElement("a"); //取得するデータにリンク設定
a.href = entry.link; //取得するデータ(ページ)へリンク設定
a.target = "_blank" ; //blankでページを開く
a.appendChild(document.createTextNode(entry.title + "(" + date.toLocaleDateString() + ")" )); //データの表示形式を設定
div.appendChild(a);
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head&g
<body>
<div id="feed"></div> //ここで表示される
</body>
これで記事タイトル(YYYY年M月D日)のように表示されます。が、個人的には上記demoのような形で表示したい…
そこで以下のようにしてみました。
--- demo用コード ---
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://otani-webs.com/blog/feed/");
feed.setNumEntries(5) //追加:表示する件数
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var date = new Date(entry.publishedDate);
var yy = date.getYear().toString(); //文字列を取得
yy = yy.substr(1); //文字列の2番目の文字から表示
var mm = date.getMonth() + 1;
if (mm < 10) {mm = "0" + mm;} //0~9月だったら前に0をつける
var dd = date.getDate();
if (dd < 10) {dd = "0" + dd;}
var yymmdd = yy + "-" + mm + "-" + dd + " ";
container.innerHTML += "<li>" + yymmdd + "<a href='" + entry.link + "' target='_blank'>" + entry.title + "</a></li>";
}
}
});
}
google.setOnLoadCallback(initialize);
</script>