スタイルシートマニア

Google Feed APIでRSS情報をサイトに表示(基本編 2) | ホームページカスタマイズ Tips

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

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がループする回数以下なら;+1){実行する処理}を繰り返しやります」っというのを書いています。
「var i = 0」で「i」は0からスタートしますよー。
「 i < result.feed.entries.length;」で「result.feed.entries.length」が「i」の数以下ならっという条件
「i++」で「i」にプラス1する。
っということです。
「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

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

Author:庄野英朗
Comments:0

庄野英朗

Source Marine 代表
デザイン・コーディング・PHPアプリケーションまでこなす。
マルチデザインプログラマ。

コメントを残す