Adobe Spry　データを表示する


　Adobe Spry Frameworkはアドビシステムズ社が提供するAjaxフレームワークです（以後Spryと表記。呼び方はスプライ）。主なターゲット層としてはプログラマではなくWebデザイナー向けとなっているようです。Spryは以下のURLからダウンロードすることができます。

http://labs.adobe.com/technologies/spry/

　このページでは2006年7月23日現在の最新版である1.2をベースにしています。初期のバージョンとは、すでに異なる点も多くあるため今後のバージョンアップにより以下のサンプルは動作しなくなる可能性もあります。あらかじめ、ご了承下さい。

　それでは最も簡単なサンプルを作ってみます。ver 1.2では各種機能が強化されていますが、最もシンプルなデータベースの表示を行ってみます。データベースの表示にはxpath.jsとSpryData.jsの２つのファイルが必要です。名前からしてXML + XSLTをXML/(X)HTML + JavaScriptで処理しているといった感じでしょうか。とにかく、この２つのファイルをscriptタグを使って読み込みます。
　次に表示するデータを用意します。XMLで別ファイルとして用意する方法もありますが、ここでは手軽にJavaScriptの配列としてデータを設定します。配列内にデータを用意しますが、果物の名前と、色をセットにして１つの要素とします。{〜}で囲んでいますが、この囲まれたところが１つのデータになります。{〜}の中にはプロパティ名と対応する値を:（コロン）で区切って書きます。複数のプロパティ名がある場合には,（カンマ）で区切って書きます。特に制限はないので必要な数だけデータを増やす事ができます（ただし、メンテナンスなどを考えると、この方法ではなくXMLデータとして別ファイルにするのがベストです）。
　データが用意できたらSpryに定義したデータベースを設定し表示させるようにします。まず、new Spry.Data.DataSet()としてオブジェクトを生成します。このオブジェクトのdataプロパティとdataHashプロパティに定義した配列を指定します。単独で表示する場合には両方定義しないとエラーになります。
　あとはloadData()とすればできあがりです。と書きたいところですが、Spryの場合他のライブラリとは異なりHTMLタグ内に独自の属性を記述することにより何を表示するかを指定します（HTMLをXSLTの代わりにしているといった感じでしょうか）。
　Spryでのデータ表示を行うにはSpryで処理する範囲を指定します。この範囲を指定する属性がspry:regionです。属性値には処理させるデータ名を指定します。このデータ名というのが先ほどnew Spry.Data.DataSet()で生成したデータベースオブジェクト名になります。データの処理範囲を定義したら次に表示するデータベース内のデータを指定します。データの指定方法は表示したいデータを{〜}で囲みます。{〜}内には表示したいデータの名前を指定します。サンプルで定義した果物の名前を表示するには{fruits}とします。これで一番最初に定義したデータの名前（リンゴ）が表示されます。（サンプルを実行する）

<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"><!--
var fruitsData = [
{ fruits: "リンゴ", Color: "赤色" },
{ fruits: "ミカン", Color: "橙色" },
{ fruits: "メロン", Color: "緑色" },
{ fruits: "イチゴ", Color: "赤色" }
];
myDatabase = new Spry.Data.DataSet();
myDatabase.data = fruitsData;
myDatabase.dataHash = fruitsData;
myDatabase.loadData();
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<span>{fruits}</span>
</div>
</body>
</html>

　果物の名前ではなく果物の色を表示させたい場合には{fruits}の代わりに{Color}を指定します。（サンプルを実行する）

<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"><!--
var osData = [
{ fruits: "リンゴ", Color: "赤色" },
{ fruits: "ミカン", Color: "橙色" },
{ fruits: "メロン", Color: "緑色" },
{ fruits: "イチゴ", Color: "赤色" }
];
myDatabase = new Spry.Data.DataSet();
myDatabase.data = osData;
myDatabase.dataHash = osData;
myDatabase.loadData();
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<span>{Color}</span>
</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"><!--
var fruitsData = [
{ fruits: "リンゴ", Color: "赤色" },
{ fruits: "ミカン", Color: "橙色" },
{ fruits: "メロン", Color: "緑色" },
{ fruits: "イチゴ", Color: "赤色" }
];
myDatabase = new Spry.Data.DataSet();
myDatabase.data = fruitsData;
myDatabase.dataHash = fruitsData;
myDatabase.loadData();
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<span>{fruits}は{Color}です。</span>
</div>
</body>
</html>

　ここまではデータベースに定義されている最初のデータしか表示していません。データベースに定義されている全てのデータを表示させてみましょう。全てのデータを表示するには繰り返し表示する領域をspry:repeat属性で指定します。spry:repeat属性値には繰り返し表示するデータベース名を指定します。このデータベース名はnew Spry.Data.DataSet()で生成したデータベースオブジェクト名になります。
　これで囲まれた範囲のタグが複製され{〜}で指定したデータに応じて繰り返し表示が行われます。（サンプルを実行する）

<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"><!--
var fruitsData = [
{ fruits: "リンゴ", Color: "赤色" },
{ fruits: "ミカン", Color: "橙色" },
{ fruits: "メロン", Color: "緑色" },
{ fruits: "イチゴ", Color: "赤色" }
];
myDatabase = new Spry.Data.DataSet();
myDatabase.data = fruitsData;
myDatabase.dataHash = fruitsData;
myDatabase.loadData();
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<span>{fruits}は{Color}です。</span>
</div>
</div>
</body>
</html>

[目次へ]

(2006.7.23)