Dreamweaver のココがすごい！ 便利な機能・使い方を紹介

Dreamweaver （ドリームウィーバー）愛用者の私ですが、Adobeのサブクス化となった今でも、Dreamweaver CS5を使用しています。

現在は、最新のDwは使用していませんが、まだ基本的に問題なく、Dreamweaver CS5を使用できています。
Adobe CC を再契約するとすれば、一番はこのツール、「Dreamweaverを使用したいため」となるでしょう。

現在は、他のコードエディター（主に VS Code）と併用して利用します。

今更ですが、Dreamweaverが凄いところを紹介しています。

Dreamweaverのここが凄い！

コードがサクサク入力できる。

HTML、CSS、PHP など、コードアシスト機能（サジェスト機能）により、コードを完全に覚えていなくても、サクサク入力することができます。

デザインビューでの編集

他のコードエディターにもデザインプレビュー機能はありますが、
Dreamweaverは、デザインビューに加えて、デザインビュー上で、編集ができます。
段落、見出し、リスト、テーブル、画像の挿入などが、デザインビュー操作ができます。

完全に、デザインビューだけで完結するのは、難しいですが、
この機能を使えば、今どこを編集しているか、直観的に理解できます。

HTMLを完全に理解しているコーダーや、プログラマーでもこの機能は、便利な機能です。

また、現在はほぼ使わなくなりましたが、 usemap を使用した画像リンク（イメージマッピング）をする際、簡単に範囲の変更ができます。

エクセルやワードからのデータ移行

WEBデザインをしていると、よくクライアントからもらった原稿を扱うと思います。
原稿を流し込む際も、Dreamweaverは便利です。

段落の保持

原稿がWordファイルやテキストファイルで、文章をコピーし、デザインビュー側で、ペーストした時に、段落タグ<p>タグや<br>を反映できます。

リストの保持

Wordで設定しているリストも引き継げます。

セルの保持

エクセルのセルをコピー、ペーストすれば、表の挿入も可能です。

不要なタグが入った場合は、置換機能で削除してしまえば、OKです。

ペーストスペシャル

ペーストするときに、Ctrt　+ Shift + V　でペーストすると、ペーストする際のオプションを設定できます。
逆にプレーンテキストだけ貼り付けたいという時もこの機能が便利です。

優れた検索・置換機能

検索・置換機能は、他のテキストエディタ・コードエディターでも当たり前に入っている機能ですが、Dreamweaverの検索・置換機能は、とかく使いやすく便利な機能となっています。

私が、Dreamweaverを使用するための理由で最も大きい理由になるでしょう。

対象のファイルの範囲の設定

• 選択中のファイルを対象
• Dreamweaverで開いているすべてのファイルを対象
• ファイルウィンドウに表示されている選択中のフォルダ内全てのファイルを対象
• 選択中のテキスト範囲でを検索
• タグを含まないデザインビュー側での検索
• 選択したコード範囲でを対象

ファイル選択部分で、特定のフォルダを選択し、「選択したファイル内を検索」で検索すれば、フォルダ内の全ファイル（Dreamweaverに紐づけのあるファイルのみ）を一括で検索、置換できます。

検索の保存

繰り返し使う検索や置換は、保存しておけば、すぐに呼び出して、実行することができます。

正規表現での検索・置換

正規表現での置換も使えば、とにかく作業がはかどります。
例えば、<td width=”200″> などのようなタグの「 width=”200″」の部分を削除したい、
しかも「 width=”200″」の「200」の部分は、決まっていないという場合は、正規表現を使った置換をすれば便利です。

検索対象：

（\d+）　は半角数字のみの文字列

置換後：

 

多くのエンコーディング形式に対応・変換可能

UTF-8 はもちろんのこと、少し前では定番だった、Shit-JISやEUC-JSの形式のHTMLファイルなども問題なく開き、編集ができます。

スニペット

これも大変便利な機能の一つです。

Dreamweaver を使用していて、スニペット機能を使っていないのであれば、かなり「損」していると言えます。
VS Codeでもスニペット機能がありますが、Dreamweaverの方が簡単で、使いやすいと言えるでしょう。

スニペットに囲みを使用できる

例えば 、下記のような divタグをスニペットに登録します。
スニペットに登録できるのは、「ブロック型」と「選択範囲を囲む」の2種類があります。

下記のように、開始タグと終了タグを「選択範囲を囲む」で登録すれば、
囲みたい範囲を、選択して、スニペットを実行すれば、簡単に選択範囲を囲むことができます。

また、このスニペットにもショートカットキーを設定できますので、
とにかくよく使うタグは、スニペット＆ショートカット登録するのがオススメです。

私が良く使うのタグのスニペット例です。

<div class=”xxx”>～</div>

<span>～</span>

<a href=””>～</a>

また、別記事で、詳しくスニペットについて、紹介したいと思いますが、下記のような使い方も便利です。

よく使う、CSSをまとめて、保存しておく。（例：Flexbox などの初期設定のセット、角丸などのセット）

反復作業をする時の作業をスニペット化する。
例えば複数のサイトに同じ修正を加えたいとき、予め登録したスニペットをクリックしていけば、下手すればクリックだけで、作業が完了します。

デメリットも当然ありますので、紹介します。

サブスクリプションしかない

現行バージョンは、サブスクリプションしかありません。

Dreamweaver単体で使用する場合でも月々1,800円強となっています。

少し重め

これは、バージョンが古いというのが、一番の理由かと思いますが、動作が重めです。
また、要素などを勝手にドラッグした状態になってしまい、要素が別のところに、移動してしまうことがあります。
このドラッグしてしまうという現象は、PCを変更しCPUスコアやメモリが増えてからは起こっていません。

その他、若干のバグがあります。
Adobe特有のバグが多少あります。（一度ユーザーファイルを削除しないといけないなど）