• ホーム
• 購読申込
• ヘルプ
• アーカイブ

「Ajax したい！」Web デザイナーのための Spry 集中講座

第四回：Dreamweaver CS3 + Spry Widgetで
一歩先行く UI をあなたの Web ページに

Dreamweaver CS3 の Spry Widget

Spry Widget とは、構成を定義する HTML コードブロック、動作を制御する JavaScript コード、外観を定義する CSS の3つで形成されたコードの塊で、誰もが再利用可能な形で提供されているものです。

Dreamweaver CS3 には、テキストフィールドやチェックボックスといったフォームオブジェクトの内容を検査するWidget、メニューバーやアコーデオンといったインタフェイス作成用の Widget、任意のエレメントに対してフェードインや拡大縮小等のアニメーション効果を設定する Widget が搭載されています。

Spry Widget は、アドビの作成ガイドラインに則っており、マウスが使用できない場合を想定したキーボード操作によるアクセシビリティの確保と、JavaScript が無効になっている環境でもレイアウトを保持したまま最低限の表示が行えるように配慮されています。そのため、ユーザはこれらのことを特別に意識することなく、簡単に制作中のページ内に Widget を挿入し、さまざまな機能を追加することができます。また、使用される外部 JS ファイルや CSS ファイルは一目で分かるものとなっていて、いつでもカスタマイズ可能です。

また、Dreamweaver CS3 で Spry を扱う利点として、Spry に関連するファイルを Dreamweaver が一括管理してくれるところがあります。例えばドキュメントウィンドウ上で不要な Widget を削除すると、HTML コードブロックはもちろん、スクリプトタグ内で指定されている Spry Widget の動作定義、その HTML ファイルにリンクしているSpry のスタイルが定義されている外部 CSS ファイル、Spry のプログラム本体である外部の JS ファイル、これらを同時に削除してくれるのです。

実際に Dreamweaver CS3 を使ってみると、その簡単さがよりお分かりいただけるでしょう。まずはそれぞれの機能を実際に使ってみることにします。

検査フォーム Widget

フォームに値が入力されているか、入力された値が正しいか。従来はこれらのことを判定するために、JavaScript を自身で作成する必要がありました。Spry の検査フォーム Widget を使用すれば、一切の難解なコーディングを行うことなく機能を追加することが可能です。

まず、Dreamweaver CS3 を起動し、「挿入」-「Spry」-「Spry テキストフィールド検査」をクリックするなどしてテキストフィールド検査 Widget を挿入してみてください。フォームオブジェクトの挿入方法は、通常の HTML オブジェクトと同様です。ラベルや ID 名を半角英数字の任意のものを入力して設定を確定してください。この状態でコードビューを見ると以下のようなソースが記述されているかと思います。これが Widget を構成する HTML のコードブロックになります。

<form id="form1" name="form1" method="post" action="">

 <span id="sprytextfield1">

     <input type="text" name="TextField_Check" id="TextField_Check" />
         <span class="textfieldRequiredMsg">値を指定する必要があります。</span>
         <span class="textfieldInvalidFormatMsg">無効な形式です。</span>
 </span>

</form>



<script type="text/javascript"> 
<!-- 

  var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["change"], isRequired:false}); 
//-->               

</script>

まず最初のspanタグで 囲まれたエレメントが Spry テキストフィールドを宣言し、その中でテキストフィールド本体の inputタグと、表示されるエラーメッセージ用のテキストを内容がSpanタグで記述されています。その次に記述されている Scriptタグ 内のコードが Spry の動作を定義しています。

ここであえて Spry のことを把握していただくためにコードを紹介しましたが、Dreamweaver CS3 上での動作定義はプロパティウィンドウだけで行うことができます。ドキュメントに挿入されたテキストフィールドをマウスで選択した状態で、その直前にあるタグ、span#sprytextfield1をタグセレクタで選択します。Dreamweaver CS3 のプロパティウィンドウの設定が、以下のような Spry テキストフィールドのプロパティ表示になるかと思います。ここでさまざまな設定を行えます。

ここでは試しに、電話番号入力用のテキストフィールドを作成してみました。タイプを「電話番号」にし、形式をカスタムパターンで好きなように設定できるようにしています。ここで「パターン」には、以下のような法則で独自の入力制限を設定することが可能です。

今回は電話番号なので、パターンは(00)0000-0000と指定しました。

「ヒント」には、入力前のサンプルとして表示する内容を入力します。検査のタイミングはそれぞれ、onBlur（フォーカスがテキストフィールドから外れたとき）、onChange（入力内容が変更されたとき）、onSubmit（送信ボタンが押されたとき）で設定することができます。「必須」はテキストフィールドへの入力を必ず要求する場合、「パターンを適用」は、実際の入力時にそのパターンに適合した文字列が入力された場合にのみ、テキストフィールドへの文字入力が行われるようになります。実際に設定したテキストフィールドが以下です。

Dreamweaver CS3 にはこの他にも Select メニューの選択項目をチェックする Widget、チェック個数を指定できるチェックボックス Widget、入力文字数をリアルタイムに監視するテキストエリア Widget が用意されています。いずれもコーディングを行うことなく、プロパティウィンドウ上から設定が行えるようになっています。

以下、それぞれ簡単に Dreamweaver で挿入を行ったSpry Widgetの実例と Dreamweaver の記述するコード内容を紹介します。

<span id="spryselect1">
   <select name="Select_Check" id="Select_Check">
       <option value="1">選択可能</option>
       <option value="2">選択可能</option>
       <option value="3">選択不可</option>
   </select>

   <span class="selectInvalidMsg">この項目は選択できません。</span>
   <span class="selectRequiredMsg">項目を選択してください。</span>
</span> 

<script type="text/javascript">
<!-- 
    var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1", {isRequired:false, invalidValue:"3", validateOn:["change"]});
//-->
</script>

<span id="sprycheckbox1">   
      <input type="checkbox" name="chkBox_Check1" id="chkBox_Check1" />
          A
      <input type="checkbox" name="chkBox_Check2" id="chkBox_Check2" />
          B
  　  <input type="checkbox" name="chkBox_Check3" id="chkBox_Check3" />
　　　　  C
      <input type="checkbox" name="chkBox_Check4" id="chkBox_Check4" />
          D
   <span class="checkboxMinSelectionsMsg">1つは選んでください。</span>
   <span class="checkboxMaxSelectionsMsg">3つまでしか選べません。</span>
</span>

<script type="text/javascript">
<!-- 
    var sprycheckbox1 = new Spry.Widget.ValidationCheckbox("sprycheckbox1", {isRequired:false, validateOn:["change"], minSelections:1, maxSelections:3});
//-->
</script>

<span id="sprytextarea1">
  <textarea name="txtArea_Check" id="txtArea_Check" cols="45" rows="5"></textarea> 
     現在<span id="countsprytextarea1">&nbsp;</span>文字
</span>

<script type="text/javascript">
<!-- 
   var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {validateOn:["change"], isRequired:false, counterType:"chars_count", counterId:"countsprytextarea1", minChars:5, maxChars:40});
//-->
</script>

さて、ここで Spry に予め設定されているエラーメッセージ等のスタイルを自信で好きな形に変更してみましょう。Spry Widget で使用されるスタイルの設定は、それと分かる名前で定義された外部 CSS（テキストフィールド検査 Widget であれば SpryValidationTextField.css）に設定されています。この変更も Dreamweaver CS3であれば簡単に行えます。

Spry エレメントを選択した状態でプロパティウィンドウ上にある「プレビュー」をプルダウンで変更すると、Dreamweaver のドキュメントウィンドウ上で各エラーメッセージの表示状態を確認できます。この状態で CSS パネルの値、例えば border カラーの値を赤から青に変えるといったような設定を行うと、Dreamweaver は該当する CSS ファイルを探し出して該当する値の変更を書き込んでくれます。多数の CSS ファイルの中から該当するCSSファイルを開き、変更したいCSSの設定内容を探し出して値の変更を行う…といった煩わしい作業は一切必要ありません。

次号では残りの Spry Widget機能、インターフェイス作成用 Widget と Spry効果 について紹介します。

‹ 戻る