【レビュー】
Widgetという考え方が登場した「Adobe Spry framework for Ajax 1.2」
2006/07/25
アクセシビリティも考慮しているという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タグ内
<div id="panel1">
<div>パネル</div>
<div>パネルの内容</div>
</div>
</div>
<div>
.... (略)
そして、この下あたりで次のコードを1行書き、Accordion Widgetを呼び出すだけだ。
var acc1 = new Spry.Widget.Accordion("Acc1");
</script>
これで、あっという間にアコーディオンコントロールができ上がる。
このあたりはさすがに「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」のスタイルを定義しておく。
background-color: #66CCFF;
}
.odd {
background-color: #FFFFCC;
}
これで、図のような1行ごとに色の違うテーブルを作ることができるようになるのだ。もちろん、行が追加・削除されても、それに合わせて自動的に色が変化するので、手作業で行う作業はなにもない。
![]() |
|
行ごとに色を変えた表。デザインではよく使われる手法だ |
もう1つ追加された属性は、行番号を付与する{ds_RowNumberPlus1}だ。これまでも、データセットの行番号を表す{ds_RowNumber}という属性はあった。しかし、この属性はデータセットの先頭を「0」と数えるため、表が0から始まってしまっていたのだ。しかし、一般的に私たちは最初の項目を「1」と数える。そんな時に、この{ds_RowNumberPlus1}を使えば、先頭が1から始まるようになるというわけだ。非常に細かい改良ではあるが、このようなきめ細かい対応は非常に好感が持てると思う。
< |
![]() |
|
{ds_RowNumber}属性 |
{ds_RowNumberPlus1}属性 |
関連記事
関連サイト
ヘッドライン
- iPhoneで本格的なDJプレイを可能にする音楽アプリ「Cue Play DJ」発売[20:19 3/19]サウンド
- 【コラム】クリエイティブ初心者のためのFlash講座 第20回 ActionScriptを活用しデジタル時計を作成(その5) -htmlテキストを作る[19:27 3/19]Adobe
- データクラフト、「デザインポケット」にて欧文書体のダウンロード販売開始[17:16 3/19]DTP
- ドローソフトの操作性を融合したグラフ制作ソフト「OmniGraphSketcher」[16:37 3/19]DTP
- 「STUSSY」と交友のある写真家10名の写真展開催-RING CUBEにて[16:15 3/19]Webデザイン
- iPhoneや携帯サイトに対応-サイト制作ソフト「BiND for WebLiFE* 3.5」[15:43 3/19]Webデザイン
- 101のテキストアニメーションパターン収録のAfter Effectsコンポジション集[22:59 3/18]Adobe
- 六本木の街がアート一色に!! -「六本木アートナイト2010」開催[22:36 3/18]Webデザイン
- 人気のAfter Effectsコンポジション集「Amazing Video Wall Vol.3」発売[22:31 3/18]Adobe
- MacBook用ケース発売--デザイナーはパリコレブランドをプロデュース[22:03 3/18]Webデザイン





<




