builder Top
HTML/CSS
- Webデザイン
- Photoshop
- CSS
- Internet Explorer
- XHTML
- ...

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

たにぐちまこと（H2O Space.）

2007/09/05 20:30

Spryは、「デザイナのための」と銘打つだけあって、非常に簡単な記述でスクリプトを作ることができる。JavaScriptはほとんど使わずに、できるだけ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ファイルの一部である。これを見ると、コメントが適切に作られている上、クラス名も分かりやすくなっているため、改造が容易である。実際、ウィジットを実践に使ってみても、かなりカスタマイズを施して、オリジナルのパーツとして使うことができた。

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>アコーディオンウィジットを使う</title>
<script src="widgets/accordion/SpryAccordion.js" type="text/javascript"></script>
<link href="widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="Accordion1" class="Accordion">
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">1つめのコンテンツ</div>
    <div class="AccordionPanelContent">1つめのコンテンツの内容です</div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">2つめのコンテンツ</div>
    <div class="AccordionPanelContent">2つめのコンテンツの内容です</div>
  </div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>

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

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