XML関連｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Search

jQuery pluginXML関連


  1. get〔$.get()でXMLファイルの内容をHTML出力〕
  2. jFeed〔RSS/ATOMフィードをパース〕
  3. jParse〔jQueryでXMLをパース〕
  4. jQuery Feed Menus〔ページ内のフィード抽出〕
  5. 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

MIT＆GPL
jquery.js、jquery.jfeed.js

jQueryでXMLをパースして、各ノードにプロパティ名でアクセスできるjQueryプラグイン。 ただし、authorなど、下記で予め定義されているプロパティ以外のノードにはアクセスできません。

JFeedのプロパティ：
  • feed.type
  • feed.version
  • feed.title
  • feed.link
  • feed.description
  • feed.language
  • feed.updated
  • feed.items: JFeedItemの配列
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

Firefox 1.5+、Safari 3+、Chrome 3、Internet Explorer 6+、Opera 9+
MIT
jquery.js、jparse.js v0.3.1

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

表示-非営利-継承 3.0 アメリカ合衆国
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

MIT＆GPL
jquery.js、jquery.xml2json.js v1.0

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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop