あのエフェクトがこんなに簡単に:魅力の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テーブルとして表示

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

ZDNet Japan 記事を毎朝メールでまとめ読み(登録無料)

  • このエントリーをはてなブックマークに追加

この記事を読んだ方に

関連キーワード
開発

連載

CIO
IT部門の苦悩
Rethink Internet:インターネット再考
インシデントをもたらすヒューマンエラー
トランザクションの今昔物語
エリック松永のデジタルIQ道場
研究現場から見たAI
Fintechの正体
米ZDNet編集長Larryの独り言
大木豊成「仕事で使うアップルのトリセツ」
山本雅史「ハードから読み解くITトレンド放談」
田中克己「2020年のIT企業」
松岡功「一言もの申す」
松岡功「今週の明言」
内山悟志「IT部門はどこに向かうのか」
林 雅之「デジタル未来からの手紙」
谷川耕一「エンプラITならこれは知っとけ」
大河原克行「エンプラ徒然」
内製化とユーザー体験の関係
「プロジェクトマネジメント」の解き方
ITは「ひみつ道具」の夢を見る
セキュリティ
「企業セキュリティの歩き方」
「サイバーセキュリティ未来考」
「ネットワークセキュリティの要諦」
「セキュリティの論点」
スペシャル
ざっくりわかるSNSマーケティング入門
課題解決のためのUI/UX
誰もが開発者になる時代 ~業務システム開発の現場を行く~
「Windows 10」法人導入の手引き
ソフトウェア開発パラダイムの進化
エンタープライズトレンド
10の事情
座談会@ZDNet
Dr.津田のクラウドトップガン対談
Gartner Symposium
IBM World of Watson
de:code
Sapphire Now
VMworld
Microsoft WPC
Microsoft Connect()
HPE Discover
Oracle OpenWorld
Dell EMC World
AWS re:Invent
AWS Summit
PTC LiveWorx
より賢く活用するためのOSS最新動向
古賀政純「Dockerがもたらすビジネス変革」
中国ビジネス四方山話
ベトナムでビジネス
米株式動向
日本株展望
企業決算