RSSデータのタイトルと本文を表示する

　Google AJAX Feed APIはRSSのタイトルだけでなく本文などの情報も取得できます。本文は各エントリー情報が格納された配列のcontentプロパティに格納されています。注意しないといけないのはリンクなどHTMLタグも、そのまま反映されてしまうことです。以下のサンプルではリンクなども反映されページ上に表示されます。これはRSS内にscriptタグでコードが記述されていた場合にセキュリティ面での危険性もともなうということです。この点に注意して利用する必要があります。　Atom, RSS 2.0内にスクリプトタグを入れてもGoogle側で、そのような部分が自動的にカットしてくれるようです。scriptタグだけでなくaタグやspanタグなど各種タグのイベントやaタグでhref='javascript:〜'と指定されている部分もカットされます。（サンプルを実行する）

<html>
<head>
<title>Google Feed API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA"></script>
<script type="text/javascript"><!--
function initialize() {
var feed = new google.feeds.Feed("http://jsgt.org/mt/01/atom.xml");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
var entry = result.feed.entries[0];
var eTitle = entry.title;
var eCont = entry.content;
container.innerHTML += "<h3>"+eTitle+"</h3>";
container.innerHTML += eCont+"<hr>";
}
});
}
google.load("feeds", "1");
google.setOnLoadCallback(initialize);

// --></script>
</head>
<body>
<h1>Google Feed API Sample (3)</h1>
<h2>JavaScript++かも日記</h2>
<div id="feed"></div>
</body>
</html>


　上記サンプルはRSSデータの最初のタイトルと本文のみですが、複数のタイトルと本文を表示させるには以下のようにします。CSSで見た目を装飾すれば手軽に自分のページ内に他人の情報を組み込むことができます。（サンプルを実行する）

<html>
<head>
<title>Google Feed API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA"></script>
<script type="text/javascript"><!--
function initialize() {
var feed = new google.feeds.Feed("http://jsgt.org/mt/01/atom.xml");
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 eTitle = entry.title;
var eCont = entry.content;
container.innerHTML += "<h3>"+eTitle+"</h3>";
container.innerHTML += eCont+"<hr>";
}
}
});
}
google.load("feeds", "1");
google.setOnLoadCallback(initialize);

// --></script>
</head>
<body>
<h1>Google Feed API Sample (4)</h1>
<h2>JavaScript++かも日記</h2>
<div id="feed"></div>
</body>
</html>



[目次へ]

(2007.4.22, 2007.4.28修正)