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

WebプログラマにDreamweaverを
薦める10の理由

Dreamweaver デベロッパーセンターおよび WEB+DB PRESS Vol.36(技術評論社）の「Web 開発に役立つデザインツールの使い方 Web プログラマのための Dreamweaver 入門 第一章」に掲載されている合資会社エイチツーオー・スペース代表 たにぐちまこと氏の記事を元に、Web プログラマにとって便利な Dreamweaver の機能を紹介します。第二章から第四章は4月までにデベロッパーセンター定期的に掲載されます。まずは体験版をダウンロードして、Dreamweaver での Web プログラム開発を体験してみてください。手放せないツールになることでしょう。なお、全記事はこちらでご覧いただけます。

Dreamweaverはデザイナだけのものではない

Dreamweaver といえば、「Webデザイナのための、HTML オーサリングソフト」というイメージが強いと思います。Webプログラマの場合は、Eclipse やフリーのエディタソフトなどを使ってプログラムを作ることのほうが多いでしょう。

しかし実は、Dreamweaver はプログラマにとっても大変便利なソフトであることをご存知でしょうか。特に、デザイナと共に作業することが多い PHP や ASP などの、いわゆる“LL”（Light-weight Language）を使うプログラマには最適な開発環境です。

まずは、その特徴を簡単に紹介しましょう

• FTP ソフトの同梱された統合開発環境
• 正規表現に対応した検索・置換機能
• 豊富なリファレンス
• 豊富な拡張性

さらに詳しくはこちら。

Dreamweaverの基本

Dreamweaver を起動し、新規ファイルを1つ作ってみましょう。［ファイル］→［新規］メニューをクリックすると、「新規ドキュメント」ダイアログボックスが表示されます。このダイアログを見るとお分かりのように、HTML の他、ActionScript、CSS、JavaScript や XML、ASP、ASP.NET、ColdFusion、JSP、PHP などが選べるようになっています。

ファイルの作成中に「ビュー」ボタンを切り替えると、HTML のソース、デザインをそれぞれ見ることができ、両方を分割して表示することもできます。コードビューで PHP のプログラムを打ち込むと、主要な関数群の場合はコード補完も表示されます。また、デザインビューを見ると、打ち込んだプログラムはページデザイン上でアイコンとして表示されます。そのため、PHP が含まれたファイルもデザイナが引き続き作業することができます。

さらに詳しくはこちら。

ライブラリとテンプレートで一括管理

プログラマの場合、よく使う関数などを別ファイルにして include( ) 関数（PHP）などを使って参照したりします。Dreamweaver には、これに似た機能として「ライブラリ」と「テンプレート」があります。

登録したい部分を選択して［ライブラリ］→［ライブラリにオブジェクトを追加］メニューをクリックすると、その部分がライブラリに追加されます。登録したライブラリは、「アセット」パネルから利用でき（右図）、挿入したい場所にドラッグ＆ドロップします。こうして、さまざまなファイルに挿入したライブラリは、「アセット」パネル上でダブルクリックして編集すると、自動的に挿入されたすべてのファイルが更新されるという仕組みです。

一方、テンプレートはライブラリとは逆に、共通のページの中で一部だけが違う場合に利用します。たとえば、ニュースページなどのように、ページの体裁は同じで内容だけが違う場合などに使うと便利な機能です。

ライブラリとテンプレートは特殊なコメントタグで実現され、HTML は直接書かれているため、PHP などを必要とせずに Web ブラウザで表示できます。Dreamweaver はその前後に書かれた特殊なコメントを判断して書き替えるので、拡張子が .html などの静的ページでも使えるという利点があります。

さらに詳しくはこちら。

スニペット

ライブラリやテンプレートと似た機能で、プログラマにとっても便利に使えるツールが「スニペット」です。スニペットは、ライブラリなどと違って情報を一元管理することはできませんが、スタンプのように同じ部品を何度も貼り付けることができます。

「スニペット」パネルを開くと、はじめから準備されているいくつかのスニペットが表示されます（右図）。たとえば「フォームエレメント」フォルダの「ウィンドウを閉じるボタン」は、 JavaScript のSelf.close( )メソッドで、ウィンドウを閉じるプログラムがあらかじめ登録されており、貼り付けるだけで閉じるボタンを設置することができます。

メッセージを表示しておき、フォーカスがあたるとメッセージがクリアされるテキストボックスや、ポップアップウィンドウを表示するための JavaScript など、さまざまなものが登録されています。また、いつも使うようなプログラムの部品を登録しておけば、プログラミング作業の効率アップが図れます。

さらに詳しくはこちら。

コードツール

Eclipse などの開発ソフトには、プログラムコードをインデントしたり解除したりするツールが付属しています。これを使ってコードの可読性を高めることができますが、Dreamweaver にも同じ機能が搭載されています。

エディタを「コードビュー」に切り替えると、画面の左端に「コーディング」ツールバーが表示されています。これを使えば、プログラムコードをきれいにまとめることができます。インデント、インデント解除はもちろん、HTML などを含めてインデントをきれいに整えてくれる「コードフォーマット」もあります。コメントの摘要も HTML だけではなく JavaScrip tタイプなどのよくあるコメント記号を選ぶことができます。

さらに便利なのは、HTML の折りたたみ機能です。プログラマにとっては、デザイナーやコーダーの制作した HTML は非常に量が多く、プログラムの可読性を損なわせる要因に成り得ますが、この HTML ソース部分を一行に折り畳むことができます。これは Dreamweaver だけでの機能で、ソースプログラム自体には一切影響を与えることなく、折り畳んだり広げたりすることができます。

さらに詳しくはこちら。

リファレンス

冒頭でも紹介したとおり、Dreamweaver には HTML リファレンスはもちろん、次のような豊富なリファレンスが内蔵されています。

• Macromedia CFMLリファレンス
• O'REILLY ASP.NETリファレンス
• O'REILLY CSSリファレンス
• O'REILLY HTMLリファレンス
• O'REILLY JavaScriptリファレンス
• O'REILLY JSPリファレンス
• O'REILLY PHPポケットリファレンス
• O'REILLY SQL言語リファレンス

HTML や CSS、アクセシビリティ関連のリファレンスから、XML関係、プログラマ向けリファレンスと非常に多彩です。また、プログラマ向けのリファレンスは、前述のように技術書で定評のある O'REILLY のリファレンスがそのまま掲載されているため、内容も本格的であることが窺えます。

また、リファレンスはエディタと連携しています。エディタで HTML タグや JavaScript などを書いている途中で、キーワードを選択して右クリックし、［リファレンス］メニューをクリックすると、該当するリファレンスが自動的に開いて閲覧できます。不意にパラメータを忘れてしまったときや、他人のプログラムコードを見ていて、見知らぬ関数などに出くわしたときには、非常に力になるリファレンスです。

さらに詳しくはこちら。

バリデーション機能

HTML などの有効性を検査する「バリデーション機能」も Dreamweaver の強力な機能の1つです。HTML や XHTML はもちろんですが、ColdFusion や JSP ユーザであれば、プログラムのバリデートも可能になります。

バリデート結果は右図のように表示され、ダブルクリックすると該当箇所にジャンプして修正などを行うことができます。また、バリデートした結果は XML 形式でレポートを保存することもできるため、データベースに格納したり XSLT などを通して、レポートを Web ページとして表示させることなども可能です。

Web ページがサポートする最低バージョンの Web ブラウザを設定すると、それらの Web ブラウザでサポートされていないタグや属性がソース上で確認できます。これを参考にしながら、HTML を組み立てていくことができます。

さらに詳しくはこちら。

チェックイン／チェックアウト機能

Dreamweaver の機能の中でも、大きな魅力があるのがチェックイン／アウト機能です。この機能は、FTP サーバや Windows ネットワークなどでファイルを共有している場合、自分がファイルを編集するときに「チェックアウト」処理を行うことで、他の人が同じファイルを編集できないようにする機能です。これにより、ファイルを互いに上書きしあってしまうことを防げます。

ファイルをリモートサーバから取得するときに「チェックアウト」を行うと、自分が編集権を持つことができます。このとき、もし別の人が同じファイルをチェックアウトしようとすると、警告ダイアログが表示されます。

編集が終わったら「チェックイン」を行います。再度編集する場合にはチェックアウトをしなければ、編集できなくなります。

Dreamweaver は、通常の FTP サーバはもちろん、セキュリティに対応した「SFTP」、Windows ネットワークや Mac のフォルダ共有、WebDAV、ColdFusion のファイル共有である「RDS」に対応しています。

さらに詳しくはこちら。

環境のカスタマイズ,ショートカットワークスペースのレイアウト

Dreamweaver は、環境設定などで自分好みの設定を施すことができます。非常に多くの設定項目がありますが、ここではプログラマに便利な設定をいくつか紹介しましょう。

ファイルタイプ／エディタソフト
拡張子ごとの外部エディタを登録することができます。

ファイルを比較
リモートサーバとのファイルの差異を比較するツール（Diffツール）を指定できます。

キーボードショートカット
ほとんどのキーボードショートカットは変更できます（右図）。設定したショートカットは保存できるため、他のパソコン上でも自分の環境を再現できます。

さらに詳しくはこちら。

正規表現を使った検索と置換機能

プログラマにとっては、エディタの検索機能はもっとも重視する機能の1つです。Dreamweaver のエディタは、この検索機能がとても強力に作られています。

検索ダイアログボックスを見てのとおり、大文字・小文字の区別やホワイトス ペースの無視などの他、正規表現を使うこともできます。さらに正規表現の複雑な検索式を組み立てた場合には、そのクエリを保存しておいて、後から呼び出して再度使うこともできます。

もう1つ、Dreamweaver 特有の検索機能として、HTML タグを意識した検索を行うことができます。「ソースコード」というモードで検索を行うと、一般のエディタソフトと同様にすべてのテキストを対象にすることができます。しかし、Webページの場合はさまざまなタグが入り組んでおり、同じ単語でも次のように HTML タグが含まれている場合があります。

Dreamweaver
Dream<strong>weaver</strong>

このような場合、「Dreamweaver」というキーワードでは、後者の文字列を検索することができません。しかし、Dreamweaver の検索機能では「テキスト」というモードに設定すれば、HTML タグを無視した検索ができます。

さらに詳しくはこちら。

‹ 戻る

---