【ツール/エディタ】Dreamweaverのコマンドを拡張機能化する

Dreamweaverには「コマンド」というマクロ的機能があります。
HTMLとJavascriptで書くことができる上、要素をDOMで扱えるという点がテキストエディタにはない大きな強みだと個人的には思っています。属性の取得はgetAttribute、子要素はchildNodesで取れます。正規表現で取るのは大変ですよね。

コマンドはconfiguration\Commandsフォルダ内にJavascriptを記述したHTMLファイルを置くだけで「コマンド」メニュー内に表示されて使うことができますが、この方法だとショートカットを設定することができません。

しかし作ったHTMLファイルを拡張機能としてパッケージ化し、インストールすることでショートカットの設定ができるようになります。頻繁に使う機能の場合は拡張機能としてインストールしたほうがより便利に使うことができると思います。

拡張機能化に必要なものはスクリプト本体を記述したHTMLファイル（ファイル名は何でもいい）と.mxiという拡張子のXMLファイルです。

ADs

HTMLファイルの用意

ファイル名は何でもいいのでコマンド本体を記述したHTMLファイルを用意します。
以下はimgタグを選択して実行すると、その画像への直リンクを貼るというコマンドです
(つまり <img src="img.jpg" /> → <a href="img.jpg"><img src="img.jpg" alt="" /></a> にする）

<HTML>

<HEAD>

<TITLE>画像への直リンク</TITLE>

<!--

//functionの名前は何でもいいです。最後にbodyのonloadに書くのを忘れずに

function runCommand(){

var dom = dw.getDocumentDOM(); //まずはこれから。

var select = dom.getSelectedNode(); //選択範囲を取得

if(select.tagName == 'IMG'){ //選択範囲のタグがimgなら実行

var cr = select.innerHTML;

var source = select.getAttribute('src');

select.outerHTML = '<a href="' + source + '">' + cr + '</a>';

} else {

return false;

}

// -->

</SCRIPT>

</HEAD>

</BODY>

</HTML>

mxiファイルの用意

以下のフォーマットで拡張子が「.mxi」となっているファイルを用意します。文字コードは「BOM有りのUTF-8」にしてください。

nameとかdescriptionなどはExtension Managerに表示されるので、配布する場合はきちんと書いたほうがいいです。自分しか使わないのならテキトーでもいいと思います。

<?xml version="1.0" encoding="UTF-8"?>

<macromedia-extension name="画像への直リンク" version="0.1.0" type="Suite">

</products>

<description><![CDATA[

画像への直リンク

]]></description>

<ui-access><![CDATA[

画像への直リンク

]]></ui-access>

<license-agreement><![CDATA[

]]></license-agreement>

<files>

</files>

<configuration-changes>

<menu-insert appendTo="DWMenu_Commands">

</menu-insert>

</configuration-changes>

</macromedia-extension>

パッケージ化

上記2ファイルを同一フォルダ内に置き、Extension Managerを起動して「ファイル」→「ZXP拡張機能のパッケージ化」を選択します。そこでMXIファイルを選択し、できあがる拡張機能（拡張子がZXPとなり、ダブルクリックでインストールできる）の保存場所とファイル名を指定すればできあがりです。