Dreamweaver 画像の幅と高さをリセットするコマンド

2009/01/27

こんにちは。きんくまです。

えっと、この前からDreamweaverのコマンドの作り方を調べてました。そしたら、あれですね。
ドリはhtmlとJavaScriptで作るんですね。
htmlでパネルを作って、JavaScriptで操作するという感じです。でも、大掛かりなやつだとファイルを分けた方がいいと思うんですが、小さめなやつだとhtmlに埋め込んでも問題ないようです。
実際、ヒストリパネルから、自作コマンドを保存した場合、htmlの中にJSが埋め込まれてます。

さて、今回のコマンドは画像の幅と高さをリセットするコマンドです。
いや、正確にいうと、もし幅と高さの属性を持っていない場合は、幅と高さを付け足しちゃうコマンドです。

具体的には、

<div id="id_1">
<h1><img src="images/id_1_1.jpg"></h1>
<img src="images/c3_3_5.jpg">
</div>

こんな感じのソースがあったとして、ドリ上でこのdivを選択します。それで、コマンドを選ぶと

<div id="id_1">
<h1><img src="images/id_1_1.jpg" width="600" height="300"></h1>
<img src="images/c3_3_5.jpg" width="80" height="80">
</div>

こんな感じに幅と高さを自動で追加します。相対パスもルートからの絶対パスも対応しました。
毎回、画像をいれる→プロパティパネルの矢印押す→幅と高さを追加
という流れがずーっと面倒だと思っていたので、一気に追加できるように作成しました。

→リセットするやつをダウンロード（MIT License）

■使い方
上からダウンロードする。
CS3だったら
C:Documents and Settingsユーザーファイル名Application DataAdobeDreamweaver 9ConfigurationCommands
の中に解凍していれる。
CS3を再起動する。あとは、コマンドパネルに追加されているので、使ってください。

ちなみに、一度もコマンドを自作していないと、先のフォルダそのものが存在しないかもしれないので、なければ、ヒストリパネルから適当に一度コマンドを作ってから削除してあげる（ダミー用で）とよいかもしれません。

あとつまんないけど、ソースも

<HTML>
<HEAD>
<TITLE>画像サイズをリセット</TITLE>
<SCRIPT LANGUAGE="javascript">
<!--

function runCommand()
{
  var rootPath = dw.getSiteRoot();
  var docPath = dw.getDocumentPath("document");
  var slashIndex = docPath.lastIndexOf("/");
  docPath = docPath.slice(0, slashIndex + 1);
  var currentDOM = dw.getDocumentDOM();
  var currentNode = currentDOM.getSelectedNode();
  var imgs = currentNode.getElementsByTagName('img');
  var i;
  var img;
  var imgDW;
  var imgSrc;
  var path;
  var naturalSize;
  for(i = 0; i < imgs.length; i++){
    img = imgs[i];
    imgSrc = img.src;
    //絶対パス
    if(imgSrc.charAt(0) == "/"){
      path = rootPath + imgSrc;
    //相対パス
    }else{
      path = docPath + imgSrc;
    }
    naturalSize = dw.getNaturalSize(path);
    currentDOM.setSelectedNode(img);
    imgDW = dw.getDocumentDOM();
    imgDW.resizeSelection(naturalSize[0], naturalSize[1]);
  }
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="runCommand()" >
</BODY>
</HTML>