Dreamweaver CS4で「Emmet」を使う方法

Article

schedule2013.07.07

visibility9092

Zen-Codingの次世代バージョン「Emmet」Dreamweaver用のプラグインがリリースされていたので導入してみました。

その際、Dreamweaver CS4の場合なぜかエラーが起きたので、その解決方法です。
実行環境はWindows 7 Dreamweaver CS4です。

Dreamweaver CCの場合は簡単

ちなみに、Dreamweaver CCではzxpパッケージをダウンロードして、Extension Managerからインストールすれば完了しました。

完了画面

dreamweaver_emmet01

とりあえず正常にインストールされた場合、メニューのコマンド欄の二箇所にEmmetのメニューが表示されます。

導入方法

プラグインをダウンロード

Package Control02

https://github.com/emmetio/dreamweaverヘアクセスして、右側の「Download ZIP」からプラグインをダウンロードします。

インストール

通常ではダウンロードしたdreamweaver-master.zipフォルダに含まれる「io.emmet.dreamweaver.mxi」をExtension Managerからインストールできると思うのですが、その方法ではエラーが起きて、インストール出来ませんでした。
そのため今回の方法ではDreamweaverのシステムフォルダへダウンロードしたファイルを移動する方法でインストールしようと思います。

Emmetのコアファイルを移動

dreamweaver-master.zipの中のCommandsフォルダ内のファイル全てを下記のフォルダに移動します。

Windows 7、Windows Vistaの場合
C:\Users\ユーザー名\AppData\Roaming\Adobe\Dreamweaver CS4\ja_JP\Configuration\Commands
Windows XPの場合
C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver CS4\ja_JP\Configuration\Commands
Macの場合(おそらく)
/Users/ユーザー名/Library/Application Support/Adobe/Dreamweaver CS4/ja_JP/Configuration/Commands

完了後Dreamweaverを開くとコマンドメニューの下側にEmmetの表示があると思います。
この段階でEmmetは読み込まれていますが、トリガーが無いので実行できません。

Emmetのメニューを追加する

下記のパスにある「menus.xml」に下記のコードを追加します。

Windows 7、Windows Vistaの場合
C:¥Documents and Settings¥ユーザー名¥Application Data¥Adobe¥Dreamweaver CS4\ja_JP\Configuration\Menus\menus.xml
Windows XPの場合
C:¥Users¥ユーザー名¥AppData¥Roaming¥Adobe¥Dreamweaver CS4\ja_JP\Configuration\Menus\menus.xml
Macの場合(おそらく)
/Users/ユーザー名/Library/Application Support/Adobe/Dreamweaver CS4/ja_JP/Configuration/Menus/menus.xml

挿入するコード

<menu id=”DWMenu_Commands” name=”コマンド(_C)”>の下に挿入します。
大体2500~3000行あたりにあるかと思います。

これで保存してDreamweaverを開けば完了です。

確認

試しにコードエリアにdivと打って「コマンド」→「Emmet」→「Expand Abbreviation」を実行すれば、<div></div>と展開されるはずです。
キーボードショートカットについては「編集」→「キーボードショートカット」から適宜変更できます。

5件のコメントがあります。

  1. windows7ですが、「Emmetのメニューを追加する」は下記のパスにありました。
    C:\Users\ユーザー名\AppData\Roaming\Adobe\Dreamweaver CS4\ja_JP\Configuration\Menus
    参考にさせていただき、無事設定することができました。ありがとうございました。

コメントを残す

 

2014 © Webgoto