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

たにぐちまこと（H2O Space.）
2007/09/05 20:30

Spryは、「デザイナのための」と銘打つだけあって、非常に簡単な記述でスクリプトを作ることができる。JavaScriptはほとんど使わずに、できるだけHTMLの拡張属性や独自の記述でまかなおうという努力が見える。

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

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

<?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/textfieldvalidation/SpryValidationTextField.js" type="text/javascript"></script>
<link href="widgets/textfieldvalidation/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form id="form1" name="form1" method="post" action="sample04.html">
  お名前: <span id="spryName">
  <input name="name" type="text" id="name" size="25" maxlength="255" value="" tabindex="0" accesskey="n" />
  <span class="textfieldRequiredMsg">お名前をご記入ください</span></span>
</form>
<script type="text/javascript">
var spryName = new Spry.Widget.ValidationTextField("spryName", "none", {validateOn:["blur"]});
</script>
</body>
</html>

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

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

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

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

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

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

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

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

記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 今日のトップ記事
  • 昨日
  • 2日前
  • 3日前
  • 6日前
  • 7日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Safari 入門 HTML リファレンス Webデザイン Apple 開発環境 CSS フレームワーク iPhone 3G Flash iPhone Ajax iPod touch Eclipse 仮想化 XHTML Database Adobe Internet Explorer RIA JavaScript Off Topic Microsoft Leopard Python Ruby Firefox Windows Mozilla Apache Tips Opera Webアプリケーション開発 Firefox 3 Google Mac OS X SOA Java PHP オープンソース ブラウザ 小技 server CSS 3 イロハ Solaris ライブラリ Linux C/C++
  • 話題のタグを見る »