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

Dreamweaver CS4 ベータ版　新機能プレビュー

Adobe Labs に、Dreamweaver CS4 ベータ（英語版）が登場しました。Dreamweaver CS3、GoLive 9、GoLive CS2 のシリアルNo. をお持ちの方は、ダウンロードの際にパブリックベータ版のシリアルを入手することで、正式版が登場するまで試用できます（シリアルNo. がない場合は2日間のみ試用可能）。

今回ベータ版が登場した Dreamweaver CS4 は、マークアップ・エンジニアの皆様だけでなく、ハンド・コーダー、JavaScript のデベロッパーの方々、そして、これから CSS や Spry を勉強しようと考えている初心者の方にも使い易くパワフルな、「Easy of Use」（使い勝手の良さ）と「State of the Art」（最新鋭の技術）を兼ねそろえた究極＆至高のツールです。Dreamweaver 10周年記念イベントで、世界に先駆けて日本で初お披露目した Dreamweaver CS4 のパブリック・ベータ版をぜひいち早く体験してみてください。

チームワークで、個人作業で、飛躍的生産性向上が可能に

多くの Web デザイン会社では、ひとつのプロジェクトに複数のマークアップ・エンジニアの方々がチームを形成し、プロジェクトを遂行しています。時には、複数のプロジェクトが同時進行することも多々あるのではないでしょうか。そうした中、チーム内の誰かが作りかけのサイトを引き継いで完成させなければならないこともあるでしょう。または、昔作ったクライアントの Web サイトをメンテナンス／アップデートする仕事もあるかもしれません。

そのような場合、Web ページがどのような HTML、CSS、JavaScript で構成されているかなど、他人が書いたコードを理解するのには時間がかかりますし、関連している CSS ファイルや JavaScript ファイルを見つけ出すのは面倒な作業です。

Dreamweaver CS4 では、新機能の1つ目として「Related Files」という機能が付きました。これは、HTML ファイルを開くと、それに関連している CSS、JavaScript、Server Side Include のファイルを上下2階層まですべて見つけ出し、表示したり編集したりすることが可能なのです。

HTMLに関連するファイルを表示・編集できるRelated Files

2つ目の新機能として、デザイン・ビューから CSS がどのように使われているかを迅速に見つけ出す「Code Navigator」という機能を搭載しました。デザイン・ビューで調べたい部分にマウスを乗せて、コンテキスト・メニューから「Code Navigator」を選びます。すると、そこで使われている CSS がすべて別のポップアップ・ウインドウに表示され、そのウインドウ内の CSS のエレメントをクリックすると、直接その CSS ファイルが表示・編集が可能になります。

直感的にCSSを調整できる Code Navigator

3つ目の新機能に「Live View」があります。これは、デザイン・ビューで JavaScript、Flash などを正確にプレビューできる夢のような新機能です。今までは、コードに変更を加えるたびに一旦保存して、ブラウザでプレビュー確認し、コードの修正しては保存、またブラウザでプレビュー…という繰り返し作業だったのが、「Live View」ボタンを押すだけで、コードを保存しなくてもデザイン・ビューで確認できるようになりました。

W3C標準に則ったプレビューが可能なLive View

「Live View」は、「WebKit」レンダリングエンジンを使用しています。このWebKitは、W3C標準に非常に近いレンダリングをするエンジンです。今後新しいバージョンのブラウザーが出てきても、目指すところはW3C標準だと思われますので、今からW3C標準に沿ってサイトを構築すれば、後々のメンテナンス作業の負担も軽減できるでしょう。

「Live View」を使った作業の流れとして、CSS の構成は「Live View」で確認しながら8割方作り込み、その後、Internet Explorer や Firefox などブラウザ固有の部分を、それぞれのブラウザで確認しながら構成していきます。こうすることで、生産性がより向上するわけです。なお、WebKit レンダリングエンジンは Adobe AIR でも使われているので、Dreamweaver CS4 で Adobe AIR のアプリケーションを制作する場合、正確なプレビューを表示できます。

これらの「Related Files」「Code Navigator」「Live View」を併用することにより、皆様の作業効率向上に貢献できれば幸いです。

初心者にも分かり易く

「Web ページを作りたい」「Web デザイナーになりたい」という方の多くは、まず CSS と HTML を習得するところからスタートだと思われているでしょう。でも「Dreamweaver は難しそうだから取っ付きにくい」と頭を抱えている方はいませんか？

そんなに構えないで、肩の力を抜いて、Dreamweaver でページデザインを始めてみましょう。高い山を登るにも、まずは最初の一歩を踏み出さないと先には進めません。習字でも陶器でもそうですが、まず初心者の方は、プロの作品の模倣から始めるのが近道です。デザインの感性の部分は、ここでは割愛させていただきますが、コードは模倣が可能です。デザイン事務所の先輩やプロの方が、どのような構成をしているのか見習って、少しずつ数値を変更していきながら、自分のサイトをまずひとつ完成させてみませんか？

Dreamweaver CS4 では、「Related Files」「Code Navigator」「Live View」などの新機能を併用することによって、デザイン事務所の先輩のコードがどのように構成しているか、プロが作ったサイトのCSSの構成がどうなっているか、分かり易く理解できるでしょう。

そしてもうひとつ、Dreamweaver CS4 には「Spry Data Set Wizard」という機能があります。

HTMLのテーブルなどをSpryのデータにできる Spry Data Set Wizard

この機能によって、Ajax フレームワークのひとつである Spry framework をより容易に扱うことができるのです。XML を作らなくても、HTML のテーブルなどをデータとして扱い、ダイナミックなサイトを作ることができます。「Spry Data Set Wizard」があれば、php や asp を使わなくても、小さなデータのサイトなら HTML 内のテーブルを編集するだけで、本格的な Web サイトの基本部分が5分で作れてしまいます。

もうテキストエディタに戻れない、その理由

Dreamweaver CS4 には、JavaScript デベロッパーに嬉しい機能も充実しております。まず、JavaScript のコードヒントがあります。ウインドウで「Live View」「Live Code」などの機能を併用して使うことにより、皆様が作った JavaScript のイベントが生成する HTML コードがどうなっているか、そのままライブでコード表示できるのです。このようにライブでコードを生成できるのは、現在のところ Dreamweaver CS4 だけでしょう。これも今回、Dreamweaver CS4 に WebKit レンダリングエンジンを精密に搭載したからこそ可能になりました。これにより、デバッグ作業の時間も短縮できます。

もうひとつが「Split Code」です。今までの Dreamweaver では、コード・ビューとデザイン・ビューの2つにしかウインドウ内を分割できなかったのですが、今回の Dreamweaver CS4 では、コード・ビューを2分割表示できます。ですので、ひとつのビューでコードの上の部分を見ながら、もうひとつのビューで他の部分を編集することもできますし、2つのビューに別々のファイルのコードを表示・編集できます。例えば、HTML を参照しながら JavaScript のコードを修正するということが可能なのです。しかも最近の流行りの横長のワイドディスプレイにも対応しており、上下分割だけでなく、左右にも分割してコーディング作業が可能になりました。

最後にもうひとつ、Dreamweaver CS4 から直接「Subversion」サーバにチェックイン、チェックアウトできるようになりました。今まで、ソースコードのバージョン管理で悩んでいた皆様の問題を解決する機能です。

Subversion」サーバにチェックイン、チェックアウトが可能

コードヒント、デザイン・ビューでの「Live View」「Live Code」そして、「Split Code」の機能を併用して Subversion にも対応した Dreamweaver CS4 をぜひお試しください。なお、現在はベータ版ですので、機能の中には正確に作動しない個所もあります。また、最終的な製品版では機能の仕様変更などがあるかも知れませんので、ご了承ください。

‹ 戻る