依然書いた、「Google AJAX Feed APIを使ってみた」の、応用版です。
複数のRSSを読み込んで、指定した文字が含まれている記事のみ表示します。
サンプルは、トヨタ、日産、ホンダの三社のRSSを取得して、「ハイブリッド」という文字が、記事のタイトルか内容に含まれている場合のみ、表示しています。
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>RSSリーダーサンプル</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAARRyJD439CKrHDwanT8Fq0RROytLWb0IPRySwZrSZnSrYgPFbDRS8wX6SHXCMp5HCtXxVIHdRlc5bxQ"></script>
<script type="text/javascript">
google.load("feeds", "1");
</script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>RSSリーダーのサンプル</h1>
<div id="feed_area"></div>
</body>
</html>
js
// JavaScript Document
var rss_arr = new Array();
var delay = 500;
var keyword = "ハイブリッド";
//rssのリスト
var rss_list = ["http://www2.toyota.co.jp/toyotajp/toyota/jp/news_all_rss.xml",
"http://www.nissan.co.jp/NEWS/rss.xml",
"http://www.honda.co.jp/hotnews/rss/auto.rdf"];
google.setOnLoadCallback(function(){
$("#feed_area").html("読み込み中...");
for(var k = 0; k<rss_list.length; k++){
var feed = new google.feeds.Feed(rss_list[k]);
feed.setNumEntries(50);
feed.load(function(result){
if(!result.error){
for(var i = 0; i<result.feed.entries.length; i++){
if(result.feed.entries[i].title.match(keyword) || result.feed.entries[i].content.match(keyword)){
var rss_obj = new Object();
rss_obj = { title : result.feed.entries[i].title, url : result.feed.entries[i].link, cont : result.feed.entries[i].contentSnippet, date : new Date(result.feed.entries[i].publishedDate).getTime()};
rss_arr.push(rss_obj);
}
}
}
});
}
setTimeout(arr_sort,delay);
});
function arr_sort(){
rss_arr.sort(
function(a,b){
var a_date = a["date"];
var b_date = b["date"];
if(a_date > b_date) return -1;
if(a_date < b_date) return 1;
return 0;
}
);
setTimeout(html_write, delay);
}
function html_write(){
var html = "";
for(var j = 0; j<rss_arr.length; j++){
html += "<dl>";
html += "<dt>";
html += "<a href='";
html += rss_arr[j]["url"];
html += "' target='_blank'>";
html += rss_arr[j]["title"];
html += "</a>---";
html += date_change(rss_arr[j]["date"]);
html += "</dt>";
html += "<dd>";
html += rss_arr[j]["cont"];
html += "</dd>"
html += "</dl>";
}
$("#feed_area").html(html);
}
function date_change(n){
var renewal_day = "";
var date = new Date(n);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDay();
renuwal_day = year + "年" + month + "月" + day + "日";
return renuwal_day;
}
最終的に、htmlの、
<div id=”feed_area”></div>
に、取得して精査した記事を入力します。
var rss_arr = new Array(); var delay = 500; var keyword = "ハイブリッド"; //rssのリスト var rss_list = ["http://www2.toyota.co.jp/toyotajp/toyota/jp/news_all_rss.xml", "http://www.nissan.co.jp/NEWS/rss.xml", "http://www.honda.co.jp/hotnews/rss/auto.rdf"];
最初に、グローバル変数を宣言しています。
var rss_arrは、最終的に表示する記事を、各々連想配列として入力するための配列です。
var delayは、for文の処理を待つための時間です。
var keywordは、チェックする文字列です。
var rss_listは、取得するRSSのURLが格納された配列です。今回は、トヨタ、日産、ホンダのRSS。
google.setOnLoadCallback(function(){
$("#feed_area").html("読み込み中...");
for(var k = 0; k<rss_list.length; k++){
var feed = new google.feeds.Feed(rss_list[k]);
feed.setNumEntries(50);
feed.load(function(result){
if(!result.error){
for(var i = 0; i<result.feed.entries.length; i++){
if(result.feed.entries[i].title.match(keyword) || result.feed.entries[i].content.match(keyword)){
var rss_obj = new Object();
rss_obj = { title : result.feed.entries[i].title, url : result.feed.entries[i].link, cont : result.feed.entries[i].contentSnippet, date : new Date(result.feed.entries[i].publishedDate).getTime()};
rss_arr.push(rss_obj);
}
}
}
});
}
setTimeout(arr_sort,delay);
});
この処理で、rssを読み込んで、精査して、連想配列を作って、出来た連想配列を配列に格納しています。
青文字のfor文は、変数rss_listの数だけ、（今回は3回）繰り返します。
緑文字で、google apiに、RSSを指定して、取得する記事数を指定しています。
if(!result.error){
以降が、読み込んだRSSに対する処理です。
黄色文字は、取得した記事分の繰り返し処理です。
赤文字のif文の条件が、記事のタイトルか記事の本文に、「ハイブリッド」という言葉があるかないかです。
もしあったら、そのつど新しいオブジェクトを作成して、連想配列を作って、記事のタイトルとURLと、記事の本文と、更新日を格納しています。更新日は、その後の処理でソートさせたいので、getTime()で、数値に変換しています。ひょっとしたら、変換しなくてもソート出来るかも？出来た連想配列を、配列rss_arrに格納します。
黒文字のsetTimeout(arr_sort,delay)で、for文の処理をちょっと待ってから、関数arr_sortを実行しています。
function arr_sort(){
rss_arr.sort(
function(a,b){
var a_date = a["date"];
var b_date = b["date"];
if(a_date > b_date) return -1;
if(a_date < b_date) return 1;
return 0;
}
);
setTimeout(html_write, delay);
}
function html_write(){
var html = "";
for(var j = 0; j<rss_arr.length; j++){
html += "<dl>";
html += "<dt>";
html += "<a href='";
html += rss_arr[j]["url"];
html += "' target='_blank'>";
html += rss_arr[j]["title"];
html += "</a>---";
html += date_change(rss_arr[j]["date"]);
html += "</dt>";
html += "<dd>";
html += rss_arr[j]["cont"];
html += "</dd>"
html += "</dl>";
}
$("#feed_area").html(html);
}
function date_change(n){
var renewal_day = "";
var date = new Date(n);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDay();
renuwal_day = year + "年" + month + "月" + day + "日";
return renuwal_day;
}
関数arr_sortは、配列の中身を、連想配列のdateでソートしています。
さらにsetTimeoutで処理を待って、htmlに書き出す関数html_writeを実行しています。
html += date_change(rss_arr[j]["date"])
は、そのまま出力すると数値なので、関数date_changeで、日付のフォーマットを作ってます。
// JavaScript Document
var rss_arr = new Array();
var delay = 500;
var keyword = “ハイブリッド”;
//rssのリスト
var rss_list = ["http://www2.toyota.co.jp/toyotajp/toyota/jp/news_all_rss.xml",
"http://www.nissan.co.jp/NEWS/rss.xml",
"http://www.honda.co.jp/hotnews/rss/auto.rdf"];
google.setOnLoadCallback(function(){
$(“#feed_area”).html(“読み込み中…”);
for(var k = 0; k<rss_list.length; k++){
var feed = new google.feeds.Feed(rss_list[k]);
feed.setNumEntries(50);
feed.load(function(result){
if(!result.error){
for(var i = 0; i<result.feed.entries.length; i++){
if(result.feed.entries[i].title.match(keyword) || result.feed.entries[i].content.match(keyword)){
var rss_obj = new Object();
rss_obj = { title : result.feed.entries[i].title, url : result.feed.entries[i].link, cont : result.feed.entries[i].contentSnippet, date : new Date(result.feed.entries[i].publishedDate).getTime()};
rss_arr.push(rss_obj);
}
}
}
});
}
setTimeout(arr_sort,delay);
});
function arr_sort(){
rss_arr.sort(
function(a,b){
var a_date = a["date"];
var b_date = b["date"];
if(a_date > b_date) return -1;
if(a_date < b_date) return 1;
return 0;
}
);
setTimeout(html_write, delay);
}
function html_write(){
var html = “”;
for(var j = 0; j<rss_arr.length; j++){
html += “<dl>”;
html += “<dt>”;
html += “<a href=’”;
html += rss_arr[j]["url"];
html += “‘ target=’_blank’>”;
html += rss_arr[j]["title"];
html += “</a>—”;
html += date_change(rss_arr[j]["date"]);
html += “</dt>”;
html += “<dd>”;
html += rss_arr[j]["cont"];
html += “</dd>”
html += “</dl>”;
}
$(“#feed_area”).html(html);
}
function date_change(n){
var renewal_day = “”;
var date = new Date(n);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDay();
renuwal_day = year + “年” + month + “月” + day + “日”;
return renuwal_day;
}
