Google Feed APIでRSS情報をサイトに表示（基本編 2）

今回は具体的に少し動かしてみようと思います。
まず、基本系

google.load("feeds", "1");
function initialize(){
// RSSの中身を解析して表示する処理
}
google.setOnLoadCallback(initialize);

次に読み込むRSSを指定

var feed = new google.feeds.Feed("http://source-marine.net/css-mania/feed");

これは、google.feeds.Feed(“RSSのURL”);で指定します。

続いて、準備したRSSの情報を呼び出します。

feed.load(dispfeed);

これは、先ほどgoogle.feeds.Feed(“RSSのURL”);で取得した情報を「var feed」に格納して、これを元にRSSの中の情報を「feed.load(関数)」で読み込んで後で作る関数で処理をしています。
これで前準備は完了！

まだ、RSSが取得できなかった時の処理やらなんやらありますが、その辺はまた後でやるとして(^^;
feed.load(dispfeed);で書いたdispfeedという関数の処理を作って行きます。

function dispfeed(result){
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
　var entry = result.feed.entries[i];
　htmlstr += '<a href="' + entry.link + '">' + entry.title + '</a>';
 　}
container.innerHTML = htmlstr;
}

まずは、「for() {　}」っというループ処理。
これは、僕も勉強し始めた時に相当悩まされました。
分かってしまうと意外と簡単なんです。

これは「for(数字宣言（変数宣言）;iがループする回数以下なら;＋１){実行する処理}を繰り返しやります」っというのを書いています。
「var i = 0」で「i」は0からスタートしますよー。
「 i < result.feed.entries.length;」で「result.feed.entries.length」が「i」の数以下ならっという条件
「i++」で「i」にプラス１する。
っということです。
「result.feed.entries.length」っというのがRSSにある記事（以下、エントリ）の数を数えてくれています。
これは「配列等など.length」っという形でその中にいくつあるか？っというのを数える時に使えたりします。
まあ、簡単に書いてしまうなら「for(var i = 0; i < 10; i++)」っという事ですね。
ただ、毎回「 i < 10」の部分を人間が数えていたらあほくさいので「result.feed.entries.length」という関数を使ってループ回数を決めているわけです。

そして、ここからが重要な部分になってきます。
「var entry = result.feed.entries[i];」っというのは、いくつかあるエントリを一つ一つ分解してタイトルやリンク先の情報を入れているんです。
「[i]」っというのはループ回数の「i」ですね。
だからこれは、一つ目のエントリの情報を「result.feed.entries[1]」で取得して「var entry」に入れているわけです。（正確には、0からスタートするので二つ目）
そして、「entry.title」でタイトルを表示して「 entry.link」でリンク先を表示するということです。
多分これでもわからない人にはわからないんだろうなぁ・・・。（僕がそうでした。）
まあ、使っていくうちに分かれば大丈夫！
そんでもってしれーっっと「var htmlstr = “”」頭の方で宣言した「htmlstr」！
「htmlstr +=」で先ほどせっせと作った「'<a href=”‘ + entry.link + ‘”>’ + entry.title + ‘</a>’」を継ぎ足し継ぎ足し入れて行っているわけです。
そして、最後に「container.innerHTML = htmlstr;」で表示っという構造になっているのです。

まとめると

google.load("feeds", "1");
function initialize(){
var feed = new google.feeds.Feed("http://source-marine.net/css-mania/feed"); 
feed.load(dispfeed); 
function dispfeed(result){ 
var htmlstr = ""; 
for (var i = 0; i < result.feed.entries.length; i++) { 　
var entry = result.feed.entries[i]; 　
htmlstr += '<a href="' + entry.link + '">' + entry.title + '</a>'; 　
}//for End 
container.innerHTML = htmlstr; 
}//dispfeed End 
}//initialize End 
google.setOnLoadCallback(initialize);

これでとりあえず完成です。
サンプル：http://source-marine.net/css-mania/sample/feedapi/sample01.html

書いててこんな壮大なお話になるとは思わなかった（笑）

Google Feed APIでRSS情報をサイトに表示（基本編）

だんだん大元のCSSについて語るというところから徐々に離れてきているような気がしている今日この頃ですが、そのあたりは気にしない方向でいきたいと思います。
そんなことはさておき！RSSとは！

RSSは、ニュースやブログなど各種のウェブサイトの更新情報を簡単にまとめ、配信するための幾つかの文書フォーマットの総称である。

※Wikipediaより抜粋

っということなんですが、要するにサイトの更新情報を発信するための一つの道具っと思ってもらっていいんじゃないかと思います。
一時期は大流行してRSSで情報収集している人もいたようないなかったような・・・。
僕の大っきらいな、IEにもRSS取得して更新情報を一覧で見れるっというような機能もありました。
このRSSをちょこちょこっと更新してサーバにアップロードしておくと、RSSを購読しているユーザーに更新情報が送られていち早くそこの情報を得る事ができるっというものです。

今回はこのRSSから情報を取得して更新情報に表示してしまおうじゃないかっというお話です。これができれば、RSSを更新するだけで全てが更新されるので、いちいちRSSを更新してサイトの更新情報を同じように更新なんて手間も省けてしまいます。

まずは準備

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

これであらかじめGoogleのスクリプトを読み込みます。

次にGoogleのスクリプトで何を使うか？っという指定。
今回はFeedを読み込むわけですから「Feed」を指定します。

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

ちなみに「”feeds”, “1”」の”1″はバージョンを指定しています。（あんまり気にしなくてもOK）

そしてこのスクリプトの基本的な流れですが、ここから先でRSSの中身を解析して表示する関数を用意します。そして、その関数をブラウザが読み込んだ時にgoogle.setOnLoadCallback(関数名);で動きだすように設定します。

google.load("feeds", "1");

function initialize(){
// RSSの中身を解析して表示する処理
}
google.setOnLoadCallback(initialize);