2013.07.07 - Article

Dreamweaver CS4で「Emmet」を使う方法

Tag:

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行あたりにあるかと思います。

<menu id="DWMenu_Commands" name="コマンド(_C)">
<!-- ここから -->
<menu id="DWMenu_Emmet" name="_Emmet">
<menu id="DWMenu_Emmet_HTML" name="HTML">
<menuitem command="dw.runCommand('Emmet.html', 'match_pair_outward')" id="DWMenu_Commands_Emmet_matchPairOutward" name="Match Pair Tag (outward)"/>
<menuitem command="dw.runCommand('Emmet.html', 'match_pair_inward')" id="DWMenu_Commands_Emmet_matchPairInward" name="Match Pair Tag (inward)"/>
<menuitem command="dw.runCommand('Emmet.html', 'matching_pair')" id="DWMenu_Commands_Emmet_matchingPair" name="Go To Matching Pair"/>
<menuitem command="dw.runCommand('Emmet.html', 'remove_tag')" id="DWMenu_Commands_Emmet_removeTag" name="Remove Tag"/>
<menuitem command="dw.runCommand('Emmet.html', 'split_join_tag')" id="DWMenu_Commands_Emmet_splitJoinTag" name="Split/Join Tag Declaration"/>
</menu>
<menu id="DWMenu_Emmet_CSS" name="CSS">
<menuitem command="dw.runCommand('Emmet.html', 'reflect_css_value')" id="DWMenu_Commands_Emmet_reflectCSSValue" name="Reflect CSS Value"/>
</menu>
<menu id="DWMenu_Emmet_Numbers" name="Numbers">
<menuitem command="dw.runCommand('Emmet.html', 'increment_number_by_1')" id="DWMenu_Commands_Emmet_incrementNumberBy1" name="Increment Number by 1"/>
<menuitem command="dw.runCommand('Emmet.html', 'decrement_number_by_1')" id="DWMenu_Commands_Emmet_decrementNumberBy1" name="Decrement Number by 1"/>
<menuitem command="dw.runCommand('Emmet.html', 'increment_number_by_01')" id="DWMenu_Commands_Emmet_incrementNumberBy01" name="Increment Number by 0.1"/>
<menuitem command="dw.runCommand('Emmet.html', 'decrement_number_by_01')" id="DWMenu_Commands_Emmet_decrementNumberBy01" name="Decrement Number by 0.1"/>
<menuitem command="dw.runCommand('Emmet.html', 'increment_number_by_10')" id="DWMenu_Commands_Emmet_incrementNumberBy10" name="Increment Number by 10"/>
<menuitem command="dw.runCommand('Emmet.html', 'decrement_number_by_10')" id="DWMenu_Commands_Emmet_decrementNumberBy10" name="Decrement Number by 10"/>
<menuitem command="dw.runCommand('Emmet.html', 'evaluate_math_expression')" id="DWMenu_Commands_Emmet_evaluateMathExpression" name="Evaluate Math Expression"/>
</menu>
<menuitem command="dw.runCommand('Emmet.html', 'expand_abbreviation')" id="DWMenu_Commands_Emmet_expandAbbreviation" key="Cmd+E" name="_Expand Abbreviation"/>
<menuitem command="dw.runCommand('Emmet.html', 'wrap_with_abbreviation')" id="DWMenu_Commands_Emmet_wrapWithAbbreviation" name="Wrap with Abbreviation"/>
<menuitem command="dw.runCommand('Emmet.html', 'toggle_comment')" id="DWMenu_Commands_Emmet_toggleComment" name="Toggle Comment"/>
<menuitem command="dw.runCommand('Emmet.html', 'prev_edit_point')" id="DWMenu_Commands_Emmet_prevEditPoint" name="Previous Edit Point"/>
<menuitem command="dw.runCommand('Emmet.html', 'next_edit_point')" id="DWMenu_Commands_Emmet_nextEditPoint" name="Next Edit Point"/>
<menuitem command="dw.runCommand('Emmet.html', 'select_next_item')" id="DWMenu_Commands_Emmet_selectNextItem" name="Select Next Item"/>
<menuitem command="dw.runCommand('Emmet.html', 'select_previous_item')" id="DWMenu_Commands_Emmet_selectPreviousItem" name="Select Previous Item"/>
<menuitem command="dw.runCommand('Emmet.html', 'merge_lines')" id="DWMenu_Commands_Emmet_mergeLines" name="Merge Lines"/>
<separator id="DWMenu_Emmet_separator2"/>
<menuitem command="dw.runCommand('Emmet Preferences.html', '')" id="DWMenu_Commands_Emmet_preferences" name="Emmet Preferences"/>
</menu>
<separator id="DWMenu_Emmet_separator"/>
<!-- ここまで -->
<menuitem file="Menus/MM/Command_Recording.htm" id="DWMenu_Commands_StartRecording" key="Cmd+Shift+X" name="記録開始(_S)"/>

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

確認

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

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

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

コメントを残す