- ベストアンサー
JavaScriptを使って新着RSSフィードをトップページに表示する方法
- 現在、別ページの新着RSSフィードをGoogle AJAX Feed APIで取得しトップページに新着タイトルを表示させる方法について教えてください。
- 特定のタイトルに一定期間「new!」と表示させるためにはどの部分にスクリプトを追加すれば良いでしょうか。
- JavaScriptを使って新着RSSフィードをトップページに表示させる際、タイトルに一定期間「new!」を表示させるための具体的な手順を教えてください。
- yumipopo777
- お礼率100% (3/3)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
さっきのを、汎用的にも使えるように、 わかりやすく、配置しなおしたつもりです。 （コメントは入れなかったけど、ソースはさっきより、追いやすいですよね） <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>
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
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>
お礼
ありがとうございます。 言われたとおり、全角スペースは半角スペースして 上記をコピペしてUPロードしましたが…残念賞でした＾＾； http://www.katch.ne.jp/~tsc-07/test.htm ↑がその結果です。 何が間違っているのか…きっと私が何かを間違えているんだと思います。 何度もすみませんでした。 有難うございました<(_ _)>
- yyr446
- ベストアンサー率65% (870/1330)
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> とか
お礼
早々のご返信をありがとうございます。 var today = new Date(); if((today.getTime() - d.getTime()) < 3*24*3600*1000 ) { } をソースの中のいろいろな場所に書いて試したのですが、表示されませんでした。 全くJavascriptの知識がないものですから…すみません。 もっと考えてみます。 有難うございました<(_ _)>
お礼
出来ました～Ｏ(≧▽≦)Ｏ ワーイ♪ 何度も何度も、本当に親切・丁寧に教えて下さり有難うございました。 心より感謝致しております。 本当に本当に有難うございました<(_ _)>