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

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

2007-09-06 08:00

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

シンプルなファイル構成

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

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

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

簡単な記述

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

　例えば、

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








フェードアウトのサンプル





クリックすると、このエリアがフェードインします

　これで、領域のフェードアウトの処理を作ることができた（図2）。上記の一文を見るだけで、スクリプトに慣れた人なら何をやっているかわかるはずだ。上記は「ID属性が"areaTarget"の

要素を、500ミリ秒の早さで、100%から 0(%)までフェードアウトする」という意味である。

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

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








XMLを読み込む








  
    
      名前
      1ラウンド
      2ラウンド
      3ラウンド
      4ラウンド
      5ラウンド
    
    
      {name}
      {round1}
      {round2}
      {round3}
      {round4}
      {round5}

名前	1ラウンド	2ラウンド	3ラウンド	4ラウンド	5ラウンド
{name}	{round1}	{round2}	{round3}	{round4}	{round5}

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