Adobe Spry XPathフィルタリング


 Spryではデータを表示する場合に条件式を指定できますが、属性で指定するのではなくXPathに条件式を記述することができます。XPathに記述するためHTMLタグに不要なdivタグやspanタグを入れる必要がなくなります。もちろん最低限の処理範囲を示すタグと属性は必要になります。
 XPathの指定はSpry.Data.XMLDataSet()の二番目のパラメータになります。通常はXMLデータのパスを指定しますが、この時に[]内に属性名と条件式を記述すると該当するXMLデータだけが読み込まれます。条件式はタグのspry:if, spry:whenで記述するものと若干異なり等しいかどうか調べる場合は=を使うといった微妙な違いがあります(これは将来改良される可能性があるかもしれません)。以下のサンプルは250円の果物だけを表示するものです。(サンプルを実行する

【XMLファイル:fruits.xml】
<?xml version="1.0" encoding="utf-8"?>
<list>
<fruits><name>リンゴ</name><price>100</price></fruits>
<fruits><name>ミカン</name><price>200</price></fruits>
<fruits><name>メロン</name><price>300</price></fruits>
<fruits><name>イチゴ</name><price>250</price></fruits>
<fruits><name>レモン</name><price>150</price></fruits>
<fruits><name>トマト</name><price>110</price></fruits>
</list>

【HTMLファイル】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブルタグでデータを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits[price = 250]");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<table border="1" cellspacing="0">
<tr><th>名称</th><th>価格</th></tr>
<tr spry:repeat="myDatabase"><td>{myDatabase::name}</td><td>{myDatabase::price}円</td>
</tr>
</table>
</div>
</body>
</html>

 価格が250円でないものだけを表示するには=の代わりに!=を指定します。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブルタグでデータを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits[price != 250]");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<table border="1" cellspacing="0">
<tr><th>名称</th><th>価格</th></tr>
<tr spry:repeat="myDatabase"><td>{myDatabase::name}</td><td>{myDatabase::price}円</td>
</tr>
</table>
</div>
</body>
</html>

 等号、不等号だけでなく値の大小も指定することができます。以下のサンプルは200円以下のデータのみ表示します。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブルタグでデータを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits[price <= 200]");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<table border="1" cellspacing="0">
<tr><th>名称</th><th>価格</th></tr>
<tr spry:repeat="myDatabase"><td>{myDatabase::name}</td><td>{myDatabase::price}円</td>
</tr>
</table>
</div>
</body>
</html>

値の大小だけでなくデータの特定の範囲だけを抽出することもできます。この場合はデータの位置を示すposition()の値と比較します。position()の値は1から始まる点に注意してください。以下のサンプルは4番目以降のデータを表示します。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブルタグでデータを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits[position() > 3]");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<table border="1" cellspacing="0">
<tr><th>名称</th><th>価格</th></tr>
<tr spry:repeat="myDatabase"><td>{myDatabase::name}</td><td>{myDatabase::price}円</td>
</tr>
</table>
</div>
</body>
</html>

範囲を指定したい場合にはposition()とandを組み合わせます。以下のサンプルは3〜4番目の範囲を表示します。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブルタグでデータを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits[position() > 2 and position() < 5]");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<table border="1" cellspacing="0">
<tr><th>名称</th><th>価格</th></tr>
<tr spry:repeat="myDatabase"><td>{myDatabase::name}</td><td>{myDatabase::price}円</td>
</tr>
</table>
</div>
</body>
</html>

andではなくorを指定した場合には「または」の意味になります。例えば以下のサンプルでは2または5の位置にあるデータを表示します。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブルタグでデータを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits[position() = 2 or position() = 5]");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<table border="1" cellspacing="0">
<tr><th>名称</th><th>価格</th></tr>
<tr spry:repeat="myDatabase"><td>{myDatabase::name}</td><td>{myDatabase::price}円</td>
</tr>
</table>
</div>
</body>
</html>

これまでは値のチェックだけでしたが、文字列を調べて該当するデータのみ表示することもできます。文字列の場合には'〜'で囲んで比較を行います。以下のサンプルでは名前がイチゴの場合のみデータを表示します。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブルタグでデータを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits[name = 'イチゴ']");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<table border="1" cellspacing="0">
<tr><th>名称</th><th>価格</th></tr>
<tr spry:repeat="myDatabase"><td>{myDatabase::name}</td><td>{myDatabase::price}円</td>
</tr>
</table>
</div>
</body>
</html>

[目次へ]

(2006.7.30)