フィードをサクっと表示できるものを探していたら、「Google AJAX Feed API」なるものを提供しているという記事を発見。
備忘録も兼ねて、メモ。
dlで表示してみる
jsの内容
参考：Google AJAX Feed APIでRSSを読み込もう
こちら、汎用性の高い「dl」で表示されるように作成されていました。ほとんどそのまま使えて大助かり。
とりあえずファイル名を「feed.js」として、以下を記述します。
google.load("feeds", "1");
// 読込処理
function initialize() {
// 読み込むRSSのURLを設定する。
var feed = new google.feeds.Feed("ここに表示したいフィードのurl");
// 取得件数を引数に設定。
feed.setNumEntries(5);
// 読込実行
feed.load(function(result) {
// 正常に読み込めたか判定
if (!result.error) {
// idがrssAreaのオブジェクトを取得
var container = document.getElementById("rssArea");
// 要素の削除
// （※ここでrssArea内の要素をすっきりきれいに削除。）
while ( container.firstChild ) {
container.removeChild( container.lastChild );
}
// 取得した記事情報が0件の場合は、記事情報が無い旨を出力して終了。
if (result.feed.entries.length == 0) {
var p = document.createElement("p");
var pStr = "現在、記事情報はありません。";
p.appendChild(document.createTextNode(pStr));
container.appendChild(p);
return;
}
// dlタグを生成
var dl = document.createElement("dl");
// 取得した記事情報分処理を実行
for (var i = 0; i < result.feed.entries.length; i++) {
// 取得した記事情報を取得。
var entry = result.feed.entries[i];
var dt = document.createElement("dt");
var dd = document.createElement("dd");
var a = document.createElement("a");
// 日付の書式設定
// （※ここで取得した記事情報から日付を取得。）
var date = new Date(entry.publishedDate);
var dateY = date.getFullYear();
var dateM = date.getMonth() + 1;
var dateD = date.getDate();
var dtStr = dateY + "/" + dateM + "/" + dateD;
// dtの設定
dt.appendChild(document.createTextNode(dtStr));
// aの設定
// （※ここで取得した記事情報のURLを取得してリンク先に設定。）
a.setAttribute("href", entry.link);
a.setAttribute("target", "_blank");
// （※ここで取得した記事情報のタイトルを取得して、リンクを設定。）
a.appendChild(document.createTextNode(entry.title));
// ddの設定
dd.appendChild(a);
dl.appendChild(dt);
dl.appendChild(dd);
}
container.appendChild(dl);
}
});
}
// 作成した関数（initialize）が読込時に呼び出されるようにコールバック関数として登録。
google.setOnLoadCallback(initialize);
<head>内に記述する内容
参考にしたサイトでは「API Keyが必要」と記述されていますが、現在API Keyは不要の模様。
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="js/feed.js"></script>
表示したい場所に記述する内容
<div id="rssArea"><p>Now Loading...</p></div>
<p>の中は、もちろん画像でも大丈夫。
表示サンプル
こちらからどうぞ。
アメブロのフィードを「PR:」なしで表示する
アメブロは、フィード内に広告が入ります。その広告を除去した状態で表示します。
※都合によりサンプルなし
参考：グーグルのAPIを利用したアメブロの記事埋め込み｜田舎のWEBコンポーザーの日課
google.load("feeds", "1");
function initialize()
{
var feed = new google.feeds.Feed("ここにアメブロのフィードurl");
feed.setNumEntries(15)
feed.load(function(result)
{
if (!result.error)
{
var container = document.getElementById("feed");
while ( container.firstChild ) {
container.removeChild( container.lastChild );
}
// 取得した記事情報が0件の場合は、記事情報が無い旨を出力して終了。
if (result.feed.entries.length == 0) {
var p = document.createElement("p");
var pStr = "現在、記事情報はありません。";
p.appendChild(document.createTextNode(pStr));
container.appendChild(p);
return;
}
var list = "";
list = '<dl>';
for (var i = 0; i < result.feed.entries.length; i++)
{
var entry = result.feed.entries[i];
if(entry.title.match(/^PR:/)) {
}
else{
var strdate = createDateString(entry.publishedDate);
list += '<dt>' + strdate + '</dt>';
list += '<dd>';
list += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';
list += '</dd>';
}
}
list += '</dl>';
container.innerHTML = list;
}
});
}
function createDateString(publishedDate)
{
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth() + 1;
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
var strdate = pyear + "/" + pmonth + "/" + pday ;
return strdate;
}
google.setOnLoadCallback(initialize);
<head>内に記述する内容、表示したい場所に記述する内容は同じです。
最近のコメント