Dreamweaverをカスタマイズするには、環境設定を変更したり、エクステンション(機能拡張)をインストールするといった方法がよく知られていますが、Dreamweaver自体の構成ファイルを編集することでカスタマイズする方法もあります。Dreamweaver自体を構成するファイルはXML、CSS、JavaScriptが多用されており、これらを編集することで機能の追加やUIの変更といったカスタマイズが可能です。Dreamweaverを利用する人にとってはこれらのコードは読みやすく編集しやすいでしょう。ここでは特にWebページ制作の効率を向上させることができるであろうカスタマイズを3例ご紹介します。

なお、記事内に登場するConfigurationフォルダは記事末尾の「各プラットフォームのConfigurationフォルダの場所について」にてご紹介しています。カスタマイズ前には念のため、"必ず元のファイルをコピーしバックアップを取っておきましょう"。

新規ファイルの初期ソースのカスタマイズ

新規HTMLファイルを作成する際、そのソースコード内容はDOCTYPE宣言や<title>など、最小限の構成となっています。

上記の新規ファイルを作成した際の初期ソースコードは編集することができます。あらかじめ自分がよく使う最小限の雛形を埋め込んでおくことで、常にカスタマイズした自分用雛形をデフォルトで開くことができるようになります。そうすれば、毎回<script>タグや<link>タグ、ブロック用のコメント宣言などをコピーする必要がなく、より効率的なWebページ制作を行えるでしょう。

Configurationフォルダ内の『DocumentTypes/NewDocuments/』には以下のファイルが配置されています。

  • Default.html (HTMLファイルの初期ソース)
  • Default.css (CSSファイルの初期ソース)
  • Default.js (JavaScriptファイルの初期ソース)

これらを編集することで、新規ファイルを作成する際に任意のソースコードが埋め込まれた状態から始めることができるようになります。カスタマイズ前には念のため、"必ず元のファイルをコピーしバックアップを取っておきましょう"。

任意のソースコードに編集後、Dreamweaverを再起動し、新規ファイルを作成すると先程編集したデフォルトのソースコードが反映されます。

HTMLだけではなく、CSSやJavaScriptファイルに関しても冒頭のコメントやライセンス情報などを初期のソースコードとして入れておくといいでしょう。

入力補完をカスタマイズ

CSSの入力補完のカスタマイズについては既に多くのWebサイトでも紹介されていますが、この場でも触れておきましょう。コードビューでCSSの編集中、「wi」と入力するとプロパティの入力候補として「widow」が最初に表示されます。しかし「wi...」と入力する場合は「width」を入力したい場合がほとんどでしょう。この入力の候補順は編集することができ、「wi」と入力した場合の最初の入力候補を「width」にすることがでます。

カスタマイズ前には念のため、"必ず元のファイルをコピーしバックアップを取っておきましょう"。

Configurationフォルダ内の 『CodeHints/CodeHints.xml』 にはCSSのコードヒントに関する情報が記述されています。このファイルを編集することでCSSのコードヒントの設定を行うことができます。CodeHints.xml を開き、編集したいCSSプロパティ名などでソースコード内を検索します。例えば、ここでは「widows」を入力候補から取り除くために CodeHints.xml 内から「widows」を検索します。

すると以下のようなコードが見つかります。menuitemタグの順序を見てみると、widthより上にwidowsが出現していることがわかります。

(省略) <menuitem label="voice-family" value="voice-family:" icon="shared/mm/images/hintMisc.gif" /> <menuitem label="volume" value="volume:" icon="shared/mm/images/hintMisc.gif" /> <menuitem label="white-space" value="white-space:" icon="shared/mm/images/hintMisc.gif" /> <menuitem label="widows" value="widows:" icon="shared/mm/images/hintMisc.gif" /> <menuitem label="width" value="width:" icon="shared/mm/images/hintMisc.gif" /> <menuitem label="word-spacing" value="word-spacing:" icon="shared/mm/images/hintMisc.gif" /> <menuitem label="z-index" value="z-index:" icon="shared/mm/images/hintMisc.gif" /> </menu> <!-- CSS color property inside compound CSS property (note displayrestriction is css and search pattern is #) --> (省略)

そこで、上記の「<menuitem label="widows" ...(略)」と「<menuitem label="width" ...(略)」の位置を入れ替えます。

(省略) <menuitem label="voice-family" value="voice-family:" icon="shared/mm/images/hintMisc.gif" /> <menuitem label="volume" value="volume:" icon="shared/mm/images/hintMisc.gif" /> <menuitem label="white-space" value="white-space:" icon="shared/mm/images/hintMisc.gif" /> <menuitem label="width" value="width:" icon="shared/mm/images/hintMisc.gif" /> <menuitem label="widows" value="widows:" icon="shared/mm/images/hintMisc.gif" /> <menuitem label="word-spacing" value="word-spacing:" icon="shared/mm/images/hintMisc.gif" /> <menuitem label="z-index" value="z-index:" icon="shared/mm/images/hintMisc.gif" /> </menu> <!-- CSS color property inside compound CSS property (note displayrestriction is css and search pattern is #) --> (省略)

CodeHints.xmlを編集後、Dreamweaverを再起動し、CSSの入力を行うと入力候補に反映されます。必要に応じて出現順を入れ替えたり、不要なプロパティをコメントアウトを行うことで、入力候補をより使いやすくすることができるでしょう。

カスタマイズ済みのCodeHints.xmlを配布しているWebサイトもありますので、参考にしたり利用してみるのもいいでしょう。

カスタマイズ済みのコードヒント配布サイト

コーティングツールバーの任意のボタンを非表示にする

コーディングツールバーにはコードビューを便利に使うための機能ボタンが盛り込まれています。しかし、Dreamaeaverのウインドウサイズや分割ビューでの操作時にはコーディングツールバーのボタンの一部が隠れてしまうことがあります。そこで、ショートカットキーから利用するボタンや、不要なボタンを消し、必要なボタンのみを表示しておくというカスタマイズ例をご紹介します。

頻繁に利用する機能はボタンを非表示にしてショートカットキーから利用、利用頻度の少ない機能はボタンを表示しておきコーディングツールバーから利用といったような使い分けをするとよいでしょう。

Configurationフォルダ内の『Toolbars/Toolbars.xml』には各種ツールバーに関する情報が記述されています。このファイルを編集することでコーディングツールバーのボタンの設定を行うことができます。

カスタマイズ前には念のため、"必ず元のファイルをコピーしバックアップを取っておきましょう"。

Toolbars.xml を開くと、ソースコード内に310行目付近には「<!-- Code view toolbar -->」というコメントがあり、以下のようなソースコードを見つけることができます。

Toolbars.xml 310行目付近の抜粋

(省略) <!-- Code view toolbar --> <toolbar id="DW_CodeView_Toolbar" MMString:label="DW_CodeView_Toolbar/toolbar/label" container="Code View" initiallyVisible="true" backgroundStyle="gradient"> <menubutton id="DW_OpenDocuments" image="Toolbars/images/MM/T_OpenDocs_Sm_N.png" MMString:tooltip="DW_OpenDocuments/menubutton/tooltip" enabled="dw.getDocumentDOM() != null" menuID="DWOpenDocumentsPopup" update="onViewChange" /> <button id="DW_CodeNavigator" image="Toolbars/images/MM/P_CodeNavigator_Sm_N.png" MMString:tooltip="CodeNavigator/codeviewToolbar/tooltip" domRequired="false" enabled="dw.canPopupCodeNavigator()" command="dw.popupCodeNavigator()" update="onViewChange,onSelChange" /> <separator/> (省略)

<!-- Code view toolbar --> 以降にある 『<button ... />』 や『<separator/>』などのタグ一つ一つがコーディングツールバー内に現在表示されているボタンです。これらのタグには、

  • <button ... /> : 動作系のボタン
  • <checkbutton ... /> : on/off式のボタン
  • <menubutton ... /> : 展開式のボタン『開かれているドキュメント』ボタンなど
  • <separator/> : 区切り線

の4種類がありますが、Toolbars.xml に登場するタグの上から順番と、コーディングツールバーのボタンの上からの順番は一致するので、順番を照らし合わせながらどのボタンがどのタグに一致するのかを比べることができます。

上記のキャプチャのように、ボタンとタグを照らし合わせながら不必要なボタンをコメントアウトしていくことで、コーディングツールバーから任意のボタンを非表示とすることができます。コメントアウトしたら『Toolbars.xml』を保存し、Dreamweaverを再起動します。するとこの結果が反映されます。

また、もともとコメントアウトされて、非表示にされているボタンもいくつか存在します。例えば、以下のものがあります。

  • 任意の行へ移動
  • 非表示文字(改行コードなど)表示のon/off切り替え
  • 自動インデントのon/off切り替え
  • 選択箇所の大文字/小文字変換など

これらはコメントアウトを外すことでボタンとして表示することができます。

付録:各プラットフォームのconfigurationフォルダの場所について

この記事内でご紹介したconfigurationフォルダは環境によって異なります。
各環境のconfigurationフォルダについては以下をご確認ください。

Windows XPの場合
C:¥Program Files¥Adobe¥Adobe Dreamweaver CS4¥configuration

Windows Vista または Windows 7の場合
C:¥Program Files (x86)¥Adobe¥Adobe Dreamweaver CS4¥configuration

Mac OS Xの場合
Macintosh HD/Applications/Adobe Dreamweaver CS4/configuration

また、お使いのコンピュータがマルチユーザ環境による制限がある場合、上記のconfigurationフォルダから必要なファイルを以下にコピーし、ユーザごとにconfigurationを用意する必要があります。ユーザごとのconfigurationフォルダは以下の場所に存在します。

Windows XPの場合 (初期設定では隠しフォルダ)
C:¥Documents and Settings¥<ユーザ名>¥Application Data¥Adobe¥Dreamweaver CS4¥ja_JP¥Configuration

Windows Vista または Windows 7の場合(初期設定ではAppDataが隠しフォルダ)
C:¥Users¥<ユーザ名>¥AppData¥Roaming¥Adobe¥Dreamweaver CS4¥ja_JP¥Configuration

Mac OS Xの場合
Macintosh HD/ユーザ/<ユーザ名>/ライブラリ/Application Support/Adobe/Dreamweaver CS4/ja_JP/Configuration

カスタマイズをする際、例えば、マルチユーザのWindows7環境で、新規HTMLファイルの初期ソースを変更する場合には、
C:¥Program Files¥Adobe¥Adobe Dreamweaver CS4¥configuration¥DocumentTypes¥NewDocuments¥Default.html
のディレクトリ構造を参考に、
C:¥Users¥<ユーザ名>¥AppData¥Roaming¥Adobe¥Dreamweaver CS4¥ja_JP¥Configuration
内に
DocumentTypes、NewDocuments
を作り、
C:¥Users¥<ユーザ名>¥AppData¥Roaming¥Adobe¥Dreamweaver CS4¥ja_JP¥Configuration¥DocumentTypes¥NewDocuments
となるようにし、そこにDefault.htmlを配置します。

マルチユーザ環境でのConfigurationの扱いについて、さらに詳しい情報は以下がご参考になるでしょう。
http://help.adobe.com/ja_JP/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7f72a.html

まとめ

Dreamweaverには多くのXMLが利用されています。そしてこれらを編集することでカスタマイズを行うこともできます。今回ご紹介した他にも、Configuration以下のフォルダにはDreamweaverをカスタマイズすることができるファイルが数多く格納されています。ボタンを増やしたい、入力フィールドを広げたいなどといった場合には、ご自身でも編集・カスタマイズすることができますのでぜひ試してみてください。