挿入:Spry
Home>Dreamweaver>操作リファレンス>挿入:Spry
[挿入]->[Spry]は、JavaScriptなどと連動したスクリプトを挿入します。
Spryとは、Adobe社が開発したAjaxプログラミング用のフレームワークのことです。スプライと読みます。
具体的にはJavaScriptの参照ファイル(ライブラリ)で、JavaScriptを利用した動的なコンテンツを作成することができるようになります。
Spry XMLデータセット
データセット名
[データセット名]は、分かりやすい名前を半角英数で入力します。
XMLソース
Spryを生成する元となるXMLファイルを指定します。
スキーマを取得
指定したXMLファイルの内容を解析して、その結果を行エレメントなどに表示します。
デザインタイムフィード
まだ作成途中の場合、テストサーバを指定していれば、サンプルフィールドを使ってページをデザインすることができます。
行エレメント
XMLファイルの構造を解析した結果、XMLタグとその値を表示します。
Xpath
選択したタグが、XMLファイルのどこに存在するかを示すパスが表示されます。
プレビュー
XMLデータの冒頭から20個目までを、プレビューできます。
データセット列
[列]にXMLタグを表示、[データタイプ]に、そのタグにセットできる値の型を表示します。
データタイプ
[データセット列]で選択したタグの型を、変更します。
ソート
XMLファイルからデータを読み込む際に、値を並べ替えて読み込むことができます。
ソートは、[昇順]または[降順]を指定できます。
オプション
ロード時に区別
列が重複しないようにする場合にチェックを入れます。
XMLデータキャッシュ機能をオフに
ユーザのブラウザでは、XMLデータが読み込まれると、通常はそのデータが記憶され、再度必要になった場合に、サーバまで読み込まずに済ませようとします。
しかし、XMLデータが更新されている場合にも、キャッシュを読み込んでしまうと古いデータが使われることになります。
これを避けるために、[XMLデータキャッシュ機能をオフに]すると、常にサーバに読みに行くようになります。
データを自動更新
頻繁に内容が更新されるXMLファイルの場合に、この値を設定しておくと、設定したミリ秒単位で自動的にデータを再読み込みして反映します。
Spry領域
コンテナ
Spry領域を設定するタグを、div要素にするか、span要素にするかを選びます。
タイプ
Spry領域には「領域」と「詳細領域」の2種類があります。
領域
テーブルやリピートリストなどのデータを含みます。
詳細領域
Dreamweaverページ上のデータの動的更新を可能にする、マスターテーブルオブジェクトと共に使用されます。
Spryデータセット
[挿入]->[Spry]->[Spry XMLデータセット]で設定したデータセットが表示されています。そのうちから使いたいものを1つ選びます。
なお、[Spry XMLデータセット]を予め指定していない場合は、[*** Spry データセットが見つかりません]と表示されます。
Spryリピート
JavaScriptなどで動作するリピート領域を挿入します。
リピート領域は、表示するデータによってフォーマットを設定できます。
コンテナ
Spryリピートを設定するタグを、div要素にするか、span要素にするかを選びます。
タイプ
リピート
データ検査を親レベルで行います。たとえば、ul要素によるリストでリピートを行う場合、[リピート]ではul要素単位でチェックを行います。
子のリピート
データ検査を子レベルで行います。たとえば、ul要素によるリストでリピートを行う場合、[子のリピート]ではli要素単位でチェックを行います。
Spryデータセット
[挿入]->[Spry]->[Spry XMLデータセット]で設定したデータセットが表示されています。そのうちから使いたいものを1つ選びます。
なお、[Spry XMLデータセット]を予め指定していない場合は、[*** Spry データセットが見つかりません]と表示されます。
Spryリピートリスト
コンテナタグ
[UL][OL][DL][SELECT]のいずれかを選択します。
リピートリストを表示する際に、どの要素を使うかを指定します。
Spryデータセット
[挿入]->[Spry]->[Spry XMLデータセット]で設定したデータセットが表示されています。そのうちから使いたいものを1つ選びます。
なお、[Spry XMLデータセット]を予め指定していない場合は、[*** Spry データセットが見つかりません]と表示されます。
表示する列
ブラウザで表示する列を指定します。
Spryテーブル
XMLファイルからデータを取得してテーブル構造を生成します。
Spryデータセット
[挿入]->[Spry]->[Spry XMLデータセット]で設定したデータセットが表示されています。そのうちから使いたいものを1つ選びます。
なお、[Spry XMLデータセット]を予め指定していない場合は、[*** Spry データセットが見つかりません]と表示されます。
列
XMLデータセットで読み取った内容が表示されます。
奇数行クラス、偶数行クラス、Hoverクラス、クラスの選択
奇数行のときのclass属性、偶数行のときのclass属性、マウスカーソルがのせられたときのclass属性などを指定することができます。
CSSで、行を交互に色を変えることができます。
行がクリックされたときに詳細領域を更新
[行がクリックされたときに詳細領域を更新]にチェックを入れると、動的テーブルの繰り返し行のタグ内に、spry:setrowタグが挿入されます。
テーブルをユーザが操作したときに、データセットの現在の行を再設定できるようになります。
Spryテーブルの設定方法
Spryテーブルを挿入するには、[挿入]->[Spry]->[Spry XMLデータセット]を定義します。
ここでは、以下のXMLファイルを読み込みます。
XMLファイルを指定したら、[スキーマの取得]をクリックして、データを取り込みます。
次に、[挿入]->[Spry]->[Spryテーブル]をクリックします。
「Spry領域を追加しますか?」と尋ねられたら[OK]をクリックします。
これを保存してブラウザで確認すると以下のようになります。
Spryテキストフィールド検査
type属性にtextを指定したinput要素を配置します。さらに、そのテキストフィールドに何も入力されていない状態で、送信ボタンをクリックした場合に、値を入力するように促すメッセージを表示します。
なお、テキストフィールドに入力されているかされていないかを判定したり色分けする際に必要となるファイルを、外部ファイルとして自動的に生成します。以下の2つのファイルは、サーバにアップする際に忘れずにアップしましょう。
- SpryAssets/SpryValidationTextField.css
- SpryAssets/SpryValidationTextField.js
Spry選択検査
select要素を配置し、その項目が何も選択されていない状態でデータを送信しようとすると、項目を選択するように促すメッセージを表示します。
なお、選択項目の選択の有無を判定したり色分けする際に必要となる、以下の2つのファイルを自動的に生成します。サーバにアップする際に忘れずにアップしましょう。
- SpryAssets/SpryValidationSelect.css
- SpryAssets/SpryValidationSelect.js
Spryチェックボックス検査
type属性にcheckboxを指定したinput要素を配置し、そのチェックボックスにチェックが入っていない状態で、データを送信しようとすると、チェックをつけるように促すメッセージを表示します。
なお、チェックボックスのチェックの有無を判定したり色分けする際に必要となる以下の2つのファイルを自動的に生成します。サーバにアップする際に忘れずにアップしましょう。
- SpryAssets/SpryValidationCheckbox.css
- SpryAssets/SpryValidationCheckbox.js
Spryテキストエリア検査
textarea要素を配置します。さらに、そのテキストアリアに何も入力されていない状態で、送信ボタンをクリックした場合に、値を入力するように促すメッセージを表示します。
なお、テキストエリアへの入力の有無の判定や色分けに必要となる以下の2つの外部ファイルを自動的に生成します。サーバにアップする際には忘れずにアップしましょう。
- SpryAssets/SpryValidationTextarea.css
- SpryAssets/SpryValidationTextarea.js
Spryのメニューバー
JavaScriptを利用したメニューバーを生成します。
マウスカーソルがメニュー項目に載ったときに、サブメニューが表示されます。
まず、メニューを横に展開するか縦に展開するかを選択します。画面の上下どちらかにメニューを配置する場合は横、画面の左右どちらかにメニューを配置する場合は縦を選びます。
[OK]をクリックすると、「Spryのメニューバー」がセットされます。後は、これをコードビューで編集します。
基本的にul要素とli要素で成り立っています。
ある項目に関してサブメニューがある場合には、li要素の次にul要素をネストします。そして、サブメニューを表示させたい項目のリンクにMenuBarItemSubmenuというクラス名を設定します。
なお、Spryのメニューバーを挿入すると、以下のファイルが自動的に生成されます。サーバにアップする際には、これらのファイルも忘れずにアップしましょう。
- SpryAssets/SpryMenuBar.js
- SpryAssets/SpryMenuBarDown.gif
- SpryAssets/SpryMenuBarDownHover.gif
- SpryAssets/SpryMenuBarHorizontal.css
- SpryAssets/SpryMenuBarRight.gif
- SpryAssets/SpryMenuBarRightHover.gif
Spryのタブ付きのパネル
JavaScriptを利用したタブによりメニュー項目の表示を入れ替えることができるパネルを生成します。
[挿入]->[レイアウトオブジェクト]->[Spryのタブ付きのパネル]を選択すると、2つのタブの付いたパネルが生成されます。
生成したパネルのソースコードを改変することでタブを増やしたり項目を変えたり、リンクを設定したりします。
タブ項目は、TabbedPanelsTabGroupがクラスに設定されたul要素内のli要素に設定します。タブ項目部分はli要素にTabbedPanelsTabクラスを指定します。
各タブのコンテンツは、TabbedPanelsContentGroupクラスを設定したdiv要素内に、TabbedPanelsContentクラスを設定したdiv要素を配置します。タブとコンテンツの連動は上から順番にされています。
なお、Spryのタブ付きパネルを挿入すると自動的に以下のファイルが生成されます。サーバにアップする際には忘れずにアップしましょう。
- SpryAssets/SpryTabbedPanels.css
- SpryAssets/SpryTabbedPanels.js
Spryアコーディオン
JavaScriptを利用したアコーディオン式のパネルを生成します。
アコーディオン式とは、クリックすると下に伸びるような仕組みをいいます。
[挿入]->[レイアウトオブジェクト]->[Spryアコーディオン]を選択すると、デザインビューにアコーディオン式のパネルが生成されます。
生成されたアコーディオンのソースコードを改変することで、カスタマイズします。
各項目は、div要素で設定します。
ひとつの項目はAccordionPanelクラスを設定したdiv要素で設定します。このdiv要素の下にラベルとコンテンツを内包します。
ラベルの場合は、div要素にAccordionPanelTabクラスを設定し、コンテンツの場合はdiv要素にAccordionPanelContentクラスを設定します。
上記はラベル2のコンテンツが表示されている状態。[ラベル1]をクリックすると・・・
ラベル2のコンテンツは閉じて、ラベル1のコンテンツが開きます。この動作がアニメーションのように徐々に開くために「アコーディオン」と呼ばれます。
なお、[Spryアコーディオン]を挿入すると、自動的に以下のファイルが生成されます。サーバにアップする際にはこれらのファイルもアップしましょう。
- SpryAssets/SpryAccordion.css
- SpryAssets/SpryAccordion.js
Spryの縮小可能なパネル
JavaScriptによって動作する縮小可能なパネルを生成します。
上記の[Spryアコーディオン]では、決められた高さの中でコンテンツの表示/非表示を切り替えていましたが、[Spryの縮小可能なパネル]では、パネルの項目が内包するコンテンツを完全に隠すことができます。
[挿入]->[レイアウトオブジェクト]->[Spryの縮小可能なパネル]を選択すると、[Spryの縮小可能なパネル]が生成されます。
パネルのタブ及びコンテンツの追加や変更は、生成されたコードを編集することによって行います。
各項目を追加するには、div要素のid属性にColapsiblePanelの連番を変更して内部に配置されているdiv要素ごと複製します。
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">タブ</div>
<div class="CollapsiblePanelContent">コンテンツ</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">タブ</div>
<div class="CollapsiblePanelContent">コンテンツ</div>
さらに、JavaScriptコードに記述されている文章のうち連番部分を同じ番号にしたソースを追加します。
var CollapsiblePanel1 = new Spry.Widgeet.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel2 = new Spry.Widgeet.CollapsiblePanel("CollapsiblePanel2");
以下はブラウザでの動作です。
タブをクリックすると、開いているコンテンツは閉じます。コンテンツが閉じた状態でタブをクリックするとコンテンツが開きます。
なお、[Spryの縮小可能なパネル]を生成すると、自動的に以下のファイルが生成されます。サーバにアップする際にはこれらのファイルもアップしましょう。
- SpryAssets/SpryCollapsiblePanel.css
- SpryAssets/SpryCollapsiblePanel.js
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-10-14