xmlを使ったウェブページのサンプル

前回書いたxmlを使ったページについてここでサンプルを示す。
まずはhtml

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/style.css">
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/xmljq.js"></script>
<title></title>
</head>
<body>
    <div id="wrap">
        <aside>
        <h2>部活動記事一覧</h2>
        <ul class="itiran">
        </ul>
        </aside>
        <article>    
        </article>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<aside>

<h2>部活動記事一覧</h2>

</ul>

</aside>

</article>

</div>

</body>

</html>

いたってシンプル。asideの一覧すなわちulのところに見出しを出力して、そこにオンクリックでarticlのところに表示するというもの。
ここはデータが何もなくていい。
そして、スクリプト。以下

function xmlpreLoad(){
    $(".itiran").html("");    
    $.ajax({
        url:'xml/data.xml',
        type:'get',
        dataType:'xml',
        timeout:1000,
        success:parse_xml
    });
}
function parse_xml(xml,status){
    if(status!='success')return;
    $(xml).find('row').each(disp);
}
function disp(){

    //各要素を変数に格納
    var $no = $(this).find('no').text();
    var $title = $(this).find('title').text()

    //HTMLを生成
    $('<li onclick="xmlLoad('+$no+')">'+$title+'</li>'
        ).appendTo('.itiran');
}

$(function(){
    xmlpreLoad();
});

function xmlLoad(index){
    $("article").html("");
    $.ajax({
        url:'xml/data.xml',
        type:'get',
        dataType:'xml',
        timeout:1000,
        success:function parse_xml(xml,status){
    if(status!='success')return;
    var data = $(xml).find('row');
    
    var no = index-1;

    var $date = data.find('date').eq(no).text();
    var $title = data.find('title').eq(no).text();
    var $img = data.find('img').eq(no).text();
    var $text = data.find('text').eq(no).text()
        
    //HTMLを生成
    
    $('<h1>'+$title+'</h1>'+
        '<p class="date">'+$date+'</p>'+
        '<img src="'+$img+'"&　gt;'+
        '<p>'+$text+'</p>'
        ).appendTo('article');
}
    });
}

function xmlpreLoad(){

$(".itiran").html("");

$.ajax({

url:'xml/data.xml',

type:'get',

dataType:'xml',

timeout:1000,

success:parse_xml

});

}

function parse_xml(xml,status){

if(status!='success')return;

$(xml).find('row').each(disp);

}

function disp(){

//各要素を変数に格納

var $no = $(this).find('no').text();

var $title = $(this).find('title').text()

//HTMLを生成

$('<li onclick="xmlLoad('+$no+')">'+$title+'</li>'

).appendTo('.itiran');

}

$(function(){

xmlpreLoad();

});

function xmlLoad(index){

$("article").html("");

$.ajax({

url:'xml/data.xml',

type:'get',

dataType:'xml',

timeout:1000,

success:function parse_xml(xml,status){

if(status!='success')return;

var data = $(xml).find('row');

var no = index-1;

var $date = data.find('date').eq(no).text();

var $title = data.find('title').eq(no).text();

var $img = data.find('img').eq(no).text();

var $text = data.find('text').eq(no).text()

//HTMLを生成

$('<h1>'+$title+'</h1>'+

'<p class="date">'+$date+'</p>'+

'<img src="'+$img+'"&　gt;'+

'<p>'+$text+'</p>'

).appendTo('article');

}

});

}

まず、function xmlpreLoad()で見出しに必要な要素をつかまえて、htmlを繰り返し生成する。これでasideの見出しができる。
次は見出しがonclickされた時に実行されるスクリプトfunction xmlLoad(index)だ。
実はここがよくわかっていない小生が苦労したところ。
indexを引数にして、ここから１を引いた数を変数noに代入して、それを変数の順番としてeqで取り出す。
そうするとクリックされたデータを取得できる。これでhtmlを生成するというわけだ。

xmlのデータは例のエクセルからMr.DataConverterを使って作ったものだ。

<?xml version="1.0" encoding="UTF-8"?>
<rows>
  <row>
    <no>1</no>
    <date>2016.07.23</date>
    <title>ペンギン部全国大会準優勝</title>
    <img>images/sample01.jpg</img>
    <text>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</text>
  </row>
  <row>
    <no>2</no>
    <date>2016.06.23</date>
    <title>グランドキャニオン部全国大会準優勝</title>
    <img>images/sample02.jpg</img>
    <text>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</text>
  </row>
  <row>
    <no>3</no>
    <date>2016.05.23</date>
    <title>コアラ部全国大会準優勝</title>
    <img>images/sample03.jpg</img>
    <text>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</text>
  </row>
  <row>
    <no>4</no>
    <date>2016.04.23</date>
    <title>クラゲ部全国大会準優勝</title>
    <img>images/sample04.jpg</img>
    <text>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</text>
  </row>
</rows>

<?xml version="1.0" encoding="UTF-8"?>

<rows>

<row>

<title>ペンギン部全国大会準優勝</title>

<img>images/sample01.jpg</img>

<text>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</text>

</row>

<row>

<title>グランドキャニオン部全国大会準優勝</title>

<img>images/sample02.jpg</img>

</row>

<row>

<title>コアラ部全国大会準優勝</title>

<img>images/sample03.jpg</img>

</row>

<row>

<title>クラゲ部全国大会準優勝</title>

<img>images/sample04.jpg</img>

</row>

</rows>

こうするとユーザーがなれたエクセルでデータをつくれば、ウェブページに表示できる。これは便利でしょ。
もちろんいろいろな応用が効きますね。たとえば商品一覧を作るだとか。
あとはhtmlとデザインのcss次第です。

サンプルは以下。表示されている文字列をクリックしてみてください。

http://ogu-tec.net/test/webtestxml04/

2件のコメント

神橋　尚子 より:

2017年3月20日 9:42 PM

とても、わかりやすいサンプル提供ありがとうございます。
学校のサイトに使わせていただきます。
写真や図なども、これを使えば簡単に更新できるところが良いですね。

返信
1. putimaro より:
  
  2017年3月21日 8:07 AM
  
  どうも、こんなんところまで見ていただいて。これは写真が多くあって度々変更するサイトをサポートした時に使ったものです。そのサイトは横浜のボーイスカウトのサイトです。よかったら見てください。以下です。
  http://bsy125.jp/
  です。
  
  返信

2件のコメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル