builder Top
HTML/CSS
- HTML
- Safari
- XHTML
- Internet Explorer
- Photoshop
- ...

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

たにぐちまこと（H2O Space.）

2007/09/05 20:30

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

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

シンプルなファイル構成

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

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

図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を使ったスクリプトを作ることができるというわけだ。