右がCreative Suite 3プロダクトマネージャーのケネス・バーガー氏。左はCreative Suiteプロダクトマネージャー,デヴィン・フェルナンデス氏
右がCreative Suite 3プロダクトマネージャーのケネス・バーガー氏。左はCreative Suiteプロダクトマネージャー,デヴィン・フェルナンデス氏
[画像のクリックで拡大表示]

 アドビシステムズの主要製品群を含むスイート製品,「Adobe Creative Suite 3」ファミリーの発売が6月22日に決定した。多数の製品が同時にメジャー・アップグレードされる中,注目は旧マクロメディア製品の機能強化だ。Webオーサリング・ツールとして広いシェアのあるAdobe Dreamweaver CS3の気になる新機能について,アドビシステムズ,Creative Suite 3プロダクトマネージャーのケネス・バーガー氏(写真右)に,Strategic Web Design(SWD)編集部が話を聞いた。

SWD編集部:Adobe Dreamweaver CS3(以下Dreamweaver CS3)が発表されたが,新機能の「Spry」フレームワークとは何か。また,Spryを利用するためには何か事前準備が必要か?

 SpryはJavaScriptのライブラリなどをまとめたAjaxのフレームワークだ。特にこれといった下準備は不要だが,新製品のDreamweaver CS3を使えばSpryをより簡単に利用できる。もちろんSpry自体はDreamweaver CS3なしでも利用できるが,併用することでJavaScriptによるスクリプティングの経験が無くても手軽にAjaxの効果をページ内に盛り込むことができる。

 既存のAjaxフレームワークの多くはデベロッパのみが対象だ。それに対してSpryは,デザイナーとデベロッパの両方のニーズを満たすように工夫されている。つまり実装手順が簡単な点が特徴だ。

SWD編集部:どのような手順でAjaxの実装作業をすれば良いのか?

 Dreamweaver CS3の中でSpryは「Spryデータ(XMLデータセットのこと)」「Spryエフェクト(画面遷移時の効果など)」「Spryウィジェット(コンポーネント化したユーザーインタフェース)」の3要素に分かれて存在する。

 例えば,効果としてアコーディオンを選ぶとしよう(編集部注:挿入パネルのSpryカテゴリから選択。ページに挿入できるSpryウィジェットの一つ)。その場合には,その中のデータのタイトルや各アコーディオン内部に表示するXMLデータを,バインディングパネルからページのレイアウトしたい個所にドラッグ&ドロップして関連付けるだけで実装が完了する。ページのソースは,単純なdiv要素などのタグとコンテンツだけだ。

SWD編集部:以前のバージョンにはJavaScriptによるアクションを「ビヘイビア」の追加という形で実装する機能があった。Spryもビヘイビアから追加できるのか。

 ごく一部のSpryエフェクトがビヘイビアから追加できるが,Spryの場合はビヘイビアを経由しないやり方が中心だ。

SWD編集部:Spryウィジェットのデザインはどうやったら変更できるのか。

 SpryウィジェットはそれぞれデフォルトのスタイルをCSSで格納している。こちらを再編集すればデザインのカスタマイズが可能だ(編集部注:Spryを追加したページを保存すると,自動的にSpryAssetsというフォルダが作業中のサイト内にできる。その中にはSpryウィジェットのCSSやJavaScriptがコピーされるのでそちらを編集する)。
 異なるブラウザ間でレンダリング結果の互換性を保つことを重視した新機能も追加した。どんなブラウザでも全く同じレイアウトを実現するのは,なかなか努力が必要なことだ。この点を解決する機能だ。

 ページ・レンダリングの違いは主にFirefoxとInternet Explorer6(以下IE6)の間で起こりやすい。例えばFirefoxでみると全く問題ないページ,まあ本来はこの状態がベストなのだが,これをいったんIE6で確認するとレイアウトの一部が若干崩れてしまうことがある。ボックス要素が右側にオーバーフローしているだろう。ウェブ・デザイナーにとってIE6がレンダリングに問題があることは,共通の了解事項のようなものだ。ところがいざ問題が起きてみると,コードのどの部分が問題を起こしているのか追跡しにくいし,ましてや解決方法を特定するのは困難だ。

 Dreamweaver CS3の場合,ページのチェック機能の一つとして「ブラウザ互換性チェック」という項目がある。これを実行するだけで問題となっているCSSの個所を特定できる。検出結果をダブルクリックすると,XHTMLソースの中で問題になっているクラス(またはID)の位置がハイライトされるので,クラスやIDを確認したら,CSSを開いて該当のセレクタを検索して修正すればいい。

 具体的な解決方法やベストプラクティスなどは,オンラインのコミュニティ・サイトにアクセスすることで入手できる。アドバイスを表示するウィンドウの「解決方法」をクリックすると,アドビシステムズのサイト経由で様々な解決策を取得できるページにジャンプできるので手順も簡単だ。ブラウザは日々進化を続けている。そのために問題の解決方法も,毎日更新されなければ使えなくなってしまう。だからこそ生きた情報とユーザーをつなげることがベストだと考えたのだ。日本語版では日本語化した状態で各種アドバイスを確認できる。掲載するアドバイスはDreamweaver開発チームによる投稿や,コミュニティ・サイトからの意見などで構成している。

SWD編集部:現時点では英語のリソースを日本語化しているとのことだが,日本独自のコミュニティと連携する予定はあるか。

 近く連携する予定がある。

SWD編集部:CSSの編集に関する目玉を何か紹介してほしい。

 細かい点で様々な機能の向上は成されているが,豊富なテンプレートからページを作る機能には注目してほしい。CSSによるページの標準的なレイアウトパターンがテンプレートから選べるので,2段組,3段組といったレイアウトパターンを一からCSSでコーディングする手間が省ける。模範的なXHTML要素などもページに含めているので,これからXHTMLやCSSを学習するというユーザーにとっては参考になるはずだ。テンプレートからページを生成した場合,各XHTML要素に関する説明などをコメントとしてコード内に記載している。それを読めば勉強にもなる。

 Dreamweaver CS3は単なるページオーサリング・ツールでなく,サイト構築環境ととらえてほしい。CSS,Ajax,ColdFusion,PHPといった技術のベスト・プラクティスがすでにこの中にそろっている。プロフェッショナルに有益なのはもちろんのこと,入門者にとっても学びながら使っていけるという点がメリットだ。

SWD編集部:テンプレートを再利用してページを作っても良いし,既存のコードを参考に一からオリジナルを作っても良いという点はわかりやすそうだ。

 特に,Ajaxに関する利便性は強調したい。マイクロソフトのAjaxに関するソリューションは特別なサーバーが必要だが,Spryの場合それも必要ないのでより手軽だ。