挿入:Spry

Home>Dreamweaver>操作リファレンス>挿入:Spry

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

[挿入]->[Spry]は、JavaScriptなどと連動したスクリプトを挿入します。

Spryとは、Adobe社が開発したAjaxプログラミング用のフレームワークのことです。スプライと読みます。
具体的にはJavaScriptの参照ファイル(ライブラリ)で、JavaScriptを利用した動的なコンテンツを作成することができるようになります。

挿入->Spry

Spry XMLデータセット

Spry XMLデータセットの挿入

データセット名

[データセット名]は、分かりやすい名前を半角英数で入力します。

XMLソース

Spryを生成する元となるXMLファイルを指定します。

スキーマを取得

指定したXMLファイルの内容を解析して、その結果を行エレメントなどに表示します。

デザインタイムフィード

まだ作成途中の場合、テストサーバを指定していれば、サンプルフィールドを使ってページをデザインすることができます。

行エレメント

XMLファイルの構造を解析した結果、XMLタグとその値を表示します。

Xpath

選択したタグが、XMLファイルのどこに存在するかを示すパスが表示されます。

プレビュー

XMLデータの冒頭から20個目までを、プレビューできます。

データセット列

[列]にXMLタグを表示、[データタイプ]に、そのタグにセットできる値の型を表示します。

データタイプ

[データセット列]で選択したタグの型を、変更します。

ソート

XMLファイルからデータを読み込む際に、値を並べ替えて読み込むことができます。
ソートは、[昇順]または[降順]を指定できます。

オプション

ロード時に区別

列が重複しないようにする場合にチェックを入れます。

XMLデータキャッシュ機能をオフに

ユーザのブラウザでは、XMLデータが読み込まれると、通常はそのデータが記憶され、再度必要になった場合に、サーバまで読み込まずに済ませようとします。

しかし、XMLデータが更新されている場合にも、キャッシュを読み込んでしまうと古いデータが使われることになります。
これを避けるために、[XMLデータキャッシュ機能をオフに]すると、常にサーバに読みに行くようになります。

データを自動更新

頻繁に内容が更新されるXMLファイルの場合に、この値を設定しておくと、設定したミリ秒単位で自動的にデータを再読み込みして反映します。

Spry領域

Spry領域の挿入

コンテナ

Spry領域を設定するタグを、div要素にするか、span要素にするかを選びます。

タイプ

Spry領域には「領域」と「詳細領域」の2種類があります。

領域

テーブルやリピートリストなどのデータを含みます。

詳細領域

Dreamweaverページ上のデータの動的更新を可能にする、マスターテーブルオブジェクトと共に使用されます。

Spryデータセット

[挿入]->[Spry]->[Spry XMLデータセット]で設定したデータセットが表示されています。そのうちから使いたいものを1つ選びます。

なお、[Spry XMLデータセット]を予め指定していない場合は、[*** Spry データセットが見つかりません]と表示されます。

Spryリピート

JavaScriptなどで動作するリピート領域を挿入します。
リピート領域は、表示するデータによってフォーマットを設定できます。

Spryリピートの挿入

コンテナ

Spryリピートを設定するタグを、div要素にするか、span要素にするかを選びます。

タイプ

リピート

データ検査を親レベルで行います。たとえば、ul要素によるリストでリピートを行う場合、[リピート]ではul要素単位でチェックを行います。

子のリピート

データ検査を子レベルで行います。たとえば、ul要素によるリストでリピートを行う場合、[子のリピート]ではli要素単位でチェックを行います。

Spryデータセット

[挿入]->[Spry]->[Spry XMLデータセット]で設定したデータセットが表示されています。そのうちから使いたいものを1つ選びます。

なお、[Spry XMLデータセット]を予め指定していない場合は、[*** Spry データセットが見つかりません]と表示されます。

Spryリピートリスト

Spryリピートリストの挿入

コンテナタグ

[UL][OL][DL][SELECT]のいずれかを選択します。
リピートリストを表示する際に、どの要素を使うかを指定します。

Spryデータセット

[挿入]->[Spry]->[Spry XMLデータセット]で設定したデータセットが表示されています。そのうちから使いたいものを1つ選びます。

なお、[Spry XMLデータセット]を予め指定していない場合は、[*** Spry データセットが見つかりません]と表示されます。

表示する列

ブラウザで表示する列を指定します。

Spryテーブル

XMLファイルからデータを取得してテーブル構造を生成します。

Spryテーブルの挿入

Spryデータセット

[挿入]->[Spry]->[Spry XMLデータセット]で設定したデータセットが表示されています。そのうちから使いたいものを1つ選びます。

なお、[Spry XMLデータセット]を予め指定していない場合は、[*** Spry データセットが見つかりません]と表示されます。

XMLデータセットで読み取った内容が表示されます。

奇数行クラス、偶数行クラス、Hoverクラス、クラスの選択

奇数行のときのclass属性、偶数行のときのclass属性、マウスカーソルがのせられたときのclass属性などを指定することができます。

CSSで、行を交互に色を変えることができます。

行がクリックされたときに詳細領域を更新

[行がクリックされたときに詳細領域を更新]にチェックを入れると、動的テーブルの繰り返し行のタグ内に、spry:setrowタグが挿入されます。
テーブルをユーザが操作したときに、データセットの現在の行を再設定できるようになります。

Spryテーブルの設定方法

Spryテーブルを挿入するには、[挿入]->[Spry]->[Spry XMLデータセット]を定義します。

ここでは、以下のXMLファイルを読み込みます。

データセットにするXMLファイル

XMLファイルを指定したら、[スキーマの取得]をクリックして、データを取り込みます。

次に、[挿入]->[Spry]->[Spryテーブル]をクリックします。

「Spry領域を追加しますか?」と尋ねられたら[OK]をクリックします。

Spryテーブルを挿入したところ

これを保存してブラウザで確認すると以下のようになります。

Spryテーブルのブラウザでの表示

Spryテキストフィールド検査

type属性にtextを指定したinput要素を配置します。さらに、そのテキストフィールドに何も入力されていない状態で、送信ボタンをクリックした場合に、値を入力するように促すメッセージを表示します。

Spryテキストフィールドの挿入

Spryテキストフィールドに入力せずに送信ボタンを押すとエラーメッセージを表示

なお、テキストフィールドに入力されているかされていないかを判定したり色分けする際に必要となるファイルを、外部ファイルとして自動的に生成します。以下の2つのファイルは、サーバにアップする際に忘れずにアップしましょう。

  • SpryAssets/SpryValidationTextField.css
  • SpryAssets/SpryValidationTextField.js

Spryテキストフィールドに必要な外部ファイル

Spry選択検査

select要素を配置し、その項目が何も選択されていない状態でデータを送信しようとすると、項目を選択するように促すメッセージを表示します。

Spry選択検査挿入

項目を選択せずに送信ボタンを押すとエラーメッセージを表示

なお、選択項目の選択の有無を判定したり色分けする際に必要となる、以下の2つのファイルを自動的に生成します。サーバにアップする際に忘れずにアップしましょう。

  • SpryAssets/SpryValidationSelect.css
  • SpryAssets/SpryValidationSelect.js

Spry選択検査に必要な外部ファイル

Spryチェックボックス検査

type属性にcheckboxを指定したinput要素を配置し、そのチェックボックスにチェックが入っていない状態で、データを送信しようとすると、チェックをつけるように促すメッセージを表示します。

Spryチェックボックスの挿入

チェックボックスにチェックがないまま送信ボタンを押すとエラーメッセージを表示

なお、チェックボックスのチェックの有無を判定したり色分けする際に必要となる以下の2つのファイルを自動的に生成します。サーバにアップする際に忘れずにアップしましょう。

  • SpryAssets/SpryValidationCheckbox.css
  • SpryAssets/SpryValidationCheckbox.js

Spryチェックボックスに必要な外部ファイル

Spryテキストエリア検査

textarea要素を配置します。さらに、そのテキストアリアに何も入力されていない状態で、送信ボタンをクリックした場合に、値を入力するように促すメッセージを表示します。

Spryテキストエリア検査を挿入

テキストエリアに何も入力しないで送信ボタンを押すとエラーメッセージを表示

なお、テキストエリアへの入力の有無の判定や色分けに必要となる以下の2つの外部ファイルを自動的に生成します。サーバにアップする際には忘れずにアップしましょう。

  • SpryAssets/SpryValidationTextarea.css
  • SpryAssets/SpryValidationTextarea.js

Spryテキストエリア検査挿入時に必要な外部ファイル

Spryのメニューバー

JavaScriptを利用したメニューバーを生成します。
マウスカーソルがメニュー項目に載ったときに、サブメニューが表示されます。

まず、メニューを横に展開するか縦に展開するかを選択します。画面の上下どちらかにメニューを配置する場合は横、画面の左右どちらかにメニューを配置する場合は縦を選びます。

Spryのメニューバーのレイアウト選択

[OK]をクリックすると、「Spryのメニューバー」がセットされます。後は、これをコードビューで編集します。

Spryによるメニューバーがセットされる

基本的にul要素とli要素で成り立っています。
ある項目に関してサブメニューがある場合には、li要素の次にul要素をネストします。そして、サブメニューを表示させたい項目のリンクにMenuBarItemSubmenuというクラス名を設定します。

Spryのメニューバーブラウザ動作時

なお、Spryのメニューバーを挿入すると、以下のファイルが自動的に生成されます。サーバにアップする際には、これらのファイルも忘れずにアップしましょう。

  • SpryAssets/SpryMenuBar.js
  • SpryAssets/SpryMenuBarDown.gif
  • SpryAssets/SpryMenuBarDownHover.gif
  • SpryAssets/SpryMenuBarHorizontal.css
  • SpryAssets/SpryMenuBarRight.gif
  • SpryAssets/SpryMenuBarRightHover.gif

Spryメニューバー生成時に自動的に生成されるファイル

Spryのタブ付きのパネル

JavaScriptを利用したタブによりメニュー項目の表示を入れ替えることができるパネルを生成します。

[挿入]->[レイアウトオブジェクト]->[Spryのタブ付きのパネル]を選択すると、2つのタブの付いたパネルが生成されます。

タブ付きパネルの生成

生成したパネルのソースコードを改変することでタブを増やしたり項目を変えたり、リンクを設定したりします。

タブ付きパネルのソースコード

タブ項目は、TabbedPanelsTabGroupがクラスに設定されたul要素内のli要素に設定します。タブ項目部分はli要素にTabbedPanelsTabクラスを指定します。

各タブのコンテンツは、TabbedPanelsContentGroupクラスを設定したdiv要素内に、TabbedPanelsContentクラスを設定したdiv要素を配置します。タブとコンテンツの連動は上から順番にされています。

ブラウザで表示したタブ付きパネル

なお、Spryのタブ付きパネルを挿入すると自動的に以下のファイルが生成されます。サーバにアップする際には忘れずにアップしましょう。

  • SpryAssets/SpryTabbedPanels.css
  • SpryAssets/SpryTabbedPanels.js

Spryのタブ付きパネルを生成したときに自動生成されるファイル

Spryアコーディオン

JavaScriptを利用したアコーディオン式のパネルを生成します。
アコーディオン式とは、クリックすると下に伸びるような仕組みをいいます。

[挿入]->[レイアウトオブジェクト]->[Spryアコーディオン]を選択すると、デザインビューにアコーディオン式のパネルが生成されます。

アコーディオンが生成された

生成されたアコーディオンのソースコードを改変することで、カスタマイズします。

アコーディオンの挿入に伴い生成されたソース

各項目は、div要素で設定します。
ひとつの項目はAccordionPanelクラスを設定したdiv要素で設定します。このdiv要素の下にラベルとコンテンツを内包します。
ラベルの場合は、div要素にAccordionPanelTabクラスを設定し、コンテンツの場合はdiv要素にAccordionPanelContentクラスを設定します。

アコーディオン式メニューの動作確認

上記はラベル2のコンテンツが表示されている状態。[ラベル1]をクリックすると・・・

アコーディオン式メニューの動作確認2

ラベル2のコンテンツは閉じて、ラベル1のコンテンツが開きます。この動作がアニメーションのように徐々に開くために「アコーディオン」と呼ばれます。

なお、[Spryアコーディオン]を挿入すると、自動的に以下のファイルが生成されます。サーバにアップする際にはこれらのファイルもアップしましょう。

  • SpryAssets/SpryAccordion.css
  • SpryAssets/SpryAccordion.js

アコーディオンを生成したときに自動的に生成されるファイル

Spryの縮小可能なパネル

JavaScriptによって動作する縮小可能なパネルを生成します。
上記の[Spryアコーディオン]では、決められた高さの中でコンテンツの表示/非表示を切り替えていましたが、[Spryの縮小可能なパネル]では、パネルの項目が内包するコンテンツを完全に隠すことができます。

[挿入]->[レイアウトオブジェクト]->[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の縮小可能なパネルの動作1

タブをクリックすると、開いているコンテンツは閉じます。コンテンツが閉じた状態でタブをクリックするとコンテンツが開きます。

ブラウザでのSpryの縮小可能なパネルの動作2

なお、[Spryの縮小可能なパネル]を生成すると、自動的に以下のファイルが生成されます。サーバにアップする際にはこれらのファイルもアップしましょう。

  • SpryAssets/SpryCollapsiblePanel.css
  • SpryAssets/SpryCollapsiblePanel.js

Spryの縮小可能なパネルの生成時に自動的に生成されるファイル

関連リンク

よく読まれている記事

UpDate:2010-10-14