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

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

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

  

    

      
名前
      
1ラウンド
      
2ラウンド
      
3ラウンド
      
4ラウンド
      
5ラウンド
    
    

      
{name}
      
{round1}
      
{round2}
      
{round3}
      
{round4}
      
{round5}
    
  

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

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

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

ウィジットの完成度と応用性

　前回も紹介したが、筆者がSpryで最も魅力的に感じているのは、豊富なウィジットだ。アコーディオンパネルやタブビューを簡単に構築することができる。また、他のライブラリでは、CSSが既存のものに干渉してしまい、ウィジットの見た目が崩れてしまったり、既存ページ内の要素が崩れてしまうということが多々あったのだ。

　しかし、Spryの場合は今までそのようなケースに当たってしまったことはない。クラスによってCSSが明確に定義されており、どこに組み込んでもclass属性で適切にスタイルが適用されるようになっている。また、例えば次のCSSファイルを見てみよう。

@charset "UTF-8";

/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves.
 *
 * If you want to constrain the width of the Accordion widget, set a width on
 * the Accordion container. By default, our accordion expands horizontally to fill
 * up available space.
 *
 * The name of the class ("Accordion") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * Accordion container.
 */
.Accordion {
    border-left: solid 1px gray;
    border-right: solid 1px black;
    border-bottom: solid 1px gray;
    overflow: hidden;
}

/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel {
    margin: 0px;
    padding: 0px;
}
...

　これは、アコーディオンウィジット用のCSSファイルの一部である。これを見ると、コメントが適切に作られている上、クラス名も分かりやすくなっているため、改造が容易である。実際、ウィジットを実践に使ってみても、かなりカスタマイズを施して、オリジナルのパーツとして使うことができた。

　組み込みの方法であるが、スクリプトは以下のようになっている。

  

    
1つめのコンテンツ
    
1つめのコンテンツの内容です
  
  

    
2つめのコンテンツ
    
2つめのコンテンツの内容です
  

　またもや、JavaScriptはbody要素の一番下に1行あるだけである。これだけで、美しいエフェクトでアコーディオンが開閉するのだ（図4）。これを見たときは筆者は感動してしまった。

図4：簡単な記述でアコーディオンを実現

フォーム検査の利点と今後の改善点

　フォーム検査も次のように実装は簡単だ。

  お名前: 
  
  お名前をご記入ください

　エラーメッセージをあらかじめ準備しておき、決められたclass属性をつけた要素で囲っておけば、エラーが発生するまでは表示されなくなる。また、エラーが発生したらテキストフィールドの色が変わって、エラーメッセージが表示されるという仕組みだ（図5）。スクリプトはやはり、1行程度で完成する。

図5：フォームエラーも簡単

　ただ、このフォーム検査ウィジットについては、まだ本バージョンから搭載されたばかりというのもあって、未完成の感が否めない。例えば、エラーメッセージについてはHTMLには最初から存在していて、CSSによって隠しているだけだ。これでは、音声ブラウザやCSSを無効にした状態では、常に表示・発声され続けてしまい、正しく内容が伝わらなくなってしまう。

　標準のCSSを改造したりスクリプトを組み直せば、解消することはできる。しかし、今後のバージョンアップで標準的に、これらが解決できるようになると、実用度はより上がるといえるだろう。今後に期待したい。

豊富なドキュメント・サンプルとディスカッションルーム

　このように、まだまだこれからの部分はあるものの、やはりSpryは非常に優れたライブラリといえるだろう。ライブラリの場合、ライセンスが緩い代わりにドキュメントが整備されていなかったり、サンプルが高度すぎて応用できないものなどもあったりして、最初の段階でつまずくことも多い。

　しかし、ドキュメントやAPIリファレンスは英語ではあるものの、既に整備されている。また一つのメソッドに一つサンプルが付属しているような箇所も多々あるため、難なく使うことが可能だ。

　さらに、Adobe Labs自身がディスカッションルームを準備しており、わからない部分は質問すれば、場合によってはAdobeの開発者自身から回答を得ることもできる場合がある。リクエストや質問を、直接開発者に届けることができるというのは、貴重な場といえるだろう。