Dreamweaver記事

Dreamweaverで使いやすい入力フォームをつくりましょう。

はじめに

Dreamweaver CS3に搭載されているJavaScriptのライブラリであるSpry Framework for Ajaxは、Dreamweaver CS3を操作するだけでHTMLにリッチな機能を追加できます。

Spry Framework for Ajaxというのは、その名の通りAjaxを使うことを想定した機能を中心に構成されています。しかし、必ずしもAjaxによる通信をせずとも、ユーザーの利便性を高めることもできます。

この記事では、Spry Framework for Ajaxに含まれるSpry Widgetを使って、Ajaxを使うことなく使いやすい入力フォームを作成し、Spry Framework for Ajaxを使いこなすための第一歩をご紹介いたします。

必要ソフトウェア

この記事では、以下のソフトウェアを使用しています。

Dreamweaver CS3

• 体験版
• 購入

Dreamweaver CS3でSpryを組み込む

Dreamweaver CS3でSpryを組み込んで、使いやすい入力フォームを使うのはとても簡単です。
挿入バーの「Spry」タブから必要な部品を挿入します。

図の赤で囲んだところが入力検査の部品になります。それぞれの入力フォームに対して入力チェックを行い、必要に応じてエラー表示を自動で行う機能を提供します。

なお、Spry Framwork for Ajaxの中で、ユーザーインターフェースをコントロールするライブラリのことを「SpryWidget」と言います。

SpryWidgetの入力検査は、ユーザーがサーバーにデータを送信する前にエラーをチェックすることで、ユーザーにデータ送信に対する不安を抱かせないようにすることができ、フォーム画面での離脱率改善が期待できます。

ここではテキストフィールド入力検査で簡単な必須入力チェックをしてみましょう。

まず、挿入バーのテキストフィールド入力検査アイコンをクリックします。

テキストフィールド入力検査をクリックすると、以下のように挿入されます。

次に、プロパティインスペクタで、プレビューの状態を「必須」に切り替えます。

すると編集画面上では必須入力時に表示されるエラーメッセージが表示されますので、適切なエラーメッセージに変えましょう。

ここで一旦、HTMLを保存してみましょう。すると、Dreamweaver CS3の方で自動的に今までに組み込まれた入力検査のファイルの保存を求めてきます。

エラーメッセージ表示の見た目や位置については、ここで組み込まれるCSSファイルを変更すること調整することができます。

さて、プレビューをしてテストしてみましょう。

ブラウザを立ち上げて、何も入力しないでSubmitボタンを押してみると、エラーメッセージが表示されてSubmitが抑止されます。

今回は必須チェックのみの設定ですので、テキストフィールドに何か文字を入力してSubmitすると正常に次の画面にデータを送信することができます。

入力可能な文字数の制御などは、テキストフィールド入力検査のプロパティインスペクタから設定できます。

Spry Framework for Ajaxの進化について

Spry Framework for Ajaxは、Dreamweaverのために作られたJavaScriptフレームワークですが、Dreamweaver製品のリリースにあわせてのみバージョンアップしていくのではなく、Adobe Labsで独自のバージョンアップが行われています。

本記事執筆時点で、Spry Framework for Ajaxのバージョンは、1.6.1となっております。Dreamweaver CS3に組み込まれているバージョンは1.4ですから若干バージョンアップが行われております。

Dreamweaver CS3には、ラジオボタンの入力検査が付属していませんが、最新版では配布されております。ラジオボタンの他にパスワードの再入力チェックなども配布されおり、最新版を使いたいケースも出てくるでしょう。

その場合は、Adobe Labsからダウンロードしてきた最新版に含まれる、JavaScriptとCSSを手動で組み込むことになります。

なおDreamweaver CS3日本語版は、Adobe Labsで配布されているSpry Framework for Ajaxの最新版についてはサポート範囲外となります。組み込む際は自己責任でお願いします。

Spry Widgetを手動で組み込むための３つのポイント

手動でラジオボタンの入力検査を追加して、ユーザーにラジオボタンの選択チェックを行います。

Adobe Labsからダウンロードした最新のSpry Framework for Ajaxに含まれているJavaScriptとCSSファイルをローカルファイルにコピーします。

以下のようにローカルフォルダにコピーしました。

さて、これからSpry Widgetを組み込んでいくのですが、組み込む方法を知るために、先ほどコピーしたJavaScriptとCSSファイルと同じフォルダにあった、サンプルのHTMLを開きましょう。

最初は、ここから必要なコードをコピーしながら、新しい機能を組み込みましょう。
以下がサンプルのHTMLです。

手動でSpry Widgetを組み込む場合に覚えておくポイントは、以下の３点です。

1. Spry Widgetの本体である外部JavaScriptと外部CSSを組み込む。
   Spry Widgetは、そのプログラムの特徴として、一つの機能毎に一つのJavaScriptと一つのCSSファイルで構成されています。
2. HTMLの構造を理解する。
   フォームのマークアップと、エラーメッセージの記述位置に関する構造は、Spry Widgetの方で決まっているので、この構造を壊さないようにします。具体的には、ValidRadio1というspanのid記述は、JavaScriptの記述に必要で、エラーメッセージを取り囲むspanのclass名は、そのメッセージが何のエラーか？を示すマークアップとなります。
   さらにエラーメッセージを追加する場合は、このクラス名を変えたspan要素を追加します。詳しくはドキュメントを見てください。
3. JavaScriptを書きます。
   (1)で組み込んだ外部JavaScript、外部CSSと、(2)で記述したHTMLとを結びつけるコードを書きます。いつ、どのようなエラーチェックを行うか？というのもここに指定します。

以上の３点を考慮するだけで、Spry Widgetを組み込むことができます。
先ほどのコードをコピーしてブラウザでプレビューしてみますと、ラジオボタンの入力検査が組み込まれていることがわかります。

今回はラジオボタンを組み込みましたが、他のSpry Widgetも同じような方法で組み込むことができます。

ここで説明した３つのポイントを覚えておけば、パスワードの再入力チェックやツールチップや、レーティングなど便利なWidgetを利用することができますので、是非ともチャレンジしていただければと思います。

・その他のTips

Dreamweaver 10周年記念イベントでいただいた質問、後日、blogにいただいたコメントなどから得たアイディアをご紹介します。

・Spry入力検査のエラー表示のアクセシビリティ対応について

Spry Framework for Ajaxは、JavaScriptが利用できないブラウザでも正常に動作するように作られておりますが、入力検査のSpry Widgetだけはフォームのエラーメッセージをテキストで書いてしまうと、読み上げブラウザにエラーメッセージを読まれてしまうという問題がありました。

これに関してはエラーメッセージを画像で作成し、altに文字を書かないことで対処できます。

Spry Widgetの有無に限らずサーバサイドで値のチェックは必要になりますから、読み上げブラウザやJavaScriptがオフの人に向けては、サーバサイドの検査でエラーメッセージを表示するようにしてください。

・エラー表示のリッチコンテンツ化

応用編として、エラー表示のリッチコンテンツ化も可能です。

Spry Widgetのエラー制御は、エラーメッセージが記述されたspan要素の可視を切り替えるものですので、その中にエラーを説明するFlashアニメーションを配置して、その場でFlashアニメーションや動画を使って案内したり、iframeを使ってhelpページをオーバーレイ表示したりするなどで、より高度な「おもてなし」を行うことが可能です。

・Spry Widgetのエラーメッセージ以外にsubmit時にエラーを表示したい

フォームのsubmit時にエラーがあった場合に、共通した表示をsubmitボタンの近くに表示することもできます。

詳しくは以下のサンプルをごらんください。以下のサンプルはSpry Framework for Ajax バージョン1.6から対応しております。

• サンプルページへ

（このサンプルは、Spry Framework for Ajaxをダウンロードしたファイルの中にも入っています。）

著者について