アクセシビリティも考慮しているというSpry Widget Model

Adobe Systemsのデザイナー向けAjaxフレームワーク、「Spry framework for Ajax」(beta)の最新バージョンバージョン1.2が13日(米国時間)、同社の「Adobe Labs」にて公開された。順調にバージョンアップを重ねているが、これまでは、デザインツールを提供するAdobeが作っているにもかかわらず、XMLの処理といったある意味「地味」な機能が多かったといえる。今回のバージョン1.2では、UIコントロールが「Widget」として切り分けられており、設定が分かりやすくなっている。

バージョン1.2では、SpryAccordion.jsがwidgets/accordionフォルダに移動している。以前のバージョン1.1では、demos/includesフォルダの中にあったものだ。一見すると、単なるファイルの移動だが、この先のSpryを占う重要な変化なのだ。その理由については後ほど説明するとして、まずはAccordion Widgetの使い方を紹介しよう。

まずはサンプルをご覧いただきたい。

実装サンプル

大規模なWebサイトや、アプリケーションなどでよく見るインタフェースだが、パネルに分かれた情報を、パネルタブをクリックすることで切り替えて表示することができる。非常になめらかなアニメーションの上に、内容がはみ出したときにスクロールバーが自動的に表示される。また、マウスが使えないユーザーのために、キーボードのカーソルキーの上下キーで操作することもできる。

ここまで高機能でリッチなアコーディオンだが、必要なコードはそれほど多くない。最初に、「SpryAccordion.js」をリンクして、divタグの組み合わせでパネルを作り、それらをdivタグでさらに束ね、idを付加する。

headタグ内

bodyタグ内

そして、この下あたりで次のコードを1行書き、Accordion Widgetを呼び出すだけだ。

これで、あっという間にアコーディオンコントロールができ上がる。

このあたりはさすがに「for Web Designer」と謳っているだけのことはある。もちろんJavaScriptが使えないユーザーがアクセスしても、コンテンツ内容は伝えることができる。図のように、すべてのパネルが開いた状態で見られるだけである。

また、パネルの見た目はCSSで簡単に変更することができ、Dreamweaver等のオーサリングツールでも編集することができるという、非常に便利で使いやすいWidgetなのだ。

さらなるWidgetの登場に期待

さて、上記のような特徴を持つSpryAccordion.jsが、widgets/accordionフォルダへ移動したということは、Accordionというコントロールが、「Widget」という存在としてまとめられたことを意味する。当然ながら次の動きとして期待されるのは、新しいWidget、つまりさらなるUIコントロールの追加だろう。

例えば、インフォメーションなどを表示するダイアログボックス、日付を簡単に入力できるカレンダーコントロール、スライダなども追加されるかも知れない。Adobeがこれらをデザインすると、いったいどんなコントロールになるのか。今後のリリースが非常に楽しみである。

表のスタイル定義が便利に

もちろん他にもさまざまなバージョンアップが図られている。中でも注目すべきは、新たに追加された拡張属性である。例えば、表組みを作る際、1行ごとに色を変えると、表が非常に見やすくなる。しかし、1行ごとに手作業で色を付けていくのは、手間がかかるし、途中で行が追加・削除された場合、それ以降の行の色指定が全部やり直しになる。これでは、変更が大変だ。そんなときに便利なのが{ds_EvenOddRow}である。使い方は簡単。trタグのclass属性に次のように指定する。

そして、スタイルシートで「even」と「add」のスタイルを定義しておく。

これで、図のような1行ごとに色の違うテーブルを作ることができるようになるのだ。もちろん、行が追加・削除されても、それに合わせて自動的に色が変化するので、手作業で行う作業はなにもない。

もう1つ追加された属性は、行番号を付与する{ds_RowNumberPlus1}だ。これまでも、データセットの行番号を表す{ds_RowNumber}という属性はあった。しかし、この属性はデータセットの先頭を「0」と数えるため、表が0から始まってしまっていたのだ。しかし、一般的に私たちは最初の項目を「1」と数える。そんな時に、この{ds_RowNumberPlus1}を使えば、先頭が1から始まるようになるというわけだ。非常に細かい改良ではあるが、このようなきめ細かい対応は非常に好感が持てると思う。