[リスト表示]HTMLにRSSを取得して表示させるGoogle AJAX Feed API

JavaScript

外部RSSを取得してHTML上に表示させる方法としてGoogle AJAX Feed APIが使えます。デフォルト表示されるタイトルはdiv要素内に書き出されます。これをリスト要素で表示するようにカスタマイズしていきます。

Google AJAX Feed APIを使うためには

Googleアカウントを取得している必要があります。アカウントを取得している場合はhttp://code.google.com/intl/ja/apis/loader/signup.htmlへアクセスし、APIキーを取得する必要があります。

APIキーの取得

My web site URL入力フォームにRSSを表示させる自分のサイトアドレスを入力します。完了したら『Generate API Key』を押しましょう。

生成されたAPIキーをHTMLに埋め込む

1項目目の『Your key is:』欄がGoogle AJAX Feed APIを使用してRSSを表示させるために必要なAPIキーになります。これをコピーして以下のソース内に記述します。

<script src="https://www.google.com/jsapi?key=取得したAPIキー" type="text/javascript"></script>

見ての通りjavascriptですのでHTML内の<head></head>に記述します。これで使用準備が終了です。

実際にRSS記事をHTMLに表示させる

RSS記事の取得はJavaScriptで表示させます。以下がデフォルトの実行コードです。

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

function initialize() {
var feed = new google.feeds.Feed("取得するサイトのアドレス"); //RSSアドレス指定
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed"); //表示させるID名指定
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries&#91;i&#93;;
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>

これで下記コードを記述した場所にRSS記事を表示させる事ができます。書き出されるのはID名が『feed』のdiv要素内になります。なおdiv要素である必要はありませんが、ID名が付けられた要素内の記事はdiv要素で囲まれます。

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

RSS記事表示 by オレのWEBPAD｜サンプル

英文が改行されない場合の対処法｜HTML

属性の値にアスタリスク『＊』を指定するメリット｜HTML

シェイプをきれいに描く方法,ピクセルにスナップさせる｜Photoshop

住んでる町のチラシが見れる『チラシ部！』｜面白ウェブサービス

ul要素に置き換え、記事へのリンクを指定する

現状のですとdiv要素で囲まれた記事が羅列されるだけでリンクも付けられていません。これをul要素に置き換えリンクも指定するように修正を加えます。おまけで表示させる記事数も増やしています。

<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("取得するサイトのアドレス");
feed.setNumEntries(10); //記事数の指定
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed1");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries&#91;i&#93;;
var li = document.createElement("li"); //記事タイトルを囲む要素をliに変更
li.innerHTML = '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>'; //li内の記事に対しての指定。新規ウィンドウで開くリンク要素を付加
container.appendChild(li);
}
}
}
);
}
google.setOnLoadCallback(initialize);
</script>

HTMLで表示させたい箇所に以下のコードを記述。