• ホーム
• 購読申込
• ヘルプ
• アーカイブ

注目の新機能ベスト10

Adobe Dreamweaver CS3

Kenneth Berger

新しいAdobe Dreamweaver CS3は、経験豊富なコーディング派からHTML初心者までの幅広いユーザを対象にした、オールラウンドのWeb制作環境です。この幅広いユーザ層を網羅する数々の改良点の中から、注目の新機能ベスト10をお伝えしましょう。

1. Ajax フレームワーク「Spry」の統合

今、より多くのユーザから「Ajax に挑戦してみたい」 という意見が寄せられています。しかし、Ajax 開発をマスターするには数多くのハードルがあるのも現実です。Ajax フレームワークに関しては、これまでブラウザの互換性に関する問題が数多く解消されてきた一方で、Ajax の容易な習得を妨げる難点が新たに登場しています。この点は、特に技術的な専門知識の少ないユーザにとって顕著だといえるでしょう。

我々が求める簡潔で使いやすいフレームワークが見あたらなかったため、アドビは自らAjax 用のSpry フレームワークを開発し、これを Adobe Labs より無償で提供してきました。Spry フレームワークは、Web デザイナーと Web デベロッパーの両方を念頭に開発されており、Web デザイナーは HTML や CSS のパ ターン的な作業を踏襲することで、慣れ親しんだ方法で作業を進めることができます。一方の Web デベロッパーに対しては、高度な動的インタラクティビティを実現するためのパワーが提供されます。

Dreamweave CS3 のビジュアルツールを利用すれば、わずか数クリックのマウス操作で次のような Ajax 機能の組み込み作業を簡単に進められます。

2. Spry データによるXML の統合

Spry データを使うことで、ドラッグ＆ドロップ操作で Web ページに対して簡単に XML データを統合できます。XML は現在、RSS フィードやデータベースからアウトプットなど、 多岐にわたる分野で活用されています。こうしたデータを Web ページ内で表示するばかりでなく、ソートしたり、特定の情報だけを抽出するといった処理も容易に行えます。

3. Spry ウィジェットによるインタフェイス設計

Web ページに Ajax ならではのユーザインタフェイスを組み込めるのが、Spry ウィジェットです。ウィジェットには、リスト・テーブル・タブ・フォーム検証・リピート可能領域といったインタフェイス要素があらかじめ用意されており、手軽に Web ページへと追加できます。

4. Spry エフェクトによる視覚的な画面遷移

Web ページにリッチな視覚的な画面遷移を組み込める Spry エフェクト。その種類も発光・縮小・フェード・ハイライトなど多岐に渡ります。Spry ウィジェットと組み合わせることで、Web ページ上で動的なデータ表示が可能になります。

なお、コーディング派のユーザは、Dreamweaver に装備されている Spry 対応のリッチコードヒント機能やハイライト機能を駆使して効率良く作業を進められます。

図1　 Ajax フレームワークの「Spry」

5. Adobe Photoshop・Fireworks との連携

アドビとマクロメディアが合併したことによるユーザにとってのメリット。これを顕著に表すのが Dreamweaver CS3 と Photoshop CS3 の連携です。Web デザイナーや Web デベロッパーは通常、Photoshop や Fireworks で Web ページのデザインを作成し、これらのパーツを Dreamweaver にコピー＆ペーストしています。しかし、これまでの作業では単にコピー ＆ペーストすれば終わりというわけにはいかず、必要なパーツを選択してからコピー、ドキュメントを新規作成してからペースト、ドキュメントを保存してから圧縮設定を調整、そ して場所を選択というように複数の手順が必要とされていました。今回我々は、この重要なワークフローの作業効率アップにも注目しています。

Dreamweaver CS3 と Photoshop CS3 の連携によって、これからは Photoshop と Dreamweaver の間で直接コピー＆ペーストできます。圧縮設定とファイル名を選択しておけば、ドキュメントの挿入ポイントに、ペーストされた画像が表示されます。この際、Dreamweaver はどれが画像の元ファイルであるかを管理しているので、オリジナルファイ ルをすばやく開いて編集可能になります。Photoshop と Dreamweaver の間は、今までになく快適に行き来できるのです。

コピー＆ペースト機能に加えて、Dreamweaver には Photoshop の PSD ファイル全体をダイレクトに読み込む機能も装備されています。なお、これらのワークフローは Adobe Fireworks CS3 との間でも同様に利用できるので、Dreamweaver は２つのプロフェッショナルデジタル画像編集アプリケーションのどちらに対しても、包括的なソリューションを提供することができます。

図2　Adobe Photoshop CS3との連携

6. 高度なブラウザ互換性チェック

ブラウザ間の CSS 表示を統一する。この厄介な問題も Dreamweaver CS3 があれば簡単にクリアできます。ブラウザの互換性に関しては、数多くの Web デザイナーや Web デベロッ パーから、ブラウザ毎の問題点を見つけ出し、その原因を特定して問題箇所を修正する、という決してクリエイティブとは言えない作業に対して、多くの時間を割いているという声が寄せられています。これは非常に無駄な時間といえるでしょう。

Dreamweaver CS3 は、主要ブラウザで表示バグを起こすコードを自動的に検出することができ、その問題の名称をユーザに表示するとともに、問題となるコード箇所を特定・表示します。これによって Dreamweaver CS3 は、実情に則した CSS 問題を自動検出できる初めてのツールとなり、今後クロスブラウザ開発のあり方に変革をもたらすことが予見されます。 これまで悩みの種であったデバッグ作業も、Dreamweaver CS3 があれば簡単にこなせるようになります。

7. 最新のブラウザ互換性情報を把握できるCSS Advisor

従来のコード検証ツールは、通常、XHTML や CSS 規格との互換性を検証しているに過ぎません。しかしこれではブラウザが標準規格に適合していない部分や、規格自体が不明瞭なところには対応しきれず、問題の半分しか解決されていないのと同じことになります。

そこでアドビでは、ブラウザの互換性に関する問題解決策を掲載した、ユーザ参加型コミュニティである CSS Advisor サイトへのアクセスを Dreamweaver CS3 に組み込むことで、常に最新のブラウザ互換性情報を無償提供します。

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

8. すぐに CSS による制作が始められる既製の CSS レイアウト

ユーザの方々からは、従来のテーブルを使ったレイアウトから CSS レイアウトへの移行に手間取っているという声も寄せられていました。CSS を使ったレイアウトのメリットはすでに広く浸透している中、今必要とされているのは、皆が CSS を使ったレイアウトに身近に取り組めるようになることだという結論に至りました。

Web に公開されているページを見渡すと、ページのレイアウトとしては、1列、2列、3列、固定幅、リキッド幅、伸縮自在幅といったいくつかの基本的なパターンに分類することができます。もちろん、サイトにはそれぞれのオリジナリティがあるとはいうものの、大半のサイトはこれらの列構成がベースになっています。つまり、レイアウトをその都度、ゼロ から作らなければならない理由は存在しないのです。

Dreamweaver CS3 には、あらゆる一般的なレイアウトを盛り込んだ、CSS ベースの既製テンプレートが用意されています。これらのレイアウトは、すべての主要ブラウザで正しく表示されるよう、ひとつずつ動作が確認されています。これからは既製のレイアウトを使用して作業を開始し、独自の仕様に作り込んでいくことが可能です。また、各レイアウトには、 カスタマイズの仕方を容易に習得できるよう、詳細な解説が含まれています。場面によっては、CSS を使ったレイアウトが複雑になることもありますが、各ファイルに含まれた詳細な コメントを参照することで、ちょっとした編集（列幅の調整など）が簡単にこなせるようになるとともに、CSS レイアウトをマスターするための基礎を築くことも可能です。

図4　既製のCSS レイアウト

9. 卓越したCSS 管理ツール

より多くのユーザが CSS レイアウトに移行するにつれ、より多くの CSS ルールが作成され、 より多くの時間がこの作業に費やされています。つまり、従来にも増して、CSS を効率良く管理するためのツールが求められているのです。Dreamweaver CS3 では、ルールをドラッグ＆ドロップ操作で移動できるので、CSS ドキュメント内での移動はもちろん、他の CSS ドキュメントへの移動や、HTML ページの最初のスタイルタグから別の場所への移動も、すべて手軽に処理できます。また、インラインで記述されているスタイルを、わずか2ステップで CSS ルールに変換することも可能です。なお、これらと同じ機能には、コードビューのコンテキストメニューやコーディングツールバーからでもアクセスできます。

10. Adobe Device Central CS3 による携帯電話向け開発

今日の Web サイト制作では、ブラウザによる閲覧に加えて携帯電話からのアクセスへの十分な対応が必要になってきています。そうした経緯から Adobe Creative Suite 3 には、 Adobe Device Central という重要なコンポーネントが含まれています。

これによって、携帯電話をはじめとするモバイル機器向けコンテンツのデザイン、各キャリア、各端末で異なる表示能力や回線速度に応じたプレビュー、動作確認といった一連の作業 を、驚くほど効率良く進めていくことが出来ます。また、日々増加し続ける端末のプロファイルは、オンライン上を通して簡単にアップデートすることが可能です。

Dreamweaver C3をさらに詳しく知るには?

Dreamweaver CS3 によって何が可能になるのか。皆さんにもお分かりいただけたでしょうか。今回我々は、かなりの成果をあげられたのではないかと自負しています。

ここで紹介し た10 の新機能に加えて、Word や Excel ファイルの読み込み、「JIS X 8341-3（ウェブコンテ ンツJIS）」アクセシビリティへの配慮、Flash ビデオの組み込みなど、新機能は本当に多岐に渡ります。さらに詳しい情報については、Dreamweaver の製品紹介ページや機能ツアーを参照してください。 また、Dreamweaver 品質管理エンジニアチームのDonald Booth が登場する、こちらのビデオディスカッションも併せてご覧ください。

‹ 戻る

---