内容 (What's Covered)

この文書では、Adobe Dreamweaver で Spry ページを作成する方法について説明します。

A. Spry とは

Spry フレームワークは、豊かなサイト体験が得られる Web ページの作成を可能にする JavaScript ライブラリです。Spry では、HTML、CSS、および最小限の JavaScript を使用して、XML データを HTML ドキュメントに組み込むことや、アコーディオンやメニューバーなどの Widget を作成することや、様々なページエレメントに多彩な効果を追加することができます。Spry フレームワークは、HTML、CSS、および JavaScript の基礎的な知識を持つユーザーであれば容易にマークアップを使用できるように設計されています。

B. Spry Widget の種類

B-1. アコーディオン Widget

アコーディオン Widget は、縮小可能なパネルのセットです。アコーディオン Widget を使用すると、わずかなスペースに多くのコンテンツを格納できます。ユーザーがパネルのタブをクリックすると、アコーディオンに格納されたコンテンツの表示/ 非表示が切り替わります。アコーディオンの各パネルは、ユーザーがクリックしたタブに応じて拡張および縮小されます。各アコーディオンでは、一度に 1 つのコンテンツパネルのみが開いて表示されます。

B-2. メニューバー Widget

メニューバーは、ボタンの 1 つにポインターが置かれたときにサブメニューが表示される、ナビゲーションメニューボタンのセットです。メニューバーを使用すると、わずかなスペースに多くのナビゲーション情報を表示できるだけでなく、ユーザーに長い距離をブラウザーさせることなくサイト上の情報の全体像を把握させることができます。

Dreamweaver で挿入できるメニューバー Widget には、垂直と水平の 2 種類があります。。

B-3. 縮小可能パネル Widget

縮小可能パネル Widget は、わずかなスペースにコンテンツを格納できるパネルです。縮小可能パネルに格納されたコンテンツは、ユーザーが Widget のタブをクリックすると表示/ 非表示が切り替わります。

B-4. タブ付きパネル Widget

タブ付きパネル Widget は、わずかなスペースにコンテンツを格納できるパネルのセットです。ユーザーがアクセスしたいパネルのタブをクリックすると、タブ付きパネルに格納されたコンテンツの表示/ 非表示が切り替わります。ユーザーが別のタブをクリックすると、それに従って Widget のパネルが開きます。タブ付きパネル Widget では、一度に 1 つのコンテンツパネルのみが開きます。

B-5. ツールヒント Widget

Spry ツールヒント Widget は、Web ページ上にある特定のエレメントにユーザーがマウスポインターを合わせたときに補足情報を表示するためのものです。この補足情報は、ユーザーがポインターを再び動かすと表示されなくなります。また、表示がより長く持続するようにツールヒントを設定すれば、ツールヒントコンテンツに対するユーザーの操作を可能にすることもできます。

B-6. ラジオグループ検証 Widget

ラジオグループ検証 Widget は、選択項目の検証サポート機能を備えたラジオボタングループです。この Widget では、グループ内のラジオボタンが必ず 1 つ選択されるように検証が行われます。

ラジオグループ検証 Widget には、初期(イニシャル)状態の他に、有効、無効、必須の 3 つの状態があります。これらの状態のプロパティは、対応する CSS ファイル(SpryValidationRadio.css)を編集することにより、目的の検証結果に応じて変更できます。検証が実行されるタイミングとしては、ユーザーが Widget の外側をクリックしたとき、選択操作を実行したとき、またはフォームを送信しようとしたときを指定できます。

B-7. テキストフィールド検証 Widget

Spry テキストフィールド検証 Widget は、ユーザーがテキストを入力したときに有効か無効かを表示するテキストフィールドです。テキストフィールド検証 Widget は、例えばユーザーが電子メールアドレスを入力するフォームに追加します。ユーザーが電子メールアドレスの「@」記号やピリオドを入力し忘れると、入力された情報が無効であることを示すメッセージが返されます。

B-8. テキストエリア検証 Widget

Spry テキストエリア検証 Widget は、ユーザーが文をいくつか入力したときに有効か無効かを表示するテキストエリアです。必須フィールドであるテキストエリアにユーザーが何もテキストを入力していない場合は、値が必須であることを示すメッセージが返されます。

B-9. セレクト検証 Widget

Spry セレクト検証 Widget は、ユーザーが選択すると有効状態または無効状態が表示されるドロップダウンメニューです。例えば、あるセレクト検証 Widget に含まれるリストが、横線で区切ってグループ化されているとします。このときユーザーが誤って区切りの横線を選択すると、その選択が無効であることを示すメッセージが返されます。

B-10. チェックボックス検証 Widget

Spry チェックボックス検証 Widget は、ユーザーが HTML フォーム内のあるチェックボックスを選択したとき、または選択しなかったときに、有効状態または無効状態を表示する(単独またはグループの)チェックボックスです。例えば、ユーザーが 3 つのオプションを選択する必要があるフォームにチェックボックス検証 Widget を追加します。ユーザーが 3 つのオプションを選択していない場合は、最小選択数が満たされていないことを示すメッセージが返されます。

B-11. パスワード認証 Widget

Spry パスワード認証 Widget は、パスワードのルール(文字数や文字種など)を適用する場合に使用できるパスワード用テキストフィールドです。ユーザーの入力に応じて警告またはエラーメッセージが表示されます。

B-12. 再入力検証 Widget

再入力検証 Widget は、ユーザーが入力した値が同じフォーム内の同種フィールドの値と一致するか(有効)しないか(無効)を検証するテキストフィールドまたはパスワードフォームフィールドです。例えば、直前のフィールドに入力したパスワードを再入力するように要求するフォームなどで使用できます。ユーザーが入力したパスワードが前の入力内容と正確に一致していない場合は、値が一致しないことを示すエラーメッセージが表示されます。

C. Spry Widget の追加方法

  1. Dreamweaver を起動し、既存のドキュメントを開くか、新規ドキュメントを作成します。

  2. 挿入パネルが表示されていない場合は、ウィンドウ/挿入 を選択して表示します。

  3. ドキュメント内で、Spry Widget を挿入する箇所をクリックします。

  4. 挿入パネルのカテゴリーで、「Spry」を選択します。

  5. 表示されている Widget から、挿入したいものを選択してクリックします。

  6. 選択した Widget によってはオプションのダイアログボックスが表示されます。設定して「OK」をクリックします。

  7. プロパティパネル(ウィンドウ/プロパティ)で、選択した Widget に応じた設定を行います。

  8. ライブビューに切り替えると、プロパティパネルで設定した内容を動的に確認することもできます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー