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

Dreamweaver CS4 パブリックベータにみる新たな魅力

第1回 Related Files と多彩なビューの分割

今や Web サイト構築において無くてはならなくなった HTML オーサリングツールである Dreamweaver。2008年で Dreamweaver は10周年を迎え、また、バージョン番号も CS4 でバージョン10となるなど、一つの節目を迎えています。そんな節目を迎えるのに相応しいバージョンアップを果たしたのが Dreamweaver CS4 です。今回より3回にわたって Dreamweaver CS4 の魅力を探っていきたいと思います。

Dreamweaver CS4 パブリックベータ版を入手する

Dreamweaver CS4 パブリックベータ版は、Adobe Labs より入手できます。なお、パブリックベータは英語版のみの提供となっています。また、今回のリリースより Dreamweaver CS4 Mac 版は G5 以上のプロセッサーが必須要件となるなど、動作環境の要件が変更になっていますので、動作環境を満たしているかまずは System Requirements でご確認下さい。

Dreamweaver CS3（GoLive 9、GoLive CS2 を含む）、Creative Suite CS3 シリーズ（Web、Design、Master collection など）のシリアル番号をお持ちの場合は、Dreamweaver CS4 パブリックベータ版用のシリアル番号を取得できます。シリアル番号を入力しない場合、2日間だけ使える体験版となります。CS3 シリーズをお持ちの方は、是非パブリックベータ用のシリアル番号を入手して Dreamweaver CS4 パブリックベータをどんどん使いこなし、一足先に Dreamweaver CS4 マスターを目指しましょう。

一新されたユーザインターフェイス

Dreamweaver CS4 を含む CS4 シリーズでは、ユーザインターフェイスが刷新され、より作業に集中できるようになりました。まず目に付くのは、ユーザインターフェイスやアイコンがグレースケールになったと言うことです。Dreamweaver ではあまり重要ではないかもしれませんが Fireworks などグラフィックを扱うソフトでは、キャンバス上で描いている図形以外の色が目に入らなくなり、より作業に集中しやすくなりました（Adobe Lightroom にはパネルなど写真以外の部分を真っ黒にして写真だけを見る機能があり、その思想を踏襲したと言えるでしょう）。

図1）Dreamweaver CS4の画面。ユーザインターフェイスがグレーに統一され見やすい

また、Dreamweaver CS3 Mac版では、パネル類がバラバラに表示されがちになってしまい、パネル同士が重なって見づらい、使いづらいといったことが起きていたのではないでしょうか。Dreamweaver CS4 では、Windows 版のようにきっちり配置できるようになりました。

図2) Dreamweaver CS3 Mac版の様子。パネルなどが重なって乱雑になりがち

そして、ワークスペースのレイアウトをかなり自由にカスタマイズすることができるようになりました。デフォルトで8種類のワークスペースレイアウトが提供されていますが、これが気に入らなければパネルをつまんで、左に配置したり、右に配置したり、フロートさせたり、アイコンだけにしたりと自由自在にカスタマイズすることができます。ユーザインターフェイスはソフトの使い勝手を決める重要なファクターです。ユーザインターフェイスが従来よりもさらに洗練され、また Adobe 製品同士で統一されたため、作業効率が上がることは間違い無しです。

図3)パネルのレイアウトはアプリケーションバーで切り替え可能

ちなみに、F4キーを押すと、アプリケーションバーとコードビュー・デザインビュー以外のパネルは画面外に消えてくれます（隠したパネルを呼び出したい時には、画面端にマウスカーソルを持っていき、しばらくすると表示されます）。例えば、コーディングだけに全画面を使いたい時など便利です。

Related Files - 関連するファイルにワンクリックでアクセス!

今回搭載された便利機能の一つに Related Files という機能があります。この機能は、現在開いている HTML ファイルから関連して読み込まれている CSS ファイル、JavaScript ファイル、Spryデータセットなどにワンクリックでアクセスできる機能です。現在編集中の HTML から読み込んでいるファイルを編集しようと思った場合、従来はどのファイルを読み込んでいるかをソースコードで確認してファイルパネルから開くと言った手順をとっていましたが、Dreamweaver CS4では自動的に現在編集中の HTML に関連しているファイルをリストアップしてくれ、それをワンクリックで開けるようになりました。

それでは実際に、普段編集しているような HTML ファイルを開いてみましょう。ドキュメントツールバーの下に Related Files を表示するバーが見えるのが分かります。ここに現在編集中の HTML に関連しているファイルが並ぶことになります。

図4)Related Files（赤枠部分）に関連したファイルが並んで表示される

スプリットビューで表示している場合、デザインビューには現在編集中の HTML のレンダリング結果が、コードビューには HTML ソースが表示されます。その状態で Related Files にリストされたファイル名をクリックすると、クリックしたファイルのソースコードがコードビューに表示されます。例えば、現在の HTML で使用している CSS ファイルを Related Files を使って表示・修正し、その編集結果を即座にデザインビューで確認するといったことができます。このような Web 製作で普段よく行うワークフローは、Related Files を使うと従来よりも素早く行うことができるようになりました。

図5)コードビューで外部CSSを編集し、デザインビューでその編集結果を確認

Related Filesとは、言ってしまえば関連しているファイルを開くだけの機能なのですが、これによって短縮できる作業時間は計り知れません。

なお、Related Files に表示されるファイルは、現在の HTML から1ファイル先まで（現在のファイルから直接読み込まれているファイルまで）となります。CSS ファイルのみ例外的に2ファイル先まで Related Files にリストされます。

多彩なビューの配置方法

Labsでも取り上げられていない新機能として、ビューの配置方法が増えたことが挙げられます。これまでは、コードビューとデザインビューを上下に配置することしかできませんでしたが左右にも配置できるようになりました。メニューから [View]-[Split Vertically] と選ぶことで左右に配置されます。

図6)コードビューとデザインビューを左右に配置可能

また、コードビューとデザインビューの上下を入れ替えることもできます。メニューから[View]-[Design View on Top]（左右に配置している場合には [View]-[Design View on Left]）と選ぶと、上下が入れ替わります。

図7) コードビューとデザインビューの左右を入れ替ることもできる

さらに、コードビューを２つ表示することもできるようになりました。メニューから[View]-[Split Code]と選ぶと、コードビューが2つ並んで表示されているのが分かるかと思います。Split Code でコードビューを2つ並べた状態で先ほど述べた Related Files を活用すると、1つのコードビューは現在編集中の HTML ソースコード、もう1つは Related Files で選択した CSS や JavaScript を表示すると言ったことも可能です。

図8)コードビューを2つ並べて、1つは Related Files を使って関連する CSS を編集

このように、普段デザインビューをあまり使わないコーダーの人にとっても便利な機能が追加されています。

まとめ

今回は Related Files と多彩なビューの配置について取り上げました。これらの機能は、Dreamweaver でサイト構築をしていく際に、ジワジワ効いてくる便利機能です。一旦これらの機能を使ってしまったら、もう Dreamweaver CS4 を手放すことができなくなるでしょう。次回は JavaScript の動作を Dreamweaver 上でリアルタイムに確認できる「Live View」をご紹介します。

‹ 戻る

---