memocarilog

HTMLの静的サイトのトップページ等へ、Google Ajax Feed API を使用して外部ブログのRSSを表示した場合に、外部ブログを更新した後などに表示内容が反映されるのに時間がかかってしまって困りました。

原因としては、RSSのキャッシュを拾って表示する為のようです。
以下の記事が大変参考になりました。

参考記事に対策方法もありました。
URLのあとにダミークエリを追加して強制的にキャッシュを更新させるとよいみたいです。

具体的にはRSSアドレスのあとに文字列を ? でつないで追加します。
つなぐ文字列は、現在時刻を取得してRSSアドレスの後ろにつなぎます。時間によってつなぐ文字列の数字を変え、その時間に応じたキャッシュで表示が可能となるようです。

以下のようにGoogle Ajax Feed APIのRSSアドレスを指定する箇所のあとに現在の時刻を入れると随時リアルタイムでRSSを拾えるようになります。

"https://memocarilog.info/feed" + "?" + (new Date()).getTime()

ただキャッシュを使わないと当たり前ですが、表示が結構遅くなります。

時間を指定して更新するようにすれば、その時間ごとのキャッシュを利用できる為表示速度を上げる事が可能になります。

上記の参考記事には1時間ごとにキャッシュを更新して表示をするコードがあったので、そのコードを参考にさせて頂き、私は分単位がいいかなと思ったので以下のようにしました。

var d = new Date();
var dq = d.getMonth()+""+d.getDate()+""+d.getHours()+d.getMinutes();
var feed = new google.feeds.Feed("https://memocarilog.info/feed?"+dq);

最終的には以下のコードでRSSから最新の5件の記事タイトルを分単位でキャッシュを更新して表示できました。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("feeds", "1");

function initialize() {
// ↓ 分単位のキャッシュ更新指定
var d = new Date();
var dq = d.getMonth()+""+d.getDate()+""+d.getHours()+d.getMinutes();
// ↓ フィードのアドレス
var feed = new google.feeds.Feed("https://memocarilog.info/feed?"+dq);
// ↓ （）内に表示件数指定
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 dd = new Date(entry.publishedDate); // now
var yearNum = dd.getYear();
if (yearNum < 2000) yearNum += 1900;
var m = dd.getMonth() + 1;
if (m < 10) {m = "0" + m;}
var d = dd.getDate();
if (d < 10) {d = "0" + d;}
var date = yearNum + "." + m + "." + d + " ";
// ↓ htmlへ表示させる内容
container.innerHTML += "<div><span class='date'>" + date +"</span>" +"<span class='feed_articl'>" + entry.title + "</span</div>";
}
}
});
}
google.setOnLoadCallback(initialize);
</script>

Google Feed APIを表示させる方法は以下の記事が参考になりました。