プロが教える店舗＆オフィスのセキュリティ対策術

現在、別ページの新着RSSフィードをGoogle AJAX Feed

解決済

  • 質問者：yumipopo777
  • 質問日時：
  • 回答数：3件

現在、別ページの新着RSSフィードをGoogle AJAX Feed APIで取得しトップページに新着タイトルを表示させるようにしています。
このタイトルに一定期間new表示をさせるには、どこに何を記述すれば良いのかを教えて頂きたいのです。

現在トップページには次のようなJavascriptを記述しております。


<script type="text/javascript">
var _handleJson = function( json ) {
if ( json.responseStatus != 200 ) return;
var i, d, t = '<ul>', e = json.responseData.feed.entries;
for ( i = 0; i < e.length; i++ ) {
d = new Date(e[i].publishedDate);
t += '<li>' + '<a href="' + e[i].link + '">' + e[i].title + '</a> '
+ '(' +(d.getFullYear() - 2000) + '/' +(d.getMonth() + 1) + '/'+d.getDate() + ')' +'</li>';

}
document.write( t + '</ul>' );
};

(function() {
var blogUrl = 'http://******.com/rss15.xml';
var apiUrl = 'http://ajax.googleapis.com/ajax/services/feed/lo …
document.write( '<sc' + 'ript type="text/javascript" src="' + apiUrl + encodeURIComponent(blogUrl) + '"></sc' + 'ript>');
})();



上記の記述で「後期会員募集が始まりました(10/09/01)」と最新の記事タイトルが表示されるようになりました。
これを「後期会員募集が始まりました(10/09/01)new!」としたいのです。

上のスクリプトのどこに一定期間newを表示させるスクリプトを記述すれば良いでしょうか？
申し訳ありませんが、何卒ご教授宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： yyr446
  • 回答日時：

さっきのを、汎用的にも使えるように、


わかりやすく、配置しなおしたつもりです。
（コメントは入れなかったけど、ソースはさっきより、追いやすいですよね）

<body>
<p>
<h3>記事一覧</h3>
<div id="container">Loading...</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds","1");
google.setOnLoadCallback(function(){
(function(container,url){
　var feed = new google.feeds.Feed(url);
　feed.setNumEntries(10);
　feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
　feed.load(function(result){
　 if(result.status.code=="200"){

　　 while(container.hasChildNodes())
　　　container.removeChild(container.firstChild);

　　 var ul = document.createElement("ul");
　　 ul.style.listStyleType = 'none';

　　 for(var i=0;i<result.feed.entries.length;i++){

　　　var d = new Date(result.feed.entries[i].publishedDate);
　　　var today = new Date();

　　　var li = document.createElement("li");
　　　var a = document.createElement("a");

　　　a.href = result.feed.entries[i].link;
　　　a.appendChild(document.createTextNode(result.feed.entries[i].title));
　　　li.appendChild(a);
　　　li.appendChild(document.createTextNode(
　　　 "("+ (d.getFullYear()-2000)+"/"+(d.getMonth()+1)+"/"+d.getDate()+")"
　　　));

　　　var newspan= document.createElement("span");
　　　newspan.appendChild(document.createTextNode(' New!'));
　　　newspan.style.color="red",newspan.style.fontWeight = "bold";

　　　if((today.getTime()-d.getTime()) < 3*24*3600*1000)
　　　 li.appendChild(newspan);

　　　li.normalize();
　　　ul.appendChild(li);

　　 }
　　 container.appendChild(ul);
　 }
　});
})(document.getElementById("container"),
　 "http://******.com/rss15.xml");
});
</script>
</p>
</body>
    • good
    • 0
    • 件
通報する
この回答へのお礼

出来ました～Ｏ(≧▽≦)Ｏ ワーイ♪
何度も何度も、本当に親切・丁寧に教えて下さり有難うございました。
心より感謝致しております。
本当に本当に有難うございました<(_ _)>

通報する
お礼日時：2010/09/30 21:32

No.2

  • 回答者： yyr446
  • 回答日時：

Google AJAX Feed の新しいAPIを使ってこう書けます。


JSONPのScriptは不要です。
（全角空白スペースでインデントしてます。コピぺ時は半角スペースにしてね）

<body>

<div id="container">ここに記事リストをLoading...</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds","1");
google.setOnLoadCallback(function(){
(function(container){
　var blogUrl = 'http://******.com/rss15.xml';
　var feed = new google.feeds.Feed(blogUrl);
　feed.setNumEntries(10);
　feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
　feed.load(function(result){
　 if(result.status.code=="200"){
　　 while(container.hasChildNodes())
　　　container.removeChild(container.firstChild);
　　 var ul = document.createElement("ul");
　　 ul.style.listStyleType = 'none';
　　 for(var i=0;i<result.feed.entries.length;i++){
　　　var title = result.feed.entries[i].title;
　　　var link = result.feed.entries[i].link;
　　　var d = new Date(result.feed.entries[i].publishedDate);
　　　var today = new Date();
　　　var li = document.createElement("li");
　　　var a = document.createElement("a");
　　　a.href=link;
　　　a.appendChild(document.createTextNode(title));
　　　var span = document.createElement("span");
　　　var newspan= document.createElement("span");
　　　newspan.appendChild(document.createTextNode(' New!'));
　　　newspan.style.color="red",newspan.style.fontWeight = "bold";
　　　span.appendChild(document.createTextNode(
　　　 "("+ (d.getFullYear()-2000)+"/"+(d.getMonth()+1)+"/"+d.getDate()+")"
　　　));
　　　if((today.getTime()-d.getTime()) < 3*24*3600*1000){
　　　 span.appendChild(newspan);
　　　 //span.normalize()
　　　}
　　　li.appendChild(a);
　　　li.appendChild(span);
　　　ul.appendChild(li);
　　 }
　　 container.appendChild(ul);
　 }
　});
})(document.getElementById("container"));
});
</script>

</body>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
言われたとおり、全角スペースは半角スペースして
上記をコピペしてUPロードしましたが…残念賞でした＾＾；

http://www.katch.ne.jp/~tsc-07/test.htm

↑がその結果です。
何が間違っているのか…きっと私が何かを間違えているんだと思います。

何度もすみませんでした。
有難うございました<(_ _)>

通報する
お礼日時：2010/09/30 19:32

No.1

  • 回答者： yyr446
  • 回答日時：

d = new Date(e[i].publishedDate);


で記事の公開日を取得するように
var today = new Date();
で本日のDateオブジェクトを取得して、これを比較し、
差がxxx時間(ミリ秒)ならば new表示のタグを追加すれば
よろしいかと。

　三日の場合
if((today.getTime() - d.getTime()) < 3*24*3600*1000 )
{

}

new表示のタグの追加、別にinnerHTMLでやるならそのまま</li>の前に
追記するだけ
<span style="color:red;font-weight:bold;">New !</span>
とか
    • good
    • 0
    • 件
通報する
この回答へのお礼

早々のご返信をありがとうございます。

var today = new Date();

if((today.getTime() - d.getTime()) < 3*24*3600*1000 )
{

}

をソースの中のいろいろな場所に書いて試したのですが、表示されませんでした。
全くJavascriptの知識がないものですから…すみません。
もっと考えてみます。
有難うございました<(_ _)>

通報する
お礼日時：2010/09/30 18:19

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報