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の存在を意識することなく、高度なエフェクトを簡単に実装することができる。しかも、クロスブラウザなスクリプトであることが保証され、プログラマはコードを自由に編集することができる。

1 2 3 次のページへ ≫

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

メールマガジン購読のお申し込み

ZDNet Japan トップへ

この記事を読んだ方に

関連キーワード: 開発

関連企業： Adobe Systems , アドビシステムズ（disital experience)

「特集：魅力のAjaxライブラリAdobe Spry入門」バックナンバー

連載

CIO: ITアナリストが知る日本企業の「ITの盲点」; シェアリングエコノミーの衝撃; デジタル“失敗学”; コンサルティング現場のカラクリ; Rethink Internet：インターネット再考; インシデントをもたらすヒューマンエラー; トランザクションの今昔物語; エリック松永のデジタルIQ道場; 研究現場から見たAI; Fintechの正体; 米ZDNet編集長Larryの独り言; 大木豊成「仕事で使うアップルのトリセツ」; 山本雅史「ハードから読み解くITトレンド放談」; 田中克己「展望2020年のIT企業」; 松岡功「一言もの申す」; 松岡功「今週の明言」; 内山悟志「IT部門はどこに向かうのか」; 林雅之「デジタル未来からの手紙」; 谷川耕一「エンプラITならこれは知っとけ」; 大河原克行「エンプラ徒然」; 内製化とユーザー体験の関係; 「プロジェクトマネジメント」の解き方; ITは「ひみつ道具」の夢を見る
セキュリティ: エンドポイントセキュリティの4つの「基礎」; 企業セキュリティの歩き方; サイバーセキュリティ未来考; ネットワークセキュリティの要諦; セキュリティの論点
スペシャル: エンタープライズAIの隆盛; インシュアテックで変わる保険業界; 顧客は勝手に育たない--MAツール導入の心得; 「ひとり情シス」の本当のところ; ざっくり解決！SNS担当者お悩み相談室; 生産性向上に効くビジネスITツール最前線; ざっくりわかるSNSマーケティング入門; 課題解決のためのUI/UX; 誰もが開発者になる時代～業務システム開発の現場を行く～; 「Windows 10」法人導入の手引き; ソフトウェア開発パラダイムの進化; エンタープライズトレンド; 10の事情; 座談会＠ZDNet; Dr.津田のクラウドトップガン対談; Gartner Symposium; IBM World of Watson; de:code; Sapphire Now; VMworld; Microsoft WPC; Microsoft Connect(); HPE Discover; Oracle OpenWorld; Dell Technologies World; AWS re:Invent; AWS Summit; PTC LiveWorx; 吉田行男「より賢く活用するためのOSS最新動向」; 古賀政純「Dockerがもたらすビジネス変革」; 中国ビジネス四方山話; ベトナムでビジネス; 日本株展望; 企業決算

CNET Japanトップストーリー

ホワイトペーパーランキング

ホワイトペーパーライブラリー

カテゴリーランキング

ZDNet Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。

ITビジネス全般については、CNET Japanをご覧ください。

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

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

エフェクトをかける

この記事を読んだ方に

「特集：魅力のAjaxライブラリAdobe Spry入門」バックナンバー

SpryとAIRもDreamweaverで楽々