※追記：2015年12月2日より Google Feed API がエラーを返すようになり、ここで紹介したコードが使えなくなりました。
代替案として PHP でプログラムを組む方法を紹介します。

PHP 使用版：コチラです。

以下、Google Feed API を使って、外部サイトのRSSを取得して「新着記事」として表示させる方法を紹介していますが、現在は使えません！

RSSとは？

RSS とは、主にウェブサイトの更新情報を公開するために使われているXMLベースの文書です。
ブログのタイトルやURL、カテゴリー、更新日付、テキストの抜粋など、各記事の情報が記述されています。

例えば、このサイトの RSS の URL はコチラ（https://on-ze.com/feed）になりますが、［RSS リーダー］等のアプリでこの URL を登録すると、最新記事が公開されたとき、即時にお知らせしてくれるので、毎回サイトに訪れる必要がなくなり大変便利です。

今回は、この RSS の仕組みを利用して、記事の一覧を取得・表示させます。

ということを何度かやりました。ですが、その度に過去の案件を見返すことが多いので、備忘録として記事にしておこうと思います。

コードの記述方法

基本的には、HTML の <head>〜</head> 内にて、まず Google API の本体を読み込み、続いてカスタマイズした JavaScript のコードを記述することになります。

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("feeds", "1");
function initialize() {
// フィードの取得
var feed = new google.feeds.Feed("https://on-ze.com/feed");
// エントリの表示数の設定
feed.setNumEntries(3);
// 関数の定義
feed.load(function(result) {
if (!result.error) {
// 読み込みが成功したときの処理
var container = document.getElementById("feed");
var htmlstr = "<ul>";
for (var i = 0; i < result.feed.entries.length; i++) {

var entry = result.feed.entries[i];

var contentSnippet = entry.contentSnippet;
text = contentSnippet.substr(0, 110) + '<span>…Read More</span>';

// 日付の取得
	var pdate = new Date(entry.publishedDate); //Dateクラス
	var pyear = pdate.getFullYear();   //年
	var pmonth = pdate.getMonth() + 1; //月
	var pday = pdate.getDate();        //日

// 日付を2桁表示に変更
	if (pyear < 2000) pyear += 1900;
	if (pmonth < 10) {pmonth = "" + pmonth;}
	if (pday < 10) {pday = "" + pday;}

	var date = pyear + "." + pmonth + "." + pday + " ";

// html生成
	htmlstr += '<li><a href="' + entry.link + '">';
	htmlstr += '<span class="date">' + date + '</span>';
	htmlstr += '<span class="category">' + entry.categories[0] + '</span>';
	htmlstr += '<span class="title">' + entry.title + '</span>';
	htmlstr += '<span class="text">' + text + '</span></a></li>';
}
container.innerHTML = htmlstr;
 } else {
// 読み込みが失敗したときの処理
alert(result.error.code + ":" + result.error.message);
}
});
}
google.setOnLoadCallback(initialize);
</script>

任意のRSSフィードのURLに書き換えることを忘れないようにしてください。

取得した情報を吐き出すには、<body>〜</body> 内の任意の箇所に以下のコードを記述します。

<div id="feed"></div>

また imgsrc = entry.content.match(/src="(.*?)"/igm); などのコードを加えて画像データを取得・表示させることも可能です。

新しい記事が反映されないときは？

ブログには新しい記事があるはずなのに、書きだされた新着記事は古いままというケースも稀にあります。
これは Google がキャッシュしているデータを返してくるのが原因。

その際は、フィードのURLを読み込む箇所で、以下のように修正してください。

var d = new Date();
var dq = d.getMonth()+""+d.getDate()+""+d.getHours();
var feed = new google.feeds.Feed("RSSのURL"+"?"+dq);

これにより、RSS の URL の末尾に日付情報を加え、キャッシュを回避できるようになります。

実装したテストサイトは以下。
ぜひ参考にしてみてください。

サンプル：【Google API】外部サイトのRSS情報を取得して表示させる方法。

補足：
PHP 使用ヴァージョンはコチラです。