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

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

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

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

新規HTMLファイルを開いた状態のソースコード内容

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

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

Default.html （HTMLファイルの初期ソース）
Default.css （CSSファイルの初期ソース）
Default.js （JavaScriptファイルの初期ソース）

新規ファイルのソースコードが格納されているディレクトリ（Windowsの場合）

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

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

新規ページのソースコードを編集した状態。常にその状態で新規ページを開くことができます

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

入力補完をカスタマイズ

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

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

通常は「wi」まで入力すると「widow」が最初の候補として登場します

編集後は「wi」まで入力すると「width」が最初の候補として登場します

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

CodeHints.xmlをDreamweaverで開き「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 #) -->
(省略)
    

「<menuitem label="widows" ...(略)」と「<menuitem label="width" ...(略)」の位置を入れ替えた状態

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

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

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

clear sky source - 「第9回 Sugamo.css」と、Dreamweaver CS3 CodeHints.xml拡張
http://maboroshi.biz/clearskysource/?p=141
Dreamweaver 覚え書き
http://homepage.mac.com/akira_maru/fireworks/indexdw.html

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

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

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

分割ビュー時にコーディングツールバーの一部のボタンが隠れてしまいます

コーディングツールバーをカスタマイズしボタンを最小限にしたり、順序を入れ替えた状態

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

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

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

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/>
(省略)
    

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

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

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

コーディングツールバーと 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のキャプチャ。各ユーザ用のConfigurationフォルダには初期状態であまりファイルが格納されていません。そのため、オリジナルのConfigurationフォルダと同じディレクトリ構造で必要なファイルをコピーし編集します。

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

まとめ

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

なお、少し古いドキュメントではありますが、Configuration以下に格納されているファイルについては下記のドキュメントが参考になります。
https://www.adobe.com/jp/support/dreamweaver/custom/configuration.html

ご購入方法

ダウンロード

会社情報

国・地域および言語の選択

当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー（2011年9月30日更新）にご同意いただいたものとみなされます。

Webページ制作の効率をUPするためのカスタマイズ

著者小山田晃浩氏

Content

作成日

ページツール

Tags

必要条件

ユーザーレベル

必要な製品

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

入力補完をカスタマイズ

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

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

まとめ

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

Webページ制作の効率をUPするためのカスタマイズ

著者 小山田 晃浩氏

Content

作成日

ページ ツール

Tags

必要条件

ユーザーレベル

必要な製品

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

入力補完をカスタマイズ

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

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

まとめ

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

著者小山田晃浩氏

ページツール