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

第五回:Dreamweaver CS3 + Spry Widgetでインタフェイスに知性を

前号ではDreamweaver CS3に組み込まれているSpry Widgetを使い、Web制作にいつも用いる各種入力フォームに「知性」を与えてみました。今回は、Webページに動的なインタフェイスを付加することで、よりリッチなユーザー体験を提供する土台を作っていきましょう。これまで解説してきたXMLデータセットのハンドリングと組み合わせて使うと、完全にデータドリブン型の動的なWebページを構築できます。ぜひ、そのための手法をあなたのノウハウに加えてください。

インターフェイス作成用 Widget

Dreamweaverにはインターフェース作成用に「メニューバー」、「タブ付きパネル」、「アコーディオン」、「縮小可能なパネル(折りたたみパネル)」の4種類のSpry Widgetが搭載されています。これらも「挿入」メニュー等から簡単に作成することができます。


 

まずメニューバー Widget です。HTML のリスト ul タグに対して ID 属性が指定され、これを基準に Spry がメニューバーの動作を行います。プロパティウィンドウ上でメニュー項目の編集を行うことが可能です。この中の、「タイトル」という項目が分かりにくいかと思うのですが、これはマウスカーソルが重なったときのヒント、ツールチップの表示内容を記入します。ここでこのメニューバーを挿入した際に Dreamweaver が記述する Script タグ内のコードを紹介します。

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

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"})
//-->
</script>

ハイライトされた部分、メニュー用の矢印に使用されている画像ファイルの保存場所がファイルパスで記述されていることにお気づきかと思います。Dreamweaver は、ページ内で使用されている画像ファイル等を移動した場合、その移動先に合わせて HTML コード内にあるファイルパスの情報をを書き換えてくれますが、残念ながら Script タグ内をチェックしてその中のコードを書き換えることはしません。もし SpryAssets/ の場所を移動させたような場合は、このファイルパスの記述を手作業で書き換える必要がありますので忘れないようにして下さい。

次に紹介するのがタブ付きパネルとアコーディオンパネルです。それぞれ、Dreamweaver での編集作業は、プロパティウィンドウの「パネル」内の項目をクリックすることでドキュメントウィンドウの表示がそれぞれのパネルの表示内容に切り替えて各項目の編集を行います。

  • タブ 1
  • タブ 2
コンテンツ 1
コンテンツ 2


以下が、アコーディオンパネルです。「ラベル」部分をクリックして、「コンテンツ」内容の表示を折りたたんで表示させます。

ラベル 1
コンテンツ 1
ラベル 2
コンテンツ 2

 

最後に「縮小可能なパネル」です。ヘルプ等では名前が「折りたたみパネル」となっている箇所もありますので混乱しないようにご注意下さい。

タブ
コンテンツ

「アコーディオン」と「縮小可能なパネル(折りたたみパネル)」についてはアニメーション動作するということもありそのアニメーションの速さを変更したいと思うこともあるかと思います。このような場合、ソースコードのScriptタグに以下のようにコードを追加することで可能になります。

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

var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1" { duration: 100 });
//-->
</script>

Spryの内部では初期値がduration: 500(500ミリ秒)に設定されています。アニメーションが遅いと感じる場合は、この値を変更してみてください。

このようなインターフェイスをカスタマイズする手法については、各プロパティウィンドウにある「この Widgetをカスタマイズ」をクリックすると、「ヘルプ」が起動して具体的なカスタマイズ方法が表示されます。まずはそれを参考に変更を行ってみて下さい。「ヘルプ」に記載されいる内容よりもより詳しいカスタマイズ方法が必要な場合は、「ヘルプ」内に記載されている Adobe サイトの livedocs に詳しい解説があります。例えば、アコーディオンパネルについては以下のサイトに詳細な記載があります。そちらも併せてご参照いただければと思います。

www.adobe.com/go/learn_dw_spryaccordion_custom_jp

Spry 効果

「Spry 効果」は HTML のページエレメントに対してアニメーション効果を付加する機能です。Dreamweaver では ビヘイビアと同様の手順で設定を行うことが可能です。用意されている効果は以下のものです。青地のリンク部分をクリックしてみて動作をご確認下さい。

adobe

Dreamweaver における具体的な設定手順は以下のようになります。

Spry 効果はページエレメントに付与されたID属性を基準にアニメーション効果が付けられます。まずは、コードビューから直接アニメーション効果をつけたいHTMLタグの中にID属性を付加したり、「タグインスペクタ」の「CSS/アクセシビリティ」カテゴリにある「id」の項に値を入力するなどしてID属性を設定します。


Pタグに対して「タグインスペクタ」にて
任意のID属性「effectApply」を設定している様子

次に、アニメーションの効果を起動させるビヘイビアを設定します。例えば、リンク文字をクリックしてアニメーションを開始させる場合は、Dreamweaver のドキュメントウィンドウ上でそのリンク文字を選択した状態で、「タグインスペクタ」にある「ビヘイビア」パネルをクリックして設定を行います。

ここで「拡大/縮小」をクリックすると以下のようなダイアログが表示されます。「OK」で設定を確定すると「ビヘイビア」パネルに登録されますので、再度「ビヘイビア」パネルから登録された項目をダブルクリックするとこのダイアログが再度開き、設定を変更することが可能です。

これによってリンク文字に対して以下のようなコードが記述されます。

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectGrowShrink(targetElement, duration, from, to, toggle, referHeight, growFromCenter)
{
Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, to: to, toggle: toggle, referHeight: referHeight, growCenter: growFromCenter});
}
//-->
</script>
</head>

<a href="#" onclick="MM_effectGrowShrink('effectApply', 1000, '100%', '0%', true, false, true)">拡張/縮小</a>

Spry Framework 1.5 との互換性

Dreamweaver で使用されれている Spry Framework は バージョンが 1.4 のものとなっています。現在の最新バージョンは 1.5(プレリリース版) となっており、Spry 効果はより動作が改善されていたり、既存のツールキットとの共存を図るために仕様が変更されているのですが、そのためにコードの記述方法や使用する関数の名称が変更されています。そのため、Spry 効果で使用するライブラリファイル SpryEffects.js を 1.5 のもので上書きしてしまうと動作しなくなってしまいます。ファイル名が同じものですので、1.5 での開発も試されている場合はフォルダを分けるなどしてご注意下さい。

Spry Framework の最新情報につきましては以下の Adobe Labs のサイトをご参照下さい。

Spry framework for Ajax

五回に渡ってお送りしてきた Spry 集中講座ですが、いかがでしたでしょうか。Dreamweaver CS3 のリリースを挟んだ前後で、Spry Framework の利用もだいぶ敷居が下がったことがお分かりになったと思います。上でも触れましたが、Spry Framework 自体は世の Ajax の潮流に合わせるように成長を続けており、今後ともよりさまざまな場面で Spry Framework による Ajax インタフェイスが活用されていくことになるでしょう。そしてそれを実践するアーリーアダプタが、この集中講座をご覧になっている皆さんであるとしたら、こんなに嬉しいことはありません。