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 Feed Menus
ページ内のフィード抽出
2010/2/9
jQuery Feed Menus
jquery.js、feed_menu.js
複数の購読リンクを選択可能な購読ボタンを実装するjQueryプラグイン。
ページ内のlink要素からRSSフィードをすべて取得し、それらの購読リンクを選択可能なプルダウンメニュー付きの購読ボタンを作成することができます。 プルダウンメニューは、RSS、Atomといった形式によってグループ化されて表示され、各項目をクリックすると、該当リンク先へアクセスすることができます。 RSSフィードだけ、Atomフィードだけといった指定も可能です。 ボタンのテーマは、数種類あり、クラス名で変更可能です。
設置イメージ設置サンプルサンプルを見る
<!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/feed_menu.js"></script>
<script type="text/javascript">
$(function(){
/* すべて */
var fm = new FeedMenu();fm.write('#jquery_feed_menu');
/* Atomフィードのみ */
var fm = new FeedMenu('link[type*=atom]');
fm.write('#jquery_feed_menu_atom');
/* RSSフィードのみ */
var fm = new FeedMenu('link[type*=rss]');
fm.write('#jquery_feed_menu_rss');
});
</script>
<!-- CSS -->
<style type="text/css">
body {
background:#fff;
}
.feed_menu{
background: url(/content/img/ajax/feed_menu_orange.png) 0 center no-repeat;
padding:2px 0;
display:-moz-inline-box;
display:inline-block;
width:38px;
vertical-align:middle;
overflow: hidden;
margin:0 .25em;
}
.feed_menu.open{
background-position: -38px center !important;
}
.feed_menu select{
opacity:0;
margin:0;
padding:0;
border:0;
}
.feed_menu option img{
border:0;
margin:2px;
vertical-align: middle;
}
/* for ie */
.feed_menu select{
filter:alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
* html .feed_menu{
width:auto;
background:none;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p><a href='http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/'>jQuery Feed Menus</a></p>
<!-- CODE -->
<h2>フィードメニュー</h2>
<p><span id="jquery_feed_menu"></span></p>
<h2>Atomフィードのみ</h2>
<p><span id="jquery_feed_menu_atom"></span></p>
<h2>RSSフィードのみ</h2>
<p><span id="jquery_feed_menu_rss"></span></p>
<!-- / 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>