注意:

Spry Widget は、Dreamweaver CC 以降では jQuery Widget に置き換えられています。既存の Spry Widget を変更できますが、新しい Spry Widget を追加することはできません。

Spry Widget について

Spry Widget は、ユーザーインタラクションを可能にすることにより豊かな体験を提供するページエレメントです。Spry Widget は次の部分で構成されます。

Widget 構造

Widget の構成を定義する HTML コードブロック。

Widget ビヘイビアー

ユーザーが開始したイベントに対する Widget の反応をコントロールする JavaScript。

Widget スタイル

Widget の外観を指定する CSS。

Spry フレームワークは、標準 HTML、CSS、および JavaScript で書かれた再利用可能な一連の Widget をサポートします。これらの Widget は、最も単純なものは HTML と CSS のコードであり、容易に挿入し修正して使用できます。フレームワークのビヘイビアーには、ユーザーが様々な操作をできるようにする機能が含まれます。これには例えば、ページコンテンツの表示と非表示を切り替える、ページの色などの外観を変える、メニュー項目をインタラクティブに使用するなどの機能があります。

Spry フレームワークの各 Widget は、それぞれ固有の CSS および JavaScript に関連付けられています。CSS ファイルには、Widget のスタイル設定に必要なすべての設定が含まれています。JavaScript ファイルは、Widget の機能を提供します。Dreamweaver インターフェイスを使用して Widget を挿入すると、Widget が機能とスタイルを持つように、Dreamweaver によってこれらのファイルがページに自動的にリンクされます。

ある Widget に関連付けられた CSS および JavaScript ファイルは、その Widget にちなんだ名前が付けられています。このため、どのファイルがどの Widget に対応するかを容易に見分けられます。例えば、アコーディオン Widget に関連付けられたファイルの名前は SpryAccordion.css および SpryAccordion.js です。保存されているページに Widget を挿入すると、Dreamweaver によってサイトに SpryAssets ディレクトリが作成され、対応する JavaScript および CSS ファイルがその場所に保存されます。

Spry Widget のリソースおよびチュートリアル

次のオンラインリソースでは、Spry Widget のカスタマイズについて詳しく説明しています。

Spry Widget のサンプル

Customizing Spry Menu Bars in Dreamweaver(英語)

Spry 検証 Widget(ビデオチュートリアル)

Spry Widget の挿入

  1. 挿入/Spry を選択し、挿入する Widget を選択します。

Widget を挿入すると、ページを保存したときに、Dreamweaver によって必要な Spry JavaScript および CSS ファイルが自動的にサイトに含められます。

注意:

挿入パネルの「Spry」カテゴリを使用して Spry Widget を挿入することもできます。

Spry Widget の選択

  1. Widget の上にマウスポインターを置きます。タブグループ化された青いアウトラインが表示されます。
  2. Widget の左上隅にある Widget のタブをクリックします。

Spry Widget の編集

  1. 編集する Widget を選択し、プロパティインスペクター(ウィンドウ/プロパティ)で必要な変更を加えます。

特定の Widget に変更を加える方法について詳しくは、各 Widget に関する適切な項を参照してください。

Spry Widget のスタイル設定

  1. Widget に適した CSS ファイルをサイトの SpryAssets フォルダーから見つけ、必要に応じてその CSS ファイルを編集します。

特定の Widget のスタイルを設定する方法について詳しくは、各 Widget に関する適切なカスタマイズの項を参照してください。

注意:

Spry Widget のフォーマットは、他のページエレメントのスタイルと同様に、CSS パネルでスタイルを編集して設定することもできます。

追加の Widget の取得

Dreamweaver では Spry Widget だけでなく他の Web Widget もインストールできます。Adobe Exchange には、他のクリエイティブなプロフェッショナルによって開発された Web Widget があります。

  1. アプリケーションバーの Dreamweaver の拡張メニュー  から「Web Widget の参照」を選択してください。

Web Widget を使用した作業について Dreamweaver エンジニアリングチームが説明する概要ビデオは、www.adobe.com/go/dw10widgets_jp を参照してください。

デフォルトの Spry アセットフォルダーの変更

保存されているページに Spry Widget、データセット、または効果を挿入すると、Dreamweaver によってサイトに SpryAssets ディレクトリが作成され、対応する JavaScript および CSS ファイルがその場所に保存されます。Dreamweaver が Spry アセットを保存する初期設定の場所を変更して、別の場所に保存することもできます。

  1. サイト/サイトの管理を選択します。
  2. サイトの管理ダイアログボックスでサイトを選択して、「編集」をクリックします。
  3. サイト定義ダイアログボックスで、「詳細設定」を展開し、「Spry」カテゴリを選択します。
  4. Spry アセットを使用するフォルダーへのパスを入力して、「OK」をクリックします。フォルダーアイコンをクリックして、場所を参照することもできます。

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

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