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

たにぐちまこと（H2O Space.） 2007年09月06日 08時00分

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

シンプルなファイル構成

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

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

ライブラリは1MB足らずと軽量 図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}

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

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

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

関連キーワード
開発

この記事を読んだ人におすすめの資料

関連記事

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

ピックアップコンテンツPR

企画特集PR

事列解説

ソリューション

インタビュー

デジタル製品

ZDNet JapanスペシャルPR

企画特集一覧へ

カテゴリーランキング
  1. HTML5はFlashとSilverlightの代わりになれるか - ZDNet Japan
  2. 2012年に開発者が学ぶべき10のスキル - ZDNet Japan
  3. スクリプト言語で最も使われているのはPHP--開発者の数ではPerl - ZDNet Japan
  4. OpenOfficeにも縛られない--会津若松市がLibreOfficeの試用を開始 - ZDNet Japan
  5. 高機能テキストエディタ、Vimを使ってみる - ZDNet Japan
スペシャルPR
新着企業動向

企業動向一覧へ

ZDNet Japanは、情報システム部門の読者を対象に、ITを活用したビジネス課題の解決策を提供します。技術や製品の解説、ケーススタディ、ホワイトペーパーなどを通じて、情報システム部門の正しい意志決定を支援します。

ITビジネス全般については、CNET Japanをご覧ください。