JavaScriptでブログ最新記事一覧を表示[Google AJAX Feed API]
Google AJAX Feed APIを使うと、JavaScriptでRSSの取得が可能になります。
PHPが使える環境ではMagpieRSSを使ってRSSを取得しブログの最新記事一覧を表示していましたが、PHPが使えない環境でも同等の機能を実装できます。
別ドメインからのRSS取得も可能なのがステキです。
以下、導入手順をメモ。
1)まずはGoogleのアカウントを取得しておく必要があります。
ログイン後、Google AJAX Feed APIのページへアクセス。
→Google AJAX Feed API
http://code.google.com/apis/ajaxfeeds/index.html
2)次に設置先のサイトURLを入力して「Google Ajax API Key」を取得します。
以下のようなコードが提供されます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Feed API - Simple Example</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("RSSのアドレス");
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.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>
3)取得したいRSSのアドレスを「feed」に入れます。
var feed = new google.feeds.Feed(“http://www.nigorock.com/blog/?feed=rss2″);
4)HTML内のdiv「feed」部分に表示されるので、必要に応じて表示内容を加工します。
RSSの内容は「result.feed.entries」に配列状態で収められています。
var entry = result.feed.entries[i];
entryに入れておき、「entry.title」や「entry.link」、「entry.description」などでタイトル、記事へのリンク、本文など取得します。
4)日付は「entry.publishedDate」です。
var date = new Date(entry.publishedDate); var MonthDate = (date.getMonth()+1)+"/"+date.getDate();
以上で簡単に表示できます。
詳しいドキュメントは以下。
http://code.google.com/apis/ajaxfeeds/documentation/
Pingback: ウェブクリエイターへの道
Pingback: こもろぐ » JavascriptのみでRSSを表示する