Adobe Dreamweaver CS3 がもたらす
エボリューションとレボリューション

Scott Fegette

今月号の記事

Adobe Dreamweaver のような成熟したアプリケーションの新バージョンを開発する際には、バランスの良さが不可欠です。アプリケーションの使い勝手や作業効率を向上させることはもちろん、さまざまなユーザの性格やワークフローにさらにフィットするようにアプリケーションの洗練度を上げるよう努める一方で、最先端を行くために、革新的な新機能を追加していく必要もあります。これは筆者の意見ですが、Dreamweaver CS3 はこの両方のニーズを満たし、進化的な変更点と革新的な機能向上の両方をバランス良く備えたバージョンだといえます。

筆者が Dreamweaver を使い始めたのはバージョン 1.2 のころです。まだ、レイアウトにテーブルを使うのが当たり前で、CSS スタイルシートが存在したか、しなかったかさえ定かではない時代でした。Dreamweaver 8 に至っては、CSS を管理するためのパネルやツールがすべて集約されはしたものの、根本的な事柄でもあるコードの体裁自体にやや難がありました。実践的な方法に基づいて、CSS と HTML/XHTML を完全に分離しようとすると無理が生じたり、CSS プロジェクトを手軽に始められるように用意されたページを使用すると、見栄えこそは良いものの、CSS を利用する上で良質な例とは呼べない場面が見受けられていました。

そこでDreamweaver CS3では、このWeb標準に基づいたデザインのための業界標準ツールセットにさらに磨きをかけ、Webブラウザ上での見栄えが良いだけでなく、機能的にも優れたコードが作成されるよう配慮されています。

エボリューション ─ 進化

CSSレイアウト

図1：CSSレイアウト

Web 標準に基づく開発をすばやく開始

土台がしっかりしていなければ、堅牢なサイトを開発することは困難といえるでしょう。Dreamweaver CS3 には、1列、2列＋ヘッダー、3列＋ヘッダーとフッターなどのあらゆる組み合わせを用いた一般的なレイアウトを含む、最新の既製 CSS レイアウトが装備されています。

これらのレイアウトを土台として利用することで、後々の制作作業にすばやく、しかも効率良く取りかかることができます（図1参照）。Web標準に準拠するこれらの堅牢なレイアウトは、Web Standard Project（WaSP）の Stephanie Sullivan 氏によって Dreamweaver 専用に開発されています。また、これらのレイアウトには詳細なコメントが含まれており、強力な土台の上にページを作成することを支援するだけでなく、ページの仕組みを容易に理解できるよう配慮されています。

これにより、視覚的な操作ですばやく制作作業を進められることはもちろん、コードビューに切り替えることで、即座にコードがどのように記述されたか、そしてどのようにすればプロジェクトの個別要件に見合うようカスタマイズできるかといった事柄が容易に把握できます。これらの新しい開始ページはWeb標準に基づく開発のベストプラクティスの実践例でもあります。

CSS をスタイル良く管理

Web 標準に基づくサイトを制作する場合、すべての CSS スタイルを別途のスタイルシートに分離しておくことが最も効率的であるとされています。しかし現実には、HTML/XHTML のあらゆる場所にスタイル情報が散在しているケースがよくあり、文書の<head>セクションにスタイルが記述されていることや、文書の主なコンテンツ領域のタグ内にインラインでスタイルが定義されていることさえあります。

Dreamweaver 8 には、これらのスタイルをまとめるための支援機能がありませんでしたが、Dreamweaver CS3 では、文書のヘッダーと添付スタイルシート間でスタイルをドラッグ操作で移動したり、インラインスタイルや文書上のスタイルを自動的に既存または新規のスタイルシートに移動することさえ可能です。この際、もちろんすべてのコメントも同時に移動されるので、後々まで改変がとても簡単になります。

また、コード体裁に非常にシビアなユーザは、CSS コードがどのような書式で記述されるかを詳細に指定したり、文書内のどの位置に記述されているかを問わず、スタイルを CSS パネル上でドラッグして並べ替えることもできます（もちろん、コメントも含めてです）。コードビュー、デザインビューのどちらで作業する場合でも、Dreamweaver CS3 は CSS の容易な整理・管理を可能にします。

信頼性高くレンダリング、そしてデバッギング

ブラウザ互換性チェック

図2：ブラウザの互換性をチェック

以前のバージョンの Dreamweaver では、ページが Internet Explorer での表示に近くなるようレンダリングされていましたが（一部では Dreamweaver のレンダリングエンジンに Opera が採用されているという噂がありましたが、これは単なる噂にすぎません）、Dreamweaver CS3 からは、一部のブラウザを特別に意識することがなくなり、その代わりに、より W3C 規格に準じる形でページがレンダリングされるようになっています。この変更が Web デザイナー・Web デベロッパーにどのような影響を与えるかというと、これからは厳密な規格通りにコードを記述しておくことで、ブラウザがどの点で規格から外れているかをより詳細に検証できるようになります。

ブラウザ間の表示の違いをデバッグしなければならない時のために、Dreamweaver CS3 にはいくつかの支援策が用意されています。最新のブラウザ互換性チェック機能（図2参照）を利用すれば、制作中のページにブラウザ間での表示が異なる問題箇所があるかを容易に確認できます。

また、ユーザの参加方式で管理・運営されている Web サイト、CSS Advisor にアクセスすることで、問題点の解決策をすばやく調べることができます。Web が進化の早い媒体であるからこそ、CSS Advisor はこれらの問題点と解決策を提供・更新、そして新しい問題点が見つかり次第に追加する上でもってこいといえるでしょう。もし作業中にブラウザ間の表示に関するバグを見つけた場合には、ぜひ皆さんも CSS Advisor にアクセスし、Web デザインコミュニティが常に最新の情報を得られるよう、他のユーザと知識を共有するようにしてください。

レボリューション ─ 革新

Spryメニュー

図3：Spryメニュー

Ajax フレームワーク「Spry」を使ったリッチ開発

Dreamweaver 1.0 の時代から考えると、Web サイトが提供するユーザ体験は大きな進化を遂げてきたといえるでしょう。今ではクライアントが求めるリッチビジュアル・ユーザインタフェイスを開発する際に、静的な要素だけというわけにはいかず、動的な要素も求められるようになっています。

ページをリフレッシュさせることなく新しいコンテンツを読み込んだり、折りたたみ可能なパネルやアコーディオン要素、ドロップダウンメニュー、リッチな画面効果などの動的ユーザインタフェイス要素を配置するのが当たり前になりつつありますが、これらの機能は、JavaScript に精通していない限り容易にコーディングできるものではありません。

Dreamweaver CS3 には、これらの機能実装を容易にするための Ajax フレームワーク、「Spry」が装備されています。Spry フレームワークは、1年以上も前から Adobe Labs より無償ダウンロードとして提供されており、一般からのご意見・ご要望をもとに4回のフルリリースを経て Dreamweaver CS3 に実装されています（なお、たとえ Dreamweaver を所有していなくても、Spry は今でも無償のフレームワークとして利用可能です）。

Ajax フレームワークである Spry は、次の3つのエリアをカバーしています。サーバから XML データを読み込んだり、ページの一部を動的に更新することを可能にする「Spry データモデル」。ドロップダウンメニューやアコーディオン、折りたたみ可能なパネルといった Web 標準ベースのリッチユーザインタフェイス要素を、手軽にカスタマイズできる形式で提供する「Spry ウィジェット」。そしてページ上の要素にフェード効果や折りたたみ、表示のオン・オフ切り替えといったビヘイビアを追加するための「Spry エフェクト」です。Spry を利用すれば、ページ上にエレガントなユーザインタフェイスを作成して、よりリッチなコンテンツプレゼンテーションを実現することができます。

Dreamweaver でのサーバサイド開発に精通しているユーザは、Spry が提供するドラッグ＆ドロップのデータ操作性にすぐ馴染めるはずです。また、Spry ウィジェットのビジュアルプロパティは Web 標準に基づく単なる CSS で指定されているため、プロパティを手軽にカスタマイズして思い通りのルック＆フィールを実現することができます（図3参照）。そして、堅牢なビヘイビアを提供する Spry エフェクトはすべての要素を集約する役目を担い、一層魅力的なページ制作を可能にします。

コーディング派のユーザに対しては、他にも Spry の魅力があります。Spry は Adobe Labs にそれ単体で掲載されているので、これからも引き続き進化し、より堅牢に、そしてよりパワフルに成長し続けることが期待されます。今後リリースされるものとしては、JavaScript Object Notation（JSON）のサポート、JavaScript 分離化のサポート、HTML データセットなどが予定されています。これからの Spry の発展にも、ぜひご期待ください。

Photoshop: Dreamweaver の新しいベストフレンド

今回の開発サイクルにおいて、Dreamweaver チームはデザイナーの方々の意見をお聞きしたところ、皆さんが Photoshop で作成したカンプやデザインを Dreamweaver ページ上に画像として（または画像の一部として）配置する際に、手順が多すぎると考えていることを把握しました。

このワークフローに関しては、筆者も同じ感想を抱いており、筆書の場合、まず Photoshop 上でレイヤーを統合し、書き出したいエリアをマーキーで選択してコピー、新しい画像ファイルを作成してこのデータをペースト、Photoshop の Web用に保存機能を利用して GIF、JPEG または PNG ファイル向けに画像を最適化、ローカルサイトのディレクトリに最適化したファイルを保存、そして Dreamweaver に切り替えて画像を挿入するという手順を踏んでいました。この手順を読むだけで、皆さんも疲れ果ててしまうことでしょう。

Dreamweaver CS3 を利用すれば、このような作業もより直感的に処理できるようになります。まず、Photoshop で画像の一部を選択してコピーし（または Photoshop CS の「統合部分のコピー」機能を利用して、複数のレイヤーを選択し、自動的に画像を統合することも可能です）、Dreamweaver に切り替えてカーソルを画像を挿入したい部分に移動、そして、ペーストを指示するだけです。この際、配置する画像のファイル書式と設定の詳細を指定するよう、Fireworks の最適化ダイアログボックスが自動的に表示されます。このダイアログボックスで保存をクリックすると、画像が Dreamweaver 上に配置されます。このように、Dreamweaver CS3 では画像を配置する作業が数ステップで済むようになり、Photoshop と Dreamweaver 間のワークフローがより自然に、そして、よりユーザの期待する通りになっています。

将来性豊かな Dreamweaver

変革に結びつくような事柄は、必ずしも事前に明らかな訳ではありません。しかし、肝心なのは、近い将来にもしっかりと対応できるようにしておくことといえるでしょう。Dreamweaver CS3 には、Web 開発を取り巻く環境の進化にも効率良く対応できるよう、いくつかの強化機能が盛り込まれています。Dreamweaver CS3 は Intel ベースの Mac と Windows Vista の両方をサポートするとともに、IPv6 プロトコルもサポートしています。つまり、近い将来にインターネット上で新しい IP アドレス規格が普及しても、Dreamweaver は従来通りに使用することができるのです。

皆さんの中には、Web プロジェクトの一環として携帯デバイス向けの開発を手がける方もおられることでしょう。この場合も、Dreamweaver CS3 なら安心です。Dreamweaver CS3 は、一般的な携帯電話・携帯デバイスの多くをエミュレートできる CS3 最新のモバイルエミュレータ、Adobe Device Central CS3 でのプレビューに対応しています（新機種のプロファイルは定期的に追加されていきます）。これまで、どのブラウザでプレビューするかを選択していた代わりに、Device Central でのプレビューを指定するだけで、作業中のページが Device Central 上で表示され、エンドユーザにどのようなモバイル体験が提供されるかを手軽にプレビューできます。

この記事で紹介したように、Dreamweaver CS3 はさまざまな面で画期的なリリースといえるでしょう。筆者はベータ版の初期から Dreamweaver CS3 を本制作用に使用していますが、今となっては Dreamweaver 8 に戻ることが考えられないほど、Dreamweaver CS3 はより堅牢で、より生産性の高いアプリケーションです。ぜひ皆さんも Dreamweaver CS3 の実力をお確かめください。

‹ 戻る

Scott Fegette: アドビデベロッパーリレーションズ所属プロダクトマネージャー。少なくなる一方の余暇にはプロのミュージシャンおよびフリーの写真家としても活動する、映画っぽいものすべてを愛するガジェットフリーク。