HTMLファイルにfeedを読み込んでみる

qve.cc と qve.jp のドメインを分離しました。
理由はいたって明白、やはり「テストサイトが必要になった」からです。
そこで、qve.cc と qve.jp のトップページに、ドメインを分離した旨のHTMLを設置したわけなんですが、お引っ越しメッセージのような味気なさが気になって…。qve.jp の RSSを表示できないものかと調べてみたところ
tokyoportfieldsさんのサイトで紹介されていた「JavaScript: 外部RSS読み込み, Load external RSS Feeds by JavaScript, “Google Ajax Feeds API”」に挑戦してみました。

Start using the Google AJAX Feed APIにアクセスし、ログインします。私は基本的にログインしっぱなしのことが多いので、いきなり同意画面が表示されました。もし、アカウントがなければ作成してください。

feed を get するURIを入力し[Generate API Key]をクリックします。
すると、基本的なソースが表示されますので、検証用にコピーしてHTMLファイルで保存しました。

Javascriptはある程度理解はしているつもりですが、詳細になると少々怪しくて…。
trial and error で設置してみました。

デフォルトはリスト形式で書き出されていたのを、通常の段落にしました。
あわせて、スニペットも表示させたかったんで、「entry.contentSnippet」も追加。
少々おかしい部分があるかもしれませんが、公開しておきます。
間違いや非合理的な部分の指摘がございましたらお願いします。

「feed.js」外部JSの内容

google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("https://qve.jp/feed/");
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 div = document.createElement("p");
var a = document.createElement("a");
var br = document.createElement("br");
var pp = document.createElement("p");
a.href = entry.link;
var list = "?" + entry.title;
var list2 =  entry.contentSnippet ;
a.appendChild(document.createTextNode(list));
div.appendChild(a);
div.appendChild(br);
container.appendChild(div);
div.appendChild(document.createTextNode(list2));
div.appendChild(pp);
}
}
});
}
google.setOnLoadCallback(initialize);

headタグの中に記述します。

<script type="text/javascript" src="http://www.google.com/jsapi?key=【ここに取得したAPIキーを入れます】"></script>
<script type="text/javascript" src="feed.js"></script>

body中の表示させたい部分に記述します。

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

これで、通常のHTML中にもRSSが表示できるようになりました。