アクセシビリティ
デベロッパーリソース
森房　卓史（もりふさたかし）

森房　卓史（もりふさたかし）

アドビ　システムズ社
Dreamweaver & Fireworks
プロダクトマネージャー

作成日:
2008年５月27日
ユーザレベル:
すべて
製品:
Dreamweaver

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

お待たせしました

Dreamweaver CS4は、マークアップ・エンジニアの皆様だけでなく、ハンド・コーダー、JavaScriptのデベロッパーの方々、そして、これからCSSやSpryを勉強しようと考えている初心者の方にも使い易くパワフルな、「Easy of Use」と「State of the Art」を兼ねそろえた究極＆至高のツールです。Dreamweaver十周年記念イベントで世界に先駆けて日本で初めてお見せしたDreamweaver CS4 のパブリック・ベータ版を体験してみてください。

Dreamweaver CS4 パブリック・ベータ版

現在ベータ版ですので、機能の中には正確に作動しない個所もございます。また、最終的な製品版では機能の仕様変更などがあるかも知れませんので、ご了承ください。

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

多くのWebサイトのデザイン会社では、一つのプロジェクトに複数のマークアップ・エンジニアの方々がチームを形成してプロジェクトを遂行しております。時には、複数のプロジェクトが同時進行していることも、多々あるのではないでしょうか？
チーム内の誰かが作りかけのサイトを引き継いで完成させなければならないこともあるでしょう。または、昔作ったクライアントのwebサイトをメンテナンス、アップデートする仕事もあるかもしれません。
そんな場合、HTML ファイルがどのようなCSS、JavaScriptで構成されているか、他人が書いたコードを理解するのには、時間がかかったり、関連しているCSSファイルや、JavaScriptファイルを見つけ出すのは面倒な作業です。

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

Related Files
Related Files


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

Code Navigator
Code Navigator


Code Navigator
Code Navigator

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

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

Live View
Live View


作業の流れとしては、CSSの構成は、「Live View」をつかって８割方作りこみ、その後、Internet Explorerや、Firefoxでブラウザー固有の部分をブラウザーのプレビューで確認しながら構成していくことにより生産性がより向上するでしょう。
これらの「Related Files」「Code Navigator」「Live View」を併用していただくことにより皆様の作業効率向上に貢献できれば幸いです。

初心者にも分かり易く

「ホームページ」を作りたい「Web Designerになりたい」と思われている方は、まず、CSSとHTMLを習得したいと思われている方が多いでしょう。でも、「Dreamweaverは難しいから取っ付きにくい」と頭を抱えている方はいませんか？
そんなに構えないで肩の力を抜いて、Dreamweaverで始めてみませんか？高い山を登るにも、最初の一歩を踏み出さないと先には進めません。習字でも陶器でもそうですが、まず初心者の方は、プロの作品の模倣から始めるのが近道だと思います。デザインの感性の部分は、ここでは割愛させていただきますが、コードの部分は模倣が可能です。デザイン事務所の先輩や、プロの方がどのような構成をなさっているかを見習って、少しずつ数値を変更していき、自分のサイトをまず一つ完成してみませんか？
Dreamweaver CS4では、「Related Files」「Code Navigator」「Live View」などの新機能を搭載しております。これらの機能を併用することによって、デザイン事務所の先輩のコードがどのように構成しているか、プロが作ったサイトのCSSの構成がどうなっているか、分かり易く理解できるでしょう。

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

Ajaxのフレームワークの一つのSpryのフレームワークをより容易に扱うことができるのです。XMLを作らなくても、HTMLでのTableなどをデータとして扱い、ダイナミックなサイトを作る新機能がこの「Spry Data Set Wizard」です。この機能を使うことにより、phpやaspを使わなくても、小さなデータのサイトなら、html内のテーブルを編集するだけで、プロ並みサイトの基本が５分でつくれてしまうのです。

Spry Data Set Wizard
Spry Data Set Wizard


この機会に、DreamweaverでWebサイト構築を始めてみませんか？

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

Dreamweaver CS4には、JavaScriptデベロッパーに嬉しい機能が充実しております。まず、JavaScriptのコードヒントがあります。そして、ウインドウで「Live View」「Live Code」などの機能を併用して使うことにより、皆様がお書きになったJavaScriptのイベントが生成するhtml のcodeがどうなっているか、そのままライブでコードを表示することができるのです。ライブでコードを生成できるのは、Dreamweaver CS4だけだと思います。これも、今回Dreamweaver CS4のWebkitのレンダリングエンジンを精密に搭載したから可能になりました。これにより、デバグ作業も時間が短縮できるのではないでしょうか？
Webkitのレンダリングエンジンは、Adobe AIRでも使われているので、Dreamweaver CS4でAdobe AIRのアプリケーションを制作する場合、正確なプレビューを表示することが可能です。

もう一つの目玉は、「Split Code」です。今までのDreamweaverでは、コード・ビューとデザイン・ビューにしか、ウインドウを分けられなかったのですが、今回のDreamweaver CS4では、コード・ビューを二つに分けて表示できます。ですので、一つのビューでコードの上の部分を見ながら、もう一つのビューで他の部分を編集することもできますし、二つのビューに別々のファイルのコードを見ることも可能です。例えば、CSSのファイルを見ながら、htmlを編集することが可能です。しかも最近の流行りの横長のディスプレー・モニターに対応するため、上下分割だけでなく、左右にも分割してコーディング作業が可能になりました。

Split View
Split View

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

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

コードヒント、デザイン・ビューでの「Live View」「Live Code」そして、「Split Code」の機能を併用してSubversionにも対応したDreamweaver CS4を是非お試しください。

現在ベータ版ですので、機能の中には正確に作動しない個所もございます。また、最終的な製品版では機能の仕様変更などがあるかも知れませんので、ご了承ください。

著者について

森房　卓史（もりふさたかし）

アメリカ本社にてAdobe Illustratorの品質管理部から製品開発に携わり、Adobe InDesign, Illustratorのプロダクトマネージャーを経て、Illustrator CS3出荷後、Dreamweaver兼Fireworksのプロダクトマネージャーに就任。常に「お客様第一」を唱えつつ、品質改善、パフォーマンス向上、使い易さを最重視した製品作りを心がけています。