RSSフィードを取得して【NEW】画像をつけたい

質問

現在サイトを作成していて、そのトップページで他サイトのRSSを取得して表示しています。
表示する事自体は出来たのですが、現在の日付より1週間以内のフィードには【NEW】という画像をつけたいと考えています。

初心者なりに試行錯誤してやってみたのですが、いっこうに上手くいきません。
【NEW】の画像を表示するには下記のJavascriptを使用しています。

<script language="JavaScript">
<!--
function newUp(y, m, d, c) {
delDay = 7;
oldDay = new Date(y + "/" + m + "/" +d);
newDay = new Date();
d =(newDay - oldDay) / (1000 * 24 * 3600);
if(d <= delDay) {
if(c == "new") document.write("<img src='./img/new.gif' border='0'>");
if(c == "up") document.write("<img src='./img/up.gif' border='0'>");
}
}
//-->
</script>

<script>newUp(年,月,日,"new")</script>

フィードの年月日を取得してから、どうやって上記のコードの年、月、日のとこに変数を持っていくのかが分かりません。

RSSの取得については下記サイトを参考にしました。

http://neta-times.net/entries/953/

下記が私のページのURLです。ソースは凄く稚拙でお見苦しいですがご了承ください。

http://aviflag.orsp.net/avispa-news.shtml

ご存知の方いらっしゃいましたらご教授ください。
よろしくお願いします。

回答No.3

fujillin · ベストアンサー

googleのＡＰＩはわかりませんけれど…

ご提示のnewUp()ではdocument.writeで直接HTMLに書き出そうとしているのに対して、フィードの表示の方は変数useFeedに全体のHTMLを作成してから、<div>に放り込んでいるので、そのままだとうまくいきません。
useFeedを作成中に同時に書き込むか、あるいは、一度現在のままで出力して、後でnewマークをつけて回るかのどちらかでしょうか。
newマークをどこに入れるのかが不明ですが、とりあえず日付の後に入れると仮定するとして。

◇ 現状のコードを生かして、後者の方法でやるなら、
function newUp() {
//7日前の零時を取得
var refDate = new Date();
refDate = new Date(+refDate - (7*24*60*60*1000 + refDate%86400000 - refDate.getTimezoneOffset()*60000));
//newの画像用タグ
//var newImage = '<img src="btn1.gif" alt="new">';
var newImage = document.createElement("img");
newImage.src = "btn1.gif";
newImage.alt = "new";

var div = document.getElementById("feed").firstChild.getElementsByTagName("div");
var i=0, d;

while (d = div[i]) {
var date = new Date(d.innerHTML.match(/\d{4}\/\d\d\/\d\d/)[0]);
if (date > refDate) d.appendChild(newImage.cloneNode(false));
i += 2;
}
}
としておいて、feedOutput()の最後でnewUp()を呼び出してあげればよろしいかと。
container.innerHTML = '<div>' + useFeed + '</div>';　の次に
newUp();
を追加。

◇ 前者の方法でやるなら、現状のfeedOutput()を変更して…
最初の方に以下を追加（var container =　～～の後あたり）
var refDate = new Date();
refDate = new Date(+refDate - (7*24*60*60*1000 + refDate%86400000 - refDate.getTimezoneOffset()*60000));
var newImage = '<img src="btn1.gif" alt="new">';

さらにuseFeedを作成する時に、画像を入れたい場所に画像タグを追加するように修正
useFeed += '<div style="float:left;width:115px;">' + y + "/" + m + "/" + d + "(" + day[youbi] + ")";
useFeed += (date>refDate)?newImage:""; //←new画像の表示を追加
useFeed += '</div><div style="float: left;width:400px;height:18px;overflow:hidden;"><a href="' + entry.link + '" target="_blank" title="' + entry.title + '【' + entry.blogName + '】">' + entry.title + '</a></div>';
のような感じでできるかと思います。

* var y = date.getYear(); はそのままだとブラウザによってはおかしな表示になるので var y = date.getFullYear();としてください。
* 画像の位置が違う場合は調整してください。
* 7日前を含むのか含まないかで判定条件がかわりますので、そのあたりも調整が必要。
* 画像サイズが不明なので、現状のレイアウトでうまく入るのかどうか不明ですが、日付のフィールドを広げるか、画像のサイズを調整するなどの調整も必要かも知れません。

お礼

fujillin様

ご回答ありがとうございました。
教えて頂いた方法でなんとか出来ました。
どちらも試してみたのですが、”前者の方法”の方がコードが理解しやすかったのでそちらで表示させました。
とても勉強になりました。
ありがとうございました。

回答No.2

yyr446

あっ間違えた。
　　×　.stylefloat　.cssfloat
　　○　.styleFloat　.cssFloat
ね、
それからforループの最後で、回り込み解除しとかないと...
　 useFeed = document.createElement("div");
　 useFeed.style.clear = "both";
　 containerdiv.appendChild(useFeed);
も追加ね。

※見れば見るほど、<ul><li></li><li></li>.....</ul>の方がいい。

回答No.1

yyr446

別に他でも使わないなら、外出しの関数にしなくてもいいと思う。それより、何行も<div>でリスティイングしてる方が見苦しいし、配置しにくいぞ。<ul>使ったほうがよかろう。
あと、document.writeとかinnnerHTMLはどうしてもって時以外は使わん方が良い。とりあえず、見苦しいいまま直してみた。
function feedOutput(feedId,listNum){
　var useFeed,useDate,entry,date,y,m,d,youbi,day,link,containerdiv,img;
　var today = new Date();
　containerdiv = document.createElement("div");
　entryArray = asort(entryArray, "sortDate");
　if(listNum==100) listNum = entryNum;
　for (var i = 0; i < listNum; i++) {
　 entry = entryArray[i];
　 date = new Date(entry.publishedDate);
　 y = date.getFullYear()-2000;y = (y<10)?"0"+y:y;
　 m = date.getMonth() + 1;m = (m<10)?"0"+m:m;
　 d = date.getDate();d = (d<10)?"0"+d:d;
　 useDate = y + "年" + m + "月" + d + "日";
　 youbi = date.getDay();
　 day = new Array("日","月","火","水","木","金","土");
　 useFeed = document.createElement("div");
　 useFeed.style.styleFloat = "left";
　 useFeed.style.width = "115px";
　 useFeed.appendChild(document.createTextNode(
　　　y + "/" + m + "/" + d + "(" + day[youbi] + ")"));
　 containerdiv.appendChild(useFeed);
　 useFeed = document.createElement("div");
　 useFeed.style.stylefloat = "left";
　 useFeed.style.width = "400px";
　 useFeed.style.height = "18px";
　 useFeed.style.overflow = "hidden";
　 a = document.createElement("a");
　 a.href = entry.link;
　 a.target = "_blank";
　 a.title = entry.title + '【' + entry.blogName + '】';
　 a.appendChild(document.createTextNode(entry.title));
　 useFeed.appendChild(a);
　 containerdiv.appendChild(useFeed);
　 useFeed = document.createElement("div");
　 useFeed.style.styleFloat = "right";
　 img = document.createElement("img");
　 img.style.border = "0px";
　 img.src =((today.getTime()-date.getTime()) < 7*24*3600*1000)?
　　 "./img/new.gif":"./img/up.gif";
　 img.alt =((today.getTime()-date.getTime()) < 7*24*3600*1000)?"New":"Up";
　 useFeed.appendChild(img);
　 containerdiv.appendChild(useFeed);
　}
　while(container.hasChildNodes())
　 container.removeChild(container.firstChild);
　container.appendChild(containerdiv);
}
※あと、.stylefloatはIEね、他は.cssfloat

お礼

yyr446様

ご回答ありがとうございました。
ただ初心者の私にはちょっと難しかったですね。
もっと勉強してソースを理解できるように頑張ります。
本当にありがとうございました。