XML->DOM生成->HTML出力AjaxでRSSフィードをHTML出力
- RSSフィードを読み込んで表示してみよう
- 別ドメインにあるフィードを取得〔Google AJAX Feed API使用〕
RSSフィードを読み込んで表示してみよう
unknown
XML形式のRSSフィードを使ってサイトの更新情報を表示してみましょう。

XML形式のRSSフィードといっても、XML構造はブログによってことなったりと様々です。 例では、XMLを自動生成するフリーソフトHeadline-Editor(Lite版)で出力したXMLファイルを使用することにします。
うじゃうじゃと要素が並んでいますが、記事情報は<item>
~</item>
で囲まれた部分です。
これを抜き出していけばOKです。
XMLファイル、出力ページの文字エンコードをShift_JIS以外の文字エンコードにする場合は、XML宣言およびmeta要素の文字コードの指定を変更してください。でないと文字化けします。
XMLのエンコードがUTF8の場合のみ、XML宣言を省略できます。
XML:rssfeed.xml
<? echo '<?xml version="1.0" encoding="utf-8"?>'; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax » XML->DOM->HTML出力 :: AjaxでRSSフィードをHTML出力 : PHP & JavaScript Room</title> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="copyright" content="Copyright (c) PHP & JavaScript Room" /> <script type="text/javascript"> function fXmlHttpRequestObj(xmlURL){ /* XMLHttpRequestオブジェクト作成 */ var xmlhttp=false; if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */ try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */ } catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */ } } if(!xmlhttp && typeof XMLHttpRequest!="undefined"){ xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */ } if(!xmlhttp){ alert("XMLHttpRequest非対応ブラウザ"); return false; } /* レスポンスデータ処理 */ xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ document['xmlObject']=new Object(); document['xmlObject']=xmlhttp.responseXML; fXmltoDom(); } } /* HTTPリクエスト実行 */ xmlhttp.open("GET",xmlURL,true); xmlhttp.send(null); } function fXmltoDom(){ var s=""; /* XMLデータ */ var xmlobj=document['xmlObject']; /* <rdf>...</rdf> を格納 */ var rdf=new Object(); for(var i=0; xmlobj.childNodes[i]!=null; i++){ /* ノード名がrankingの場合(Firefox対策:#text除外)*/ if(xmlobj.childNodes[i].nodeName=="rdf:RDF"){ rdf=xmlobj.childNodes[i]; } } /* <item rdf:about="http://phpjavascriptroom.com/index.php?t=css&p=hack#he20070609"> <title>【CSS】CSS Hack</title> <link>http://phpjavascriptroom.com/index.php?t=css&p=hack</link> <dc:date>2007-06-09</dc:date> <description>条件付コメント、SafariやIEなどブラウザやそのバージョンによって適用させるスタイル指定方法を追記。</description> </item> */ /* <item>...</item>をDOMに格納 */ document['items']=new Object(); /* カウント用変数 */ var itemcnt=0; /* 各記事情報(<item>...</item>)を取得 */ for(ix=0; rdf.childNodes[ix]!=null; ix++){ /* ノード名がitemの場合(Firefox対策:#text除外)*/ if(rdf.childNodes[ix].nodeName=="item"){ /* item格納オブジェクト作成 */ var item=rdf.childNodes[ix]; var itemAttr=item.getAttribute('rdf:about'); if(item!=null){ document['items'][itemcnt]=new Object(); for(var iy=0; item.childNodes[iy]!=null; iy++){ var itemName=item.childNodes[iy].nodeName; if(itemName=="title" || itemName=="link" || itemName=="dc:date" ||itemName=="description"){ var itemValue=item.childNodes[iy].firstChild.nodeValue; if(itemValue!=null){ document['items'][itemcnt][itemName]=itemValue; }else{ document['items'][itemcnt][itemName]=""; } } } itemcnt++; } } } document.getElementById("rssfeed_xml").innerHTML=s; fCreateRssFeed(); } function fCreateRssFeed(){ var s=""; var items=document['items']; s+="<div class='item'>\n"; for(k1 in items){ s+="<dl>"; var _title=items[k1]["title"]; /* タイトル */ var _link=items[k1]["link"]; /* リンク先URL */ var _date=items[k1]["dc:date"]; /* 更新日時 */ var _description=items[k1]["description"]; /* 記事内容 */ s+="<dt><a href='"+_link+"' title='"+_title+"'>"+_title+"</a></dt>"; s+="<dd><p>"+_description+"</p><p class='date'>"+_date+"</p></dd>\n"; s+="</dl>\n"; } s+="</div>\n"; if(document.getElementById("rssfeed_xml")){ document.getElementById("rssfeed_xml").innerHTML=s; } } window.onload=function(){ /* ページ読み込み完了時に実行 */ fXmlHttpRequestObj("/module/include/ajax/rssfeed.xml"); } </script> <style type="text/css"> body { font-family:vrendana, sans-serif; font-size:13px; } div.item { margin:0; padding:0; } div.item dl { margin:15px 0; padding:10px; border:1px solid #ccc; background-color:#f7f7f7; } div.item dl dt { margin:0 0 10px 0; padding:0; } div.item dl dt a { font-weight:bold; font-size:1.1em; } div.item dl dd { margin:10px 0 10px 20px; padding:0; } div.item dl dd p { margin:10px 0; padding:0; text-align:left; line-height:1.5; } div.item dl dd p.date { text-align:right; font-style:italic; } </style> </head> <body> <div id="rssfeed_xml"><!-- Ranking Data --></div> </body> </html>
別ドメインにあるフィードを取得
Google AJAX Feed API使用
2010/2/9
Google AJAX Feed API
JavaScriptだと、別ドメインのフィードを取得するにはjson形式でないとなど制約がありますが、このGoogle Ajax Feed APIを使用すれば、別ドメインのフィードを取得することができます。
フィードは、feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
のように指定することで、JSON形式(JSON_FORMAT)またはXML形式、あるいは混合形式(MIXED_FORMAT)で取得することができます。
省略すると、デフォルトのJSON形式が適用されます。
取得するフィード数はデフォルトだと4件ですが、feed.setNumEntries(10);
のように任意の取得件数を指定することができます。
使用するには、AJAX API キーの登録が必要です。

JSON形式の例
<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize(){ init("http://feeds.japan.cnet.com/cnet/rss","feed1","2"); // CNET Japan init("http://feeds.feedburner.com/GoogleJapanBlog","feed2","3"); // Google Japan Blog init("http://rss.itmedia.co.jp/rss/1.0/topstory.xml","feed3","3"); // ITmedia } function init(feedurl,obj,feedmax) { var feed = new google.feeds.Feed(feedurl); feed.setNumEntries(feedmax); // フィードをJSON形式で取得 feed.load(function(result) { var container = document.getElementById(obj); if (!result.error) { var h2 = document.createElement("h2"); h2.appendChild(document.createTextNode(result.feed.title)); container.appendChild(h2); var dl = document.createElement("dl"); container.appendChild(dl); //alert(result.feed.entries); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var attributes = ["title", "link","content","contentSnippet","publishedDate","categories"]; var dt = document.createElement("dt"); var dd = document.createElement("dd"); var a=document.createElement("a"); for (var j = 0; j < attributes.length; j++) { switch(attributes[j]){ case "title": a.appendChild(document.createTextNode(entry[attributes[j]])); break; case "link": a.setAttribute("href",entry[attributes[j]]); break; case "content": //dd.appendChild(document.createTextNode(entry[attributes[j]])); break; case "publishedDate": var date = new Date(entry[attributes[j]]); var dateY=date.getFullYear(); var dateM=date.getMonth()+1; var dateD=date.getDate(); var str=dateY+"年"+dateM+"月"+dateD+"日"; dt.appendChild(document.createTextNode(str)); break; case "contentSnippet": //alert(entry[attributes[j]]); break; case "categories": var categories=entry[attributes[j]]; break; default: break; } container.appendChild(dt); dd.appendChild(a); container.appendChild(dd); } } }else{ container.appendChild(document.createTextNode(url)); } }); } google.setOnLoadCallback(initialize); </script> <!-- CSS --> <style type="text/css"> .feed { border:1px solid #ccc; background-color:#fff; margin:10px auto; padding:10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .feed h2 { margin:0 0 10px 0; padding:0; } dl { margin:0; padding:0; } dt { margin:0; padding:0; color:#666; font-size:.8em; } dd { margin:0 0 5px 0; padding:0; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>参考:<a href='http://code.google.com/intl/ja/apis/ajaxfeeds/'>Google AJAX Feed API</a></p> <h2>JSON形式の例</h2> <p>各種ニュースサイト(CNET、Google Japan Blog、ITmedia)のRSSフィードを取得して、新着情報3件をHTML出力します。</p> <!-- CODE --> <div id="feed1" class="feed"></div> <div id="feed2" class="feed"></div> <div id="feed3" class="feed"></div> <!-- / CODE --> </div> </body> </html>
XML形式の例
<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize(){ init("http://feeds.japan.cnet.com/cnet/rss","feed1","3"); // CNET Japan init("http://feeds.feedburner.com/GoogleJapanBlog","feed2","3"); // Google Japan Blog init("http://rss.itmedia.co.jp/rss/1.0/topstory.xml","feed3","3"); // ITmedia } function init(feedurl,obj,feedmax) { var feed = new google.feeds.Feed(feedurl); feed.setNumEntries(feedmax); feed.setResultFormat(google.feeds.Feed.XML_FORMAT); feed.load(function(result) { var container = document.getElementById(obj); var h2 = document.createElement("h2"); h2.appendChild(document.createTextNode(result.xmlDocument.getElementsByTagName("title")[0].firstChild.nodeValue)); container.appendChild(h2); var dl = document.createElement("dl"); container.appendChild(dl); if (!result.error) { var items = result.xmlDocument.getElementsByTagName("item"); for (var i = 0; i < items.length; i++) { // 記事タイトルリンク var dt = document.createElement("dt"); var a = document.createElement("a"); var titleElement = items[i].getElementsByTagName("title")[0]; var title = titleElement.firstChild.nodeValue; var linkElement = items[i].getElementsByTagName("link")[0]; var link = linkElement.firstChild.nodeValue; a.setAttribute("href", link); dl.appendChild(dt); dt.appendChild(a); a.appendChild(document.createTextNode(title)); // 記事内容 var dd = document.createElement("dd"); var descElement = items[i].getElementsByTagName("description")[0]; var desc = descElement.firstChild.nodeValue; dd.appendChild(document.createTextNode(desc)); dl.appendChild(dd); } }else{ container.appendChild(document.createTextNode(url)); } }); } google.setOnLoadCallback(initialize); </script> <!-- CSS --> <style type="text/css"> .feed { border:1px solid #ccc; background-color:#fff; margin:10px auto; padding:10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .feed h2 { margin:0 0 10px 0; padding:0; } dl { margin:0; padding:0; } dt { margin:0; padding:0; color:#666; } dd { margin:0 0 5px 0; padding:0; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>参考:<a href='http://code.google.com/intl/ja/apis/ajaxfeeds/'>Google AJAX Feed API</a></p> <h2>XML形式の例</h2> <p>各種ニュースサイト(CNET、Google Japan Blog、ITmedia)のRSSフィードを取得して、新着情報3件をHTML出力します。</p> <!-- CODE --> <div id="feed1" class="feed"></div> <div id="feed2" class="feed"></div> <div id="feed3" class="feed"></div> <!-- / CODE --> </div> </body> </html>
FeedControlの例
google.feeds.FeedControlクラスを使用すれば、複数のフィードを簡単に出力することができます。
<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize(){ init("http://feeds.japan.cnet.com/cnet/rss","feed1","2"); // CNET Japan init("http://feeds.feedburner.com/GoogleJapanBlog","feed2","3"); // Google Japan Blog init("http://rss.itmedia.co.jp/rss/1.0/topstory.xml","feed3","3"); // ITmedia } function init(feedurl,obj,feedmax) { var feed = new google.feeds.Feed(feedurl); feed.setNumEntries(feedmax); // フィードをJSON形式で取得 feed.load(function(result) { var container = document.getElementById(obj); if (!result.error) { var h2 = document.createElement("h2"); h2.appendChild(document.createTextNode(result.feed.title)); container.appendChild(h2); var dl = document.createElement("dl"); container.appendChild(dl); //alert(result.feed.entries); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var attributes = ["title", "link","content","contentSnippet","publishedDate","categories"]; var dt = document.createElement("dt"); var dd = document.createElement("dd"); var a=document.createElement("a"); for (var j = 0; j < attributes.length; j++) { switch(attributes[j]){ case "title": a.appendChild(document.createTextNode(entry[attributes[j]])); break; case "link": a.setAttribute("href",entry[attributes[j]]); break; case "content": //dd.appendChild(document.createTextNode(entry[attributes[j]])); break; case "publishedDate": var date = new Date(entry[attributes[j]]); var dateY=date.getFullYear(); var dateM=date.getMonth()+1; var dateD=date.getDate(); var str=dateY+"年"+dateM+"月"+dateD+"日"; dt.appendChild(document.createTextNode(str)); break; case "contentSnippet": //alert(entry[attributes[j]]); break; case "categories": var categories=entry[attributes[j]]; break; default: break; } container.appendChild(dt); dd.appendChild(a); container.appendChild(dd); } } }else{ container.appendChild(document.createTextNode(url)); } }); } google.setOnLoadCallback(initialize); </script> <!-- CSS --> <style type="text/css"> .feed { border:1px solid #ccc; background-color:#fff; margin:10px auto; padding:10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .feed h2 { margin:0 0 10px 0; padding:0; } dl { margin:0; padding:0; } dt { margin:0; padding:0; color:#666; font-size:.8em; } dd { margin:0 0 5px 0; padding:0; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>参考:<a href='http://code.google.com/intl/ja/apis/ajaxfeeds/'>Google AJAX Feed API</a></p> <h2>JSON形式の例</h2> <p>各種ニュースサイト(CNET、Google Japan Blog、ITmedia)のRSSフィードを取得して、新着情報3件をHTML出力します。</p> <!-- CODE --> <div id="feed1" class="feed"></div> <div id="feed2" class="feed"></div> <div id="feed3" class="feed"></div> <!-- / CODE --> </div> </body> </html>