Spryテキストフィールド検査ウィジェット導入事例：ショッピングポータル「カラメル」
作成日
19 December 2007
ページ ツール |
必要条件
ユーザーレベル
初級
サンプルファイル
- sprytextfiled.zip (26 KB)
私が所属する（株）paperboy&co.では、ショッピングポータル「カラメル」を運営しています。カラメルには、商品購入履歴やお気に入りの商品をソーシャルブックマーク形式で登録できる「マイカラメル」というユーザー機能があり、その登録作業のユーザビリティを向上させるために、Adobeの「Spry Framework for Ajax」の「Spryテキストフィールド検査ウィジェット」を利用しています。この記事では、Spryテキストフィールド検査ウィジェットを紹介するとともに、実際にどのようにカラメルで使用しているかを解説します。
Spryテキストフィールド検査ウィジェットの特徴と利用方法
Spryテキストフィールド検査ウィジェットとは
「Spry Framework for Ajax」は、アドビ システムズ社が提供するJavaScriptライブラリです。Spry Framework for Ajaxは、Dreamweaver® CS3には標準で組み込まれていますが、Adobe LabsにてBSDライセンスの元で配布されており、Dreamweaver CS3ユーザーでなくても利用することができます。
Spry Framework for Ajaxには、さまざまな機能が用意されており、その中に「Spryテキストフィールド検査」というウィジェットがあります。このウィジェットを使えば、高度なフォーム入力チェック機能を簡単に実現することができます。ユーザーがフォームのテキストフィールドに文字を入力すると同時にその入力チェックを行い、もし入力に不備があったらその場でエラーメッセージを表示することができるのです（図1）。
通常のフォームだと、フォームの送信ボタンを押して、データをサーバに送ってサーバサイドでエラーチェックをし、もしエラーがあればその内容が表示されるという流れです。つまり、すべてのフォーム項目を入力して送信ボタンを押すまでは、入力にエラーがあったとしてもユーザーは知らされないわけです。Spryテキストフィールド検査ウィジェットを使えば、入力に不備がある場合はその都度ユーザーに伝えることができるようになります。
商品購入時など入力フォームを使って個人情報を送る際は、不安を抱くものです。フォームを送る前に、一つでも多くの不安を取り除いておくことは、サイトへの信頼感、安心感へとつながると思います。
Spryテキストフィールド検査ウィジェットの利用方法
Spry Framework for Ajaxの最大の特徴は、誰もが簡単に利用できるということです。HTMLファイルでは、必要な外部ファイルを読み込み、あとはちょっとしたJavaScriptを記述するだけで実装することができるようになっています。それは、Spryテキストフィールド検査ウィジェットでも同じです。以下は、Spryテキストフィールド検査ウィジェットの組み込み例です。
<html>
<head>
<script src="js/SpryAssets/SpryValidationTextField.js" type="text/javascript" ></script>
<link href="js/SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="userform">
ログインIDを入力してください
<span id="spryUserName">
<input name="txtUserName" tabindex="1" type="text" id="txtUserName" value="" />
<span class="textfieldMinCharsMsg">3文字以上、13文字以下で入力してください。<br /></span>
<span class="textfieldMaxCharsMsg">3文字以上、13文字以下で入力してください。<br /></span>
</span>
</form>
<script type="text/javascript">
<!--
var spryUserName = new Spry.Widget.ValidationTextField("spryUserName", "none", {minChars:3, maxChars:13, validateOn:["change"]});
//-->
</script>
</body>
</html>
head要素内で、2つの外部ファイル（SpryValidationTextField.jsとSpryValidationTextField.css）を読み込んでいます。このSpryValidationTextField.jsファイル内に入力チェック機能のすべてのソースコードが書かれており、通常、このファイルを触る必要はありません。
form要素の中にはJavaScriptのコードを一切書いていません。class属性を「textfieldMaxCharsMsg」としたspan要素内のテキストは、エラー時に表示されるメッセージです。
ノート：エラーメッセージのデザインは、SpryValidationTextField.cssファイルで変更できます。
form要素の後方に書かれたJavaScriptコードは、文字数制限やチェックの実行タイミングなどのルールを指定するためのものです。
Spryテキストフィールド検査ウィジェットを組み込むには、基本的にこれだけの記述で済むのです。あとは、自動的にSpryテキストフィールド検査ウィジェットが、フォームの入力内容とルールを照らし合わせて、エラーメッセージの表示／非表示を制御してくれます。
Dreamweaverでの利用方法
JavaScriptに不慣れな人はDreamweaver CS3を使って簡単にSpryテキストフィールド検査ウィジェットを組み込むことができます。DreamweaverのパネルグループにはSpryタブがあり、それを選ぶと各種Spry機能のボタンが並んでいます（図2）。
これらの機能を利用するには、Spry機能のボタンをクリックして、あとは必要に応じて表示されるダイアログの項目を入力するだけです。
入力チェック機能をDreamweaver CS3の操作だけで組み込めることから、UIモックアップを作る段階で、あらかじめSpryテキストフィールド検査ウィジェットを利用して実際のエラー処理ができるものを作ってしまって、そのまま開発者に渡すという使い方もできるでしょう。
ノート：Dreamweaver CS3に標準で組み込まれているSpry Framework for Ajaxは、バージョン1.4です。最新版はバージョン1.6で、バージョンアップするには、Dreamweaverの拡張機能「Spry Update Extension for Dreamweaver CS3」をインストールしてください。
Spryテキストフィールド検査ウィジェットのメリット
Spryテキストフィールド検査ウィジェットを使えば、HTMLのソースコードもシンプルになり、全体の見通しもよくなるため、自分でJavaScriptを使った入力フォームチェックを作るよりもメンテナンス性が高くなる上に、すでに安定したライブラリを使うためテスト工数も少なくて済みます。
ただ、SpryはJavaScriptライブラリなので、古いWebブラウザやJavaScript機能がオフに設定されている環境では、Spryテキストフィールド検査ウィジェットは機能しません。しかし、通常のHTMLによる入力フォームとしては動作します。この場合は、今まで通りサーバサイドの入力チェックを使ってエラーを制御することになります。そして最新のWebブラウザやJavaScript機能がオンに設定されている環境では、Spryテキストフィールド検査ウィジェットの機能を生かしたリッチな入力フォームを利用することができます。つまり、新しいWebブラウザを使う人には最新のユーザー体験を提供するとともに、古いブラウザを利用している人にもHTMLフォームとしての機能を損なわずに提供することができるのです。
JavaScriptによる入力チェックはセキュリティを高めるものではなく、利用者に対して高いユーザビリティを提供するものです。Spryテキストフィールド検査ウィジェットを利用するからセキュリティ面は万全と考えるのではなく、そのおかげで開発工数が少なくて済む分、セキュリティに責任を持たねばならない開発者がサーバサイドのセキュリティの確保に専念できるようにするためのものだと考えましょう。
ショッピングポータル「カラメル」での使用例
Spryテキストフィールド検査ウィジェットでユーザー登録を支援する
ショッピングポータル「カラメル」は、（株）paperboy&co.が提供しているネットショップ構築ASPサービス「Color Me Shop!pro」を利用しているショップオーナーのための、集客支援サイトです。各オーナーは、カラメルに出店して、自分たちのショップの商品を紹介しています。
カラメルには、訪れたお客さんが商品購入履歴やお気に入りの商品をソーシャルブックマーク形式で登録できる「マイカラメル」というユーザー機能があります。このマイカラメルを利用する際に必要となるユーザー登録や、マイカラメルを利用したお気に入り登録など際の入力フォームのユーザビリティ向上のためにSpryテキストフィールド検査ウィジェットを採用しています（図3）。
カラメルでは、直接お客さまが商品を購入する機能はなく、あくまでもカラメル参加店舗のショップページにお客さまを誘導するのが目的です。商品を直接購入するサイトであれば、さまざまな理由でお客さまに会員登録してもらう動機は作れますが、マイカラメルの場合は、あくまでもショッピングが便利になるサポート機能を提供するに留まるため、いったん登録する気になったお客さまは確実に登録まで導きたいところです。そのため、ユーザー登録時のフォームが使いにくいなどの理由によって登録をやめてしまうといったことは避けなくてはなりません。そういった事情から高いユーザビリティを実現するために、Spryテキストフィールド検査ウィジェットを採用しています。
カラメルで使っているSpryテキストフィールド検査は、Spry Framework 1.4のものです。このバージョンでは、パスワードの再入力が一致するかをチェックする機能など、いくつかのチェック機能が不足していました。Spry Frwameworkは、BSDライセンスで提供されているため改造しても問題ないため、足りない機能についてはJavaScriptを改造して追加しました。
なお、ソースコードを変更するにしても、できるだけ改造する点は少なくした方がいいでしょう。なぜなら、現在のSpry Framework 1.6ではパスワードの再入力チェックを行う機能が追加されています。Spry Frameworkは、Dreamweaverよりも、早いリリースサイクルで機能が追加されたり、バグフィックスが行われているので、自分でソースコードを改造してしまう時には注意が必要です。弊社が機能を追加した際は、Spryテキストフォーム検査のソースコードの追加は最小限にとどめ、外部のJavaScriptに機能を追加していき、バージョンアップに追従しやすいように作りました。
Spryツールチップウィジェットで商品名を表示する
カラメルでは、もう1つSpry Framework for Ajaxのウィジェットを利用しています。それは、Spryツールチップウィジェットです。名前通り、ツールチップを表示させるための機能です。
ノート：DSpryツールチップウィジェットは、Spry Framework for Ajaxのバージョン1.6に含まれています。
カラメルでは、商品情報ページで関連商品を表示する部分にSpryツールチップウィジェットを利用しています。もともと、画像のみのナビゲーションで、img要素のalt属性に商品名のみを書いていて、マウスを画像に載せると商品名が画面に表示されるようにしていました。しかし、alt属性のラベル表示は反応速度が遅くて瞬時に商品名を提示できません。できれば画像のみではなく、商品名を表示するようにデザインを変更したかったのですが、デザイナーが他の業務で忙しく、レイアウト変更を行っている時間が取れませんでした。そこで、エンジニア一人でツールチップを組み込み、補助的な情報表示でカバーすることにしました。
以下のようなコードで実装しています。
<html>
<head>
<script src="js/SpryAssets/SpryTooltip.js" type="text/javascript" ></script>
<link href="js/SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tit">他にこんな商品はいかがですか？</div>
<ul>
<li id="item_box_5727730">
<a href="http://calamel.jp/dp/item/322110" alt="俺のつくったiPodshuffle" >
<img src="http://img03.shop-pro.jp/PA01004/337/product/322114_th.jpg" width="55" height="41"></a>
</li>
</ul>
<div id="tooltip_5727730" class="tooltip">
俺のつくったiPodshuffle
</div>
<script type="text/javascript">
var tt1 = new Spry.Widget.Tooltip("tooltip_5727730","#item_box_5727730");
</script>
</body>
</html>
head要素内で、2つの外部ファイル（SpryTooltip.jsとSpryTooltip.css）を読み込んでいます。このSpryTooltip.jsファイル内にツールチップ機能のすべてのソースコードが書かれています。
id属性を「"tooltip_5727730"」としたdiv要素内のテキストは、ツールチップに表示されるメッセージです。この後に続くJavaScriptコードで、マウスオーバー時にツールチップを表示したい要素と、ツールチップとして表示する要素を指定しています。これだけで、自動的にツールチップとして動作します。
この改善にかかった所要時間は、Adobe LabsからSpry Framework for Ajax 1.6をダウンロードしてから動作テストを行い、本番にリリースするまでに30分もかかっていません。完成されたユーザインターフェースを組み込むというアプローチは、Webサイト開発ではまだ慣れていないことかもしれませんが、ちょっとした改善を思いついた時にすぐできるというのは大きな武器といえるでしょう。
