jQuery pluginXML関連
- get〔$.get()でXMLファイルの内容をHTML出力〕
- jFeed〔RSS/ATOMフィードをパース〕
- jParse〔jQueryでXMLをパース〕
- jQuery Feed Menus〔ページ内のフィード抽出〕
- jQuery XML to JSON Plugin〔XML->JSON変換〕
get
$.get()でXMLファイルの内容をHTML出力
2010/2/9
jquery.js
jQueryの$.getメソッドを使用して、XMLファイルの内容を取得し、各ノードをfindメソッドで検索し、そのデータをHTML出力します。
photo.xml
xmlnow coding ...
module/include/ajax/../../xml/photo.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"> $(function(){ $.get("xml/photo.xml",function(d){ $("#myfeed").append("<h2>新着情報</h2>"); $("#myfeed").append("<dl>"); // entryノード検索 $(d).find("entry").each(function(){ var $entry=$(this); var $title=$(this).find("title").text(); var $link=$(this).find("link").eq(0).attr("href"); var $imageurl=$(this).find("link").eq(1).attr("href"); var $content=$(this).find("content").text(); var s=""; s+="<dt><a href='"+$link+"'><img src='"+$imageurl+"' /></a></dt>"; s+="<dd><p class='title'>"+$title+"</p><p>"+$content+"</p></dd>"; $("#myfeed dl").append($(s)); }); }); }); </script> <!-- CSS --> <style type="text/css"> body { background:#fff; } #myfeed { width:500px; } #myfeed dl { margin:0; padding:0; border-bottom:1px dotted #666; } #myfeed dt { border-top:1px dotted #666; margin:0; padding:10px 0 0 0; width:75px; float:left; clear:both; } #myfeed dd { border-top:1px dotted #666; margin:0; padding:5px 0 0 10px; margin-left:75px; } #myfeed p { margin:0 0 10px 0; padding:0; } #myfeed p.title { margin:0 0 10px 0; padding:0; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>jQueryの$.get()で、XMLファイルの内容を取得して表示します。</p> <!-- CODE --> <div id="myfeed"></div> <!-- / CODE --> </div> </body> </html>
jFeed
RSS/ATOMフィードをパース
unknown
jFeed: JavaScript jQuery RSS/ATOM feed parser plugin
jQueryでXMLをパースして、各ノードにプロパティ名でアクセスできるjQueryプラグイン。 ただし、authorなど、下記で予め定義されているプロパティ以外のノードにはアクセスできません。
JFeedのプロパティ:- feed.type
- feed.version
- feed.title
- feed.link
- feed.description
- feed.language
- feed.updated
- feed.items: JFeedItemの配列
- item.title
- item.link
- item.description
- item.updated
- item.id
※例えば、下記のようにitemノード内に同名のノード(ここではlinkノード)が複数存在する場合、属性値が異なっても、最初のノードだけがfeed.linkに入ります。
<item> <link rel='alternate' type='text/html' href='http://www.flickr.com/photos/22559849@N06/3664935712/in/set-72157620834224970/' /> <link rel='enclosure' type='image/jpeg' href='http://farm4.static.flickr.com/3639/3664935712_94ca67b18b_s.jpg' /> </item> <item> ...
設置サンプルサンプルを見る
<!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" /> <!-- Feed --> <link rel="alternate" type="application/rss+xml" title="PHP & JavaScript Room" href="http://feeds.feedburner.com/PhpJavascriptRoom" /> <link rel="alternate" type="application/atom+xml" title="My Blogger" href="http://feeds.feedburner.com/CocoismsDailyTweets" /> <link rel="alternate" type="application/rss+xml" title="My Flickr" href="http://api.flickr.com/services/feeds/photos_public.gne?id=22559849@N06&lang=en-us&format=rss_200n" /> <link rel="alternate" type="application/rss+xml" title="My Twitter Feed (RSS)" href="http://twitter.com/statuses/user_timeline/7948862.rss" /> <link rel="alternate" type="application/atom+xml" title="My Twitter Feed (Atom)" href="http://twitter.com/statuses/user_timeline/7948862.atom" /> <!-- 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="/content/lib/jquery/jquery.jfeed.js"></script> <script type="text/javascript"> $(function(){ $.getFeed({ url: 'index.xml', success: function(feed){ $('#myfeed').append('<h2><a href="'+feed.link+'">'+feed.title+'</a></h2>'); var s=""; for(var i=0; i<feed.items.length && i<3; i++){ var item=feed.items[i]; s+='<h3><a href="'+item.link+'">'+item.title+'</a></h3>'; s+='<div class="updated">'+item.updated+'</div>'; s+='<div class="desc">'+item.description+'</div>'; } $('#myfeed').append(s); } }); }); </script> <!-- CSS --> <style type="text/css"> body { background:#fff; } #myfeed { width:500px; } #myfeed dl { margin:0; padding:0; border-bottom:1px dotted #666; } #myfeed dt { border-top:1px dotted #666; margin:0; padding:10px 0 0 0; width:75px; float:left; clear:both; } #myfeed dd { border-top:1px dotted #666; margin:0; padding:5px 0 0 10px; margin-left:75px; } #myfeed p { margin:0 0 10px 0; padding:0; } #myfeed p.title { margin:0 0 10px 0; padding:0; font-weight:bold; } #myfeed h3 { font-size:100%; font-weight:normal; } #myfeed h3 a { text-decoration:none; } #myfeed div.desc { margin:0 0 20px 0; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>参考:<a href='http://www.hovinne.com/blog/index.php/2007/07/15/132-jfeed-jquery-rss-atom-feed-parser-plugin'>jFeed: JavaScript jQuery RSS/ATOM feed parser plugin</a></p> <!-- CODE --> <div id="myfeed"></div> <!-- / CODE --> </div> </body> </html>
jParse
jQueryでXMLをパース
2010/2/9
jParse beta
jQuery.ajaxメソッドに代わり、XMLをパースする超軽量のjQueryプラグイン。 多くのメジャーなブラウザに対応しています。
指定したURLのXMLファイルをパースし、指定したフォーマットに従って表示します。
出力フォーマット(ex. <div><h2><a href='jpet1'>jpet0</a></h2><p>jpet2</p></div>
)、取得件数(limit:3)、コールバック関数(callback:関数な)などをカスタマイズ可能です。

設置サンプルサンプルを見る
<!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="/content/lib/jquery/jparse-0.3.1.js"></script> <script type="text/javascript"> function start(){ $('#jparse-meta').html('<img alt="ローディング中..." src="/content/img/ajax/loading_black.gif" />'); } function finish(){ $('#jparse-meta').remove(); } $(function(){ $('#ajax-cont').jParse({ ajaxOpts: {url: 'index.xml'}, elementTag: ['title', 'link', 'description','comments'], output: ' <dl class="feed-entry"><dt><a href="jpet1">jpet0</a></dt><dd>jpet2</dt></dl>', limit:3, precallback: start, callback: finish }); }); </script> <!-- CSS --> <style type="text/css"> body { background:#fff; } .feed-entry { width:500px; } .feed-entry dl { margin:0; padding:0; } .feed-entry dt { margin:10px 0; padding:0; font-size:100%; } .feed-entry dd { margin:0 0 20px 0; padding:0; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>【参照】<a href='http://jparse.kylerush.net/'>jParse beta</a></p> <p>新着情報を3件を取得して表示します。</p> <!-- CODE --> <div id="jparse-meta" style="text-align: center; margin: 15px 0 0 0;"> <p><a href="http://feeds.feedburner.com/PhpJavascriptRoom">Click here</a> to see this site RSS feed.</p> </div><!--jparse-meta--> <div id="ajax-cont"></div><!--demo-cont--> <!-- / CODE --> </div> </body> </html>
jQuery XML to JSON Plugin
XML->JSON変換
2010/2/9
jQuery XML to JSON Plugin
XML形式の文字列をJSON形式に変換するjQueryプラグイン。
XML形式の文字列は直接指定も、外部XMLファイルを$.get()で取得して指定することも可能です。
ノードの値はvar $title=json.entry[i].title;
、
ノードの属性値は、var $link=json.entry[i].link[0].href;
のような形式することができます。
XML:photo.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="/content/lib/jquery/jquery.xml2json.js"></script> <script type="text/javascript"> $(function(){ $.get('xml/photo.xml', function(xml){ $("#myfeed").append("<h2>新着情報</h2>"); $("#myfeed").append("<dl>"); var json = $.xml2json(xml); var length=json.entry.length; for(var i=0; i<length; i++){ var $title=json.entry[i].title; var $link=json.entry[i].link[0].href; var $imageurl=json.entry[i].link[1].href; var $content=json.entry[i].content; var s=""; s+="<dt><a href='"+$link+"'><img src='"+$imageurl+"' /></a></dt>"; s+="<dd><p class='title'>"+$title+"</p><p>"+$content+"</p></dd>"; $("#myfeed dl").append($(s)); } }); }); </script> <!-- CSS --> <style type="text/css"> body { background:#fff; } #myfeed { width:500px; } #myfeed dl { margin:0; padding:0; border-bottom:1px dotted #666; } #myfeed dt { border-top:1px dotted #666; margin:0; padding:10px 0 0 0; width:75px; float:left; clear:both; } #myfeed dd { border-top:1px dotted #666; margin:0; padding:5px 0 0 10px; margin-left:75px; } #myfeed p { margin:0 0 10px 0; padding:0; } #myfeed p.title { margin:0 0 10px 0; padding:0; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>参考:<a href='http://www.fyneworks.com/jquery/xml-to-json/'>jQuery XML to JSON Plugin</a></p> <!-- CODE --> <div id="myfeed"></div> <!-- / CODE --> </div> </body> </html>