アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション:ライブラリー

2008年1月28日

「Google AJAX Feed API」を使って外部RSSを読み込む。

夢実現のアファメーションを実践する起業家にもっとも読まれているブログは?

APIってすばらしい!

久しぶりの日記ですが…。

なんだか1月中はバタバタとしていて、やっとひと段落した感じ。

…まだ終わってないけど。...orz

今さらながら、いろいろとやったことの備忘録。

「Google AJAX Feed API」を使って外部RSSを読み込む。

以前から気になってたんだけど、別段使う必然性がなかった「Google AJAX Feed API」。(公開されたのが去年の4月だから、今さら…な感じですんません。汗)

今回、諸事情によりいろいろ調べて実験してみたけど…うんちくをたれるまでもなくチョー簡単っすね!

Googleアカウントの取得。

何はともあれ、「Google Analytics」やら「AdWords」やら「Google Maps」やら、GoogleのAPIサービスを使うのであれば必須になるので、アカウントの取得ページでとりあえず取っておくと便利。

Google API Keyのサインアップ。

んでもって、アカウントを取得したら次は「Google API Key」のサインアップです。

…といっても別にすごく難しいことがあるわけでもなく、サインアップ用のページで、使用許諾(“I have read and agree with the terms and conditions”って書いてあるところ)にチェックを入れて、自分のサイトのURLを入力するだけ。

あとはJSを貼り付けるだけ。

そうするとAPI Keyが生成されて、あとはサンプルで表示されているサンプルコード(htmlとJavaScript)を、ページに貼り付けるだけです。

コードはこんな感じ。

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR API KEY"></script>
<script type="text/javascript">
google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("http://www.dokuritsu-kigyo.net/blog/index.xml");
feed.setNumEntries(7);//フィードの表示数の設定

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("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);

</script>

(とりあえず、デフォルトでは4つしか表示されないfeedを、「feed.setNumEntries(7);」で表示数を7つに指定してみる。)

うえのコードの「YOUR API KEY」のところに、吐き出されたAPIを入れて、「new google.feeds.Feed();」のカッコ内に引っ張りたいRSSを指定すれば完了。

あとはhtml内に「feed」というidを持ったdiv(<div id="feed"></div>)を用意すれば、その中に読み込んだRSSを展開してくれる。

※このとき、IE6(だからなのか?)でAPI Keyを取得すると、サンプルコードの空白文字部分が「&nbsp;」(“&”は半角)で表示されてしまうので注意が必要。

「Google AJAX Feed API」の素晴らしいところは、RSSのバージョンやら仕様をAPIの中で吸収してくれてるので、ほとんどのRSSを読み込んでくれること。

なので、ブログに限らずRSSを吐き出しているサイトだったら、そのRSSのフィードを指定すれば簡単に表示できちゃいます。(パチパチッ!)

多少カスタマイズは必要。

サンプルで吐き出されるhtmlは、一行ごとにdivで表示するみたいなので、あんまり美しく(?)ない。

なので、表示や吐き出されるデータをカスタマイズするには、JavaScriptやCSSの部分をごにょごにょとカスタマイズしないといけません。

んが、そのへんはいろんな人が自分用(?)にカスタマイズしたJSを公開しているので参考にすれば大丈夫。

ちなみに、カスタマイズに必要なCSSやJSの仕様などはこちら。

なにはともあれ、別ドメインで既にブログを立てていて、後から会社の静的なページや、他のサイトに記事を読み込みたい…なんて方はすっごくラクチンなので、ぜひお試しを。

参考サイト

この記事に関連する(かもしれない)書籍

 

投稿者 kuro : 2008年1月28日 20:23 | ID:757

ページトップ△

ページトップ△