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

　今回は、もう少し掘り下げて 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を使ったスクリプトを作ることができるというわけだ。

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

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

1 2 3 次のページへ ≫

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

メールマガジン購読のお申し込み

ZDNet Japan トップへ

この記事を読んだ方に

関連キーワード: 開発

関連企業： Adobe Systems , アドビシステムズ（disital experience)

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

連載

CIO: ITアナリストが知る日本企業の「ITの盲点」; シェアリングエコノミーの衝撃; デジタル“失敗学”; コンサルティング現場のカラクリ; Rethink Internet：インターネット再考; インシデントをもたらすヒューマンエラー; トランザクションの今昔物語; エリック松永のデジタルIQ道場; 研究現場から見たAI; Fintechの正体; 米ZDNet編集長Larryの独り言; 大木豊成「仕事で使うアップルのトリセツ」; 山本雅史「ハードから読み解くITトレンド放談」; 田中克己「展望2020年のIT企業」; 松岡功「一言もの申す」; 松岡功「今週の明言」; 内山悟志「IT部門はどこに向かうのか」; 林雅之「デジタル未来からの手紙」; 谷川耕一「エンプラITならこれは知っとけ」; 大河原克行「エンプラ徒然」; 内製化とユーザー体験の関係; 「プロジェクトマネジメント」の解き方; ITは「ひみつ道具」の夢を見る
セキュリティ: エンドポイントセキュリティの4つの「基礎」; 企業セキュリティの歩き方; サイバーセキュリティ未来考; ネットワークセキュリティの要諦; セキュリティの論点
スペシャル: エンタープライズAIの隆盛; インシュアテックで変わる保険業界; 顧客は勝手に育たない--MAツール導入の心得; 「ひとり情シス」の本当のところ; ざっくり解決！SNS担当者お悩み相談室; 生産性向上に効くビジネス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 Technologies World; AWS re:Invent; AWS Summit; PTC LiveWorx; 吉田行男「より賢く活用するためのOSS最新動向」; 古賀政純「Dockerがもたらすビジネス変革」; 中国ビジネス四方山話; ベトナムでビジネス; 日本株展望; 企業決算

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

シンプルなファイル構成

簡単な記述

この記事を読んだ方に

関連記事

Webサイトデザインを省力化--CSSフレームワーク「Blueprint 0.5」

Web IDE AptanaのAdobe AIR対応を試す

アドビ、「Adobe Integrated Runtime」（AIR）のベータ版をリリース

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

SpryとAIRもDreamweaverで楽々

Adobe SpryとDreamweaver CS3であのエフェクトもサクサク：魅力のAjaxライブラリAdobe Spry入門