もうJSP使わなくても、かなりのこと出来るようになってたのね(^^)/ | Google AJAX Feed API - Google Code

Google AJAX Feed API - Google Code

ページでRSSを読み込ませて表示させようと思った。前にもやったことがあるけど、それはJSPを使ったもの。

ひょっとして、JSPを使わずにJavascriptだけで簡単にできるようになっているのじゃなかろか？と思って調べたら、やっぱりあったねぇ。そして、やっぱりGoogleだねぇ。AJAXな人々には常識なのだろうけど。

ホントにすごく簡単にできる。

1.Google AJAX Feed API - Google Codeに行く
2.「Google AJAX APIキー」をクリック
3.「利用規約を読んだ上でこれに同意します」チェックボックスをチェック
4.「使用するウェブサイトの URL」にRSSのフィードのアドレスを入力
5.サンプルコードが出てくるのでそれを適当に改造して自分のHTMLに組み込む

出てくるサンプルコードはRSSのタイトルだけを列挙するだけの本当にシンプルなもの。多くの場合はこのように日付とリンクを列挙する形になるだろう。

今回はこのようにした。このスクリプトの処理結果は、「id="feed"」のタグの中に埋め込まれる。サンプルコードにもあるけど、多くの場合は「<div id="feed"></div>」で十分だろう。

<!-- Google AJAX Feed API http://code.google.com/apis/ajaxfeeds/index.html -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=XXXXXXXXX"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("http://XXX.blogspot.com/feeds/posts/default");
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.style.marginTop = "5px";

var span = document.createElement("span");
span.style.marginRight = "15px";
span.style.fontWeight = "bold";
var pubDate = new Date(entry.publishedDate);
var pubDateStr = pubDate.getFullYear() + "年 " + (pubDate.getMonth() + 1) + "月 " + pubDate.getDate() + "日";
span.appendChild(document.createTextNode(pubDateStr));
div.appendChild(span);

var anc = document.createElement("a");
anc.href = entry.link;
anc.appendChild(document.createTextNode(entry.title));
div.appendChild(anc);

container.appendChild(div);

}
}
});
}

google.setOnLoadCallback(initialize);

</script>

JSPを使わなくてもここまで簡単にできるなんて。隔世の感アリですなぁ。

サーバーサイドにどっぷりだった頃は考えもつかなかったけど、こうなってくるとテンプレートエンジンすらもjavascriptだけで作れそうだよなぁ。そこまでしなくても、簡単なテンプレートのincludeみたいなのはすぐ出来るよなぁ。

HTML5のこともあるし、これから気合入れてjavascript再勉強だ！