Dreamweaver CS4で「Emmet」を使う方法
Zen-Codingの次世代バージョン「Emmet」Dreamweaver用のプラグインがリリースされていたので導入してみました。
その際、Dreamweaver CS4の場合なぜかエラーが起きたので、その解決方法です。
実行環境はWindows 7 Dreamweaver CS4です。
Dreamweaver CCの場合は簡単
ちなみに、Dreamweaver CCではzxpパッケージをダウンロードして、Extension Managerからインストールすれば完了しました。
インストール後の画面
とりあえず正常にインストールされた場合、メニューのコマンド欄の二箇所にEmmetのメニューが表示されます。
導入方法
プラグインをダウンロード
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行あたりにあるかと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<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件のコメントがあります。
Thank you very much.
windows7ですが、「Emmetのメニューを追加する」は下記のパスにありました。
C:\Users\ユーザー名\AppData\Roaming\Adobe\Dreamweaver CS4\ja_JP\Configuration\Menus
参考にさせていただき、無事設定することができました。ありがとうございました。
windows7,vistaとXPでフォルダが逆になってませんか？
本当ですね。修正しておきました。
ありがとうございます。