ZDNet Japan Brand Site:
ZDNet Japan
builder
スペシャル » 特集 » 魅力のAjaxライブラリAdobe Spry入門

あのエフェクトがこんなに簡単に：魅力のAjaxライブラリAdobe Spry入門

Spryは、「デザイナのための」と銘打つだけあって、非常に簡単な記述でスクリプトを作ることができる。JavaScriptはほとんど使わずに、できるだけHTMLの拡張属性や独自の記述でまかなおうという努力が見える。

たにぐちまこと（H2O Space.）  2007年9月5日 20時30分

　今回は、もう少し掘り下げて Spryの魅力を紹介していこう。

シンプルなファイル構成

　JavaScript ライブラリは、Webページに組み込んで利用するため、その分だけWebページのサイズが大きくなってしまう。そのため、不必要な機能は組み込まなくて済むようにしたり、自分に必要な機能だけを選んでファイルを作れるようになっているものもある。しかし、ダウンロードするファイルが数十MBに及んでいることがあったり、機能を付け足す度にライブラリをダウンロードし直す必要があったりする。

　Spryの場合、ダウンロードして解凍した状態では8MB弱。実際のライブラリファイル等は1MB程度でアップロードすることができる（図1）。また、「SpryEffects.js」「SpryHTMLDataSet.js」など、わかりやすい機能名でファイル名がつけられているため、必要な機能のファイルだけを的確に参照することができる。一つ一つのファイルは、100KB程度なので、参照してもほとんど気にならないサイズなのが魅力だ。

ライブラリは1MB足らずと軽量 図1：ライブラリは1MB足らずと軽量

簡単な記述

　Spryは、「デザイナのための」と銘打つだけあって、非常に簡単な記述でスクリプトを作ることができる。JavaScriptはほとんど使わずに、できるだけHTMLの拡張属性や独自の記述でまかなおうという努力が見える。

　例えば、<div>要素をフェードインで表示させたい場合、他のライブラリではオブジェクトを作って、そのプロパティに何かを設定して…といった、複雑な工程を経るものも少なくない。しかし、Spryの場合は簡単に作ることができる。実際に以下のソーススクリプトをコピーすれば、動作させることができるので、実際に試してみてほしい。

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>フェードアウトのサンプル</title>
<script type="text/javascript" src="includes/SpryEffects.js"></script>
<script type="text/javascript">
window.onload = function() {
    document.getElementById('areaTarget').onclick = function() {
        new Spry.Effect.DoFade('areaTarget', {duration: 500, from: '100%', to: 0});
    }
}
</script>
</head>

<body>
<div id="areaTarget" style="background-color: #66CCFF; width: 100px; height: 100px; padding: 5px; font-size: 0.8em">クリックすると、このエリアがフェードインします</div>
</body>
</html>

　これで、領域のフェードアウトの処理を作ることができた（図2）。上記の一文を見るだけで、スクリプトに慣れた人なら何をやっているかわかるはずだ。上記は「ID属性が"areaTarget"の<div>要素を、500ミリ秒の早さで、100%から 0(%)までフェードアウトする」という意味である。

フェードアウト処理 図2：フェードアウト処理

　また、「XMLを読み込んで、ページ内に表示する」という一見複雑そうなスクリプトについても、以下のようなスクリプトで実現することができる。

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>XMLを読み込む</title>
<script src="includes/xpath.js" type="text/javascript"></script>
<script src="includes/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
var ds1 = new Spry.Data.XMLDataSet("data/scores.xml", "teams/team");
</script>
<style type="text/css">
table,
th,
td {
    border: 1px solid #999999;
    border-collapse: collapse;
}

th {
    background-color: #CCCCCC;
}

.score {
    text-align: right;
}
</style>
</head>

<body>
<div spry:region="ds1">
  <table border="1" cellpadding="3" cellspacing="1" summary="golf score">
    <tr>
      <th>名前</th>
      <th>1ラウンド</th>
      <th>2ラウンド</th>
      <th>3ラウンド</th>
      <th>4ラウンド</th>
      <th>5ラウンド</th>
    </tr>
    <tr spry:repeat="ds1">
      <td>{name}</td>
      <td class="score">{round1}</td>
      <td class="score">{round2}</td>
      <td class="score">{round3}</td>
      <td class="score">{round4}</td>
      <td class="score">{round5}</td>
    </tr>
  </table>
</div>
</body>
</html>

　これだけで、XMLファイルを読み込んでテーブルに表示させることができる（図3）。驚くことに、JavaScriptのスクリプトは1行だけで済んでいる。スクリプトの代わりに利用しているのが、「spry:」から始まる拡張属性をHTMLタグに記述することだ。こうして、デザイナやマークアップエンジニア（HTMLコーダー）でも簡単にJavaScriptを使ったスクリプトを作ることができるというわけだ。

図3：XMLファイルを読み込んでHTMLテーブルとして表示

　とはいえ、この辺りは賛否両論があり、デザインとスクリプトの分離という考えやスクリプトの応用性を考えると、必ずしも好ましい作り方とはいえない。このあたりは、好みの分かれるところといえるだろう。

関連情報

「経営が知るべきバズワード」 の新着情報

「魅力のAjaxライブラリAdobe Spry入門」 のバックナンバー

ホワイトペーパー

もっと見る »

もっと見る »

もっと見る »

http://japan.zdnet.com/sp/feature/07spry/story/0,3800079777,20355823,00.htm
あのエフェクトがこんなに簡単に：魅力のAjaxライブラリAdobe Spry入門

Intel Video Series

sponsored by Intel

新着企業動向

話題のタグ

ZDNet Japan ニューズレター

企業情報システムの選択、導入、運用管理に役立つ情報を毎朝メール配信します。

ニューズレターの登録・登録情報変更　»