- ベストアンサー
ブログの記事タイトルを他のページに表示させたい
yahooブログの記事タイトルを自分のホームページのトップページに表示させたいと考えています。 表示させたい内容は、最新の記事３件の更新日、更新時間、記事タイトルです。 スクリプトが分かる方教えて下さい。 広告が入らない方法でお願いします。
- fi7
- お礼率54% (25/46)
- JavaScript
- 回答数8
- ありがとう数8
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
＞ 今回の記事タイトルに反映されるまでの時間が３０分くらいかかります クライアント（ページの閲覧者）のページロード毎にRSSを読みに行くのではサーバ負荷と時間がかかって効率が悪いので、 Google側である一定時間はRSSフィードのデータをキャッシュ（保持）して、キャッシュをクライアントに返しているからだと思います。 ◎通信が二段階だと計4回の通信をする必要があるので、負荷も通信時間もかかる クライアント（ページの閲覧者） → Google → Yahoo! Blog クライアント（ページの閲覧者） ← Google ← ◎Google側でデータを保持しておけば2回の通信で済む。GoogleとYahoo! Blogの通信は多分30分置きにくらいに行われている。 クライアント（ページの閲覧者） → Google クライアント（ページの閲覧者） ←
その他の回答 (7)
- imq
- ベストアンサー率72% (16/22)
現象は確認できませんでした。 Yahoo! BlogのフィードＵＲＬは http://blogs.yahoo.co.jp/[Yahoo ID]/rss.xml という形式ですが、間違っていませんか？ もしくは他のYahooブログで表示できるけど、自分のブログではダメということはありませんか？ つぎはぎだったので、念のためもう一度ソースを貼っておきます。 フィードＵＲＬの変数名が「blogUrl」では紛らわしいので、「feedUrl」に変更してあります。 前回のものは最新5件でしたが、3件に変えてあります。 <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() + '/' + (d.getMonth() + 1) + '/'+d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + '</li>'; } document.write( t + '</ul>' ); }; (function() { var feedUrl = 'ブログのフィードＵＲＬ'; var apiUrl = 'htt' + 'p://ajax.googleapis.com/ajax/services/feed/load?callback=_handleJson&v=1.0&output=json&num=3&q='; document.write( '<sc' + 'ript type="text/javascript" src="' + apiUrl + encodeURIComponent(feedgUrl) + '"></sc' + 'ript>'); })(); </script>
お礼
何度も回答いただきありがとうございます。 おかげさまで完成いたしました。 ありがとうございました。 ただひとつ疑問があるのですが、新たにブログを更新しても今回の記事タイトルに反映されるまでの時間が３０分くらいかかります。 なぜこのような時間差が起こるのでしょうか？
- imq
- ベストアンサー率72% (16/22)
さらに回答No.5で書いた「回答No.3」は「回答No.4」の間違いでした＞＜
補足
回答ありがとうございます。 一応表示はされるようになったのですが、 一番古い記事のタイトルが１件しか表示されません。 最新記事３件を表示したいのですが、どうすればいいですか？
- imq
- ベストアンサー率72% (16/22)
回答No.3についてです。 すみません。 なぜか全角が混じっていました。 こちらでお願いします。 var apiUrl = 'htt' + 'p://ajax.googleapis.com/ajax/services/feed/load?callback=_handleJson&v=1.0&output=json&num=5&q=';
- imq
- ベストアンサー率72% (16/22)
＞エラーになってしまいます。 ｈｔｔｐ：の文字が半角でが入ると自動的にリンクにされて、アンカーテキストが省略されるからだと思います。 「var apiUrl = …」の行を以下に差し替えてください。 var apiUrl = ’htt' + 'p://ajax.googleapis.com/ajax/services/feed/load?callback=_handleJson&v=1.0&output=json&num=5&q=';
- yyr446
- ベストアンサー率65% (870/1330)
No1：yyr446です。 yahooブログの新着RSSフィード http://blogs.yahoo.co.jp/rss.xml に特化したサンプルをGoogle AJAX Feed APIで作りました jsonでなくRSSフィード形式をXMLで処理しています。 （見栄えは考慮してないのでCSSでご自由に） （サンプル） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>YahooBop3新着3</title> <script type="text/javascript" src="http://www.google.com/jsapi?"></script> <script type="text/javascript"> google.load("feeds", "1"); </script> <script type="text/javascript" charset="utf-8"> <!-- window.onload = function () { var container = document.getElementById("sinchaku3"); var feed = new google.feeds.Feed("http://blogs.yahoo.co.jp/rss.xml"); feed.setNumEntries(3); feed.setResultFormat(google.feeds.Feed.XML_FORMAT); feed.load(function(result) { if (!result.error) { var items = result.xmlDocument.getElementsByTagName("item"); for (var i = 0; i < items.length; i++) { var title = items[i].getElementsByTagName("title")[0]; var link = items[i].getElementsByTagName("link")[0]; var description = items[i].getElementsByTagName("description")[0]; var date = google.feeds.getElementsByTagNameNS(items[i], "http://purl.org/dc/elements/1.1/", "date")[0]; var list = document.createElement("li"); var kiji=""; kiji+='<li><a href="' + link.firstChild.nodeValue +'">'; kiji+= title.firstChild.nodeValue + '</a>'; kiji+='(' + date.firstChild.nodeValue + ')'; kiji+='<div>' + description.firstChild.nodeValue +'</div></li>'; list.innerHTML=kiji; container.appendChild(list); } } }); } // --> </script> </head> <body> <div> <h3>Yahoo! Blog 新着記事（3件）</h3> <ul id="sinchaku3"> </ul> <a href="http://blog-search.yahoo.co.jp/" target="_blank"> <img src="http://i.yimg.jp/images/blog-search/logo/bs_attbtn_144_17.gif" alt="powered by Yahoo!ブログ検索"> </a> </div> </body> </html>
お礼
このたびは私の質問にお答え頂き誠にありがとうございました。 おかげさまで今回の希望事項はすべて解決致しましたのでご報告いたします。 お時間を割いて回答いただき、とても感謝しています。 誠にありがとうございました。
- imq
- ベストアンサー率72% (16/22)
ブログだったら大抵フィードを配信していますので、Google AJAX Feed APIで取得可能だと思います。 http://code.google.com/intl/ja/apis/ajaxfeeds/ 上記を利用するにはAJAX APIキーを取得する必要がありますが、JSONPだけ利用する分にはキーがなくても大丈夫です。 以下はとりあえず必要最小限のコードです（同期通信）。 表示したいところに貼り付けてください。 <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() + '/' + d.getMonth() + 1 + '/'+d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + '</li>'; } document.write( t + '</ul>' ); }; (function() { var blogUrl = 'ブログのフィードＵＲＬ'; var apiUrl = 'http://ajax.googleapis.com/ajax/services/feed/load?callback=_handleJson&v=1.0&output=json&num=5&q='; document.write( '<sc' + 'ript type="text/javascript" src="' + apiUrl + encodeURIComponent(blogUrl) + '"></sc' + 'ript>'); })(); </script>
補足
回答ありがとうございます。 早速、ブログのフィードＵＲＬを変更してやってみたのですが、エラーになってしまいます。 他に変更する所はありますか？
- yyr446
- ベストアンサー率65% (870/1330)
残念ながら、普及しているブラウザーは、例え悪意が無くても詐欺行為の防 止のため、ご要望している機能を直接実現する事は出来なくなってます。 昔のブラウザー（IE5とか）なら、フレームに読み込んだ外部サイトの 内容にアクセス出来たのですが..... ご要望に近い事を実現するには、 （正攻法としては） Yahooさんのブログですから、Yahooブログ検索を使って結果をRSS配信 させ、自分のページで取り込むというのがありかなと、Yahooのロゴ を入れるのを条件にYahooさんも了解しています。 http://help.yahoo.co.jp/help/jp/blog-search/blog-search-33.html またYahooは検索サービスのAPIも公開しています。 http://developer.yahoo.co.jp/webapi/search/ （邪道としては） http://blogs.yahoo.co.jp/ にアクセスして、htmlを読み込み、 最新の記事の情報部分のみパースして出力するPHPプログラムを 作り、そのPHPプログラムを自分のページよりjavascriptのAJAXで 情報を取り込み、反映させるというやり方もあります。 似たようなのを最近作った事がありますが、この方法は、ある日Yahooの ページレイアウトが変われば、その都度PHPを直さなければならないし、文 字コードハンドリングも結構めんどうです。 （他にも方法あるかな....）
お礼
了解いたしました。 わかりやすい解説ありがとうございます。 おかげさまで希望通りの事ができました。 しかも日時の位置を自分で変更できました。 とても感謝しています。 本当にありがとうございました。