Adobe SpryとDreamweaver CS3であのエフェクトもサクサク:魅力のAjaxライブラリAdobe Spry入門

たにぐちまこと(H2O Space.)

2007-09-13 17:00

 Spryは、ライブラリ単体でみても非常に優れたライブラリであるし、前回紹介した通り非常に簡単なスクリプトで、さまざまな動きを実現することができる。しかし、Spryの最大の魅力は、やはりAdobe Dreamweaver CS3(以下、DWCS3)との組み合わせで発揮される。

 2007年 6月に発売された DWCS3は、まだ「Labs」での公開段階であるSpryという発展途上の技術を、ソフトウェアに組み込んで販売するという思い切ったことをしている。これ自体は、既にSpryが開発されている段階から噂されていたことではあるが、筆者は実際に触ってみて、組み込みの完成度に驚愕した。ソフトウェアと一体化していて、とてつもなく便利になっていたのだ。

 それでは、実際にDWCS3を使ったSpryの実装を紹介していこう。

エフェクトをかける

 前回、Effecsオブジェクトを使って、エフェクトをかけるというスクリプトを紹介した。これを、DWCS3で実際に実装してみたい。

 まずは、DWCS3を起動して新しいファイルを作成する。そして、[挿入][レイアウトオブジェクト][Divタグ]とメニューをたどって、

要素を挿入しよう。図1-1のように、適当な内容を記述したりスタイルを定義すれば準備完了だ。

図1-1

 次に、「ビヘイビア」パネルを利用するので、もし表示されていない場合は[ウィンドウ][ビヘイビア]メニューをたどって表示させておこう。(図1-2)

図1-2

 

要素にカーソルがあることを確認して、ビヘイビアパネルの[+]ボタンをクリックすると、サブメニューが表示されるので[効果][表示/フェード]メニューをクリックする。すると、ポップアップウィンドウが表示される(図1-3)。

図1-3

 上部の図のように表示して[OK]ボタンをクリックすれば、設定完了だ。このファイルを保存しよう。保存しようとすると、図1-4のような警告が表示されるので、[OK]ボタンをクリックしよう。これで完成だ。ファイルをWebブラウザに表示させ、

要素をクリックするとフェードアウトしながら消えていくアニメーションが表示される。

図1-4

 ここまで、全くコードを記述することなく出来上がってしまった。その上、Spryをダウンロードする必要もなく、コピーしたり組み込む必要もない。DWCS3にあらかじめSpryのファイルが同梱されており、その都度必要なファイルだけをコピーしてくれる仕組みなのだ。

 念のためコードを確認しておこう。次のようなコードが自動生成される。



 MM_から始まる独特なファンクション名がつけられているが、実際の動作は前回のスクリプトの通り、Spryの標準メソッドである「DoFade」が使われていることがわかる。ちなみに「MM_」はDreamweaverの元々の開発元である「Macromedia」の頭文字をとった名前で、 Dreamweaverではよく使われるキーワードだ。

 このように、Webデザイナであれば、全くSpryの存在を意識することなく、高度なエフェクトを簡単に実装することができる。しかも、クロスブラウザなスクリプトであることが保証され、プログラマはコードを自由に編集することができる。

ZDNET Japan 記事を毎朝メールでまとめ読み(登録無料)

ZDNET Japan クイックポール

所属する組織のデータ活用状況はどの段階にありますか?

NEWSLETTERS

エンタープライズコンピューティングの最前線を配信

ZDNET Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]