|
|
Dreamweaver には、カスタマイズできる部分はFireworks よりも多くコマンド以外には、ビヘイビア、オブジェクト、データトランスレータなどがあります。Dreamweaver のコマンドは、Fireworks と同じように履歴からコマンドを作成することができますが、これから説明するコマンドの作成法は、JavaScript が書ける方向けに話します。
コマンドは、オブジェクトやビヘイビアなどの他の拡張機能と違って、特定の目的はなく何でも作ることができます。Dreamweaver のメニューを見ればわかると思いますが、「WORD HTMLのクリーンアップ」や「フォトアルバムの作成」と機能はばらばらです。
コマンドは、オブジェクトやビヘイビアではできない HTML の編集を行うために作られた機能で、HTMLの編集には Document Object Model(DOM)を利用します。DOM を理解するには、JavaScript がわかっていないと難しいですが、よく使う関数は ４，５つなので、この機能さえきっちりと使えるようになれば、DOM を扱うことは簡単にできます。これ以外の関数については、ヘルプにある Dreamweaverの拡張 を見て下さい。
DOM を取得をするには、dw.getDocumentDOM() 関数を使います。引数に何も指定しなければ、現在の編集中の DOM オブジェクトを返します。また、引数に ファイル名を指定するとそのファイルの DOM オブジェクトを取得することができます。getDocumentDOM() 関数で取得した DOM オブジェクトは、コマンド実行が終了すると開放されますが、一気にたくさんのファイルを処理する場合には、releaseDocument() 関数で取得した DOM オブジェクトを開放して下さい。
これは、オブジェクト内に含まれる引数で指定したタグの一覧を返す関数です。例えば、HTML中に含まれるAタグのリンクを調べたい場合に使用します。
取得したタグの属性を調べるには、getAttribute() 関数を使います。または、オブジェクトのプロパティ名と属性名が重複していない場合には、プロパティで属性値を取得することもできます。
var img = doc.getAttribute( "name" );
var img = doc.name;
は一緒になります。
次は、属性値を設定する関数です。属性名とその属性に設定する値を引数に設定します。また、属性値の取得と同じようにプロパティ名と属性名が重複していない場合には、プロパティで属性値を設定することもできます。
doc.setAttribute( "name", "image1" );
doc.name = doc.name;
今紹介した関数で、リンクの一覧を作成するコマンドを作ろうと思います。
１．
Configuration/Commands フォルダに linkview.htm を作成します。Dreamweaver のサイト定義でConfiguration
フォルダを定義しておくとカスタマイズする場合にすごく便利なので、お勧めです。
２．
Dreamweaver でファイルを開きます。FORM タグを挿入し、リンクの一覧を表示するリストボックスを挿入します。FORM内の内容は、コマンドのダイアログとして表示されます。FORM
名を form1 リストボックスの名前を list1 にします。
３．
後はスクリプトだけなのでテキストエディタで、ファイルを開きます。
４．
SCRIPT タグを挿入します。
<script language="JavaScript"> <!--//--> </script>
５．
commandButtons() 関数でダイアログの横に表示されるボタンを定義します。ボタンに表示するラベルと、ボタンを呼び出したときに実行するスクリプトを指定します。今回は、リンクの確認だけなので、OK ボタンだけを定義し、押したときに ダイアログを閉じるように window.close() とします。
function commandButtons()
{
return new Array( "OK", "window.close()" );
}
６．
ダイアログを表示したときに、リンクの一覧を作成するには、BODYのonLoad イベントで処理するようにします。linkView()関数を呼び出すようにします。
<body onload="linkView()">
７．
linkView()関数を定義します。最初に、dw.getDocumentDOM()関数で DOM オブジェクトを取得します。その次にリンクを一覧を作成するために、ElementsByTagName()
関数を呼び出します。
var doc = dw.getDocumentDOM(); var list = doc.getElementsByTagName( "A" );
８．取得したリストをリストボックスに表示します。ただし、name 属性が入っているものは除外するようにし、オブジェクトのname プロパティが null かどうかで判断します。
var listNum = 0;
for( var i = 0; i < list.length; i++ )
{
if( list[ i ].name == null )
{
document.form1.list1.options[ listNum ] = new Option( list[ i ].href );
listNum++;
}
}
９．
以上でファイルを保存します。設定を有効にするために Dreamweaver を再起動します。
１０．
適当にファイルを開き、メニューのコマンドを見ると listView が追加されているのが確認できます。
１１．
実行するとこのように、リンクの一覧を確認することができます。
１２．
ここで、メニュー項目がファイル名ではわかりにくいので、もう一度 listView.htm を編集します。 setMenuText()関数を定義します。この関数の戻り値がメニュー項目名になります。
function setMenuText()
{
return "リンクの一覧";
}
１３．
保存して、再起動するとメニュー項目は setMenuText() 関数の戻り値が表示されています。
再び、関数の紹介に戻ります。オブジェクトで操作することもできますが、HTML全体、BODY 全体とテキスト単位での編集を行うこともできます。オブジェクトのテキストを編集するには、outerHTML,innerHTMLプロパティを使います。このプロパティは各タグののオブジェクトのプロパティにもあります。outeHTML はそのオブジェクトを含んだHTML内容で、innerHTML はオブジェクト内のHTML内容が入っています。
var doc = dw.getDocumentDOM(); var text = doc.documentElement.outerHTML;
var doc = dw.getDocumentDOM(); var text = doc.body.innerHTML;
となります。innerHTMLやouterHTMLでタグの構造を変えた場合は DOM の構造が変わり、オブジェクトがなくなってしまう場合もあるので、注意して使って下さい。テキスト編集とオブジェクト単位の編集は混合して使わない方がいいです。
選択したオブジェクトに対してコマンドを実行するには、現在の選択位置を取得しなければなりません。Dreamweaver には２種類の取得方法があります。
現在の選択位置をバイト単位で取得する関数です。選択範囲の開始位置と終了位置を返します。選択範囲のテキストを取得するには、先ほどの doc.documentElement.outerHTML で HTML 全体のテキストから抜き出す必要があります。
var doc = dw.getDocumentDOM();
var sel = doc.getSelection();
現在選択範囲に入ってるオブジェクトを取得します。オブジェクト単位で編集する場合に使います。
var doc = dw.getDocumentDOM();
var selObj = doc.getSelectedNode();
紹介した関数を使って、ドキュメントウィンドウ上で選択している範囲をコメントタグで囲むコマンドを作成します。
１．
リンクの一覧と同じように、Configuration/Commands にファイルを新規作成します。ファイル名は、Comment.htm にします。
２．
コマンドの場合、ダイアログがなくてもコマンドを実行することができます。今回はダイアログを表示せずに直接コマンドが実行される形にします。テキストエディタですべて編集します。
３．
メニューでコマンドを呼び出されたときに自動的に実行するようにするには、BODY の onLoad イベントに処理内容を記述します。onLoad イベントで
setComment() 関数を呼び出すようにします。
４．
setComment() 関数を定義します。最初に getDocumentDOM() 関数を呼び出し、DOM オブジェクトを取得して、getSelection()
関数で、現在の選択範囲を取得します。
var doc = dw.getDocumentDOM(); var sel = doc.getSelection();
５．
HTMLの内容を取得して、コメントタグを挿入します。コメントタグは、選択範囲を囲むようにして挿入します。( 選択範囲前 + <!-- + 選択範囲
--> + 選択範囲後
)
var selfirst = doc.documentElement.outerHTML.substring( 0, sel[ 0 ] );
var seltext = "<\!--" + doc.documentElement.outerHTML.substring( sel[ 0 ], sel[ 1 ] ) + "-->"; var sellast = doc.documentElement.outerHTML.substring( sel[ 1 ] );doc.documentElement.outerHTML = selfirst + seltext + sellast;
６．
setMenuText() 関数でメニュー項目に表示するラベルを定義します。
function setMenuText()
{
return "選択範囲をコメント";
}
７．
ファイルを保存して、Dreamweaver を再起動します。
８．
これで、メニューから選択すればコマンドは実行できるようになりました。しかし、選択していない場合にもコマンドが実行できてしまうので、選択されていない場合にはこのコマンドを実行できないように
canAcceptCommand()関数を定義して淡色表示になるようにします。
９．
関数内では、選択範囲の最初と最後の位置を調べ、位置が同じであれば選択状態にはならないので、同じ場合は false、違う場合は true を返すように記述します。
function canAcceptCommand()
{
var doc = dw.getDocumentDOM();
var sel = doc.getSelection();
if( sel[ 0 ] != sel[ 1 ] )
return true;
else
return false;
}
１０．
コマンドの内容を変えた場合は、コマンドは、実行後にタイムスタンプを見てタイムスタンプが違う場合にはリロードされるようになっているので、このように１回繰り返せば設定が有効になります。
Dreamweaver と Fireworks の連携は、「Webフォトアルバムの作成」や「画像の最適化」などがありますが、この作業には JavaScript が利用されています。Webフォトアルバムの作成では、Dreamweaver 側でどのフォルダの画像を使用するか設定し、Fireworks 側でフォルダ内の画像を処理し、終了後 Dreamweaver に戻るようになっています。
このように、JavaScript で自由に Fireworks を制御することができます。 Fireworks に対してコマンドを実行するには、FWLaunch オブジェクトを使用します。FWLaunch オブジェクトには、コマンド実行、コマンドの終了結果、画像の最適化、バージョン情報などの関数があります。これらの関数をどうやって組合せ方法を「新規画像の作成」オブジェクトを例に説明しようと思います。このオブジェクトは、オブジェクト内でコマンドを呼び出す形を取っています。コマンドを呼び出す形にした理由は特にありません。
１．
Fireworks を制御する場合には、最初に Fireworks がインストールされていない、バージョンが古いなどのチェックを行います。 validateFireworks()
関数で調べることができます。この作業はコマンドの onLoad イベントで調べるのが基本です。3 以降の Fireworks がインストールされていない
PC ではコマンドが実行できないようにアラートを表示してコマンドを終了するようにします。
if( FWLaunch.validateFireworks(3.0) )
{
gProgressTracker = null;
gResponse = null;
resultTag = "";
}
else
{
alert( "Fireworks3をインストールして下さい。" );
window.close();
}
２．
コマンドの「OK」ボタンを押したときに、ダイアログで設定した入力値を受け取ります。ここで、ダイアログの入力値を調べるためにfindObject() 関数を使っていますが、この関数は
Configuration/Shared/MM/Scriptsに保存されている外部スクリプトファイルに収録されています。このフォルダ内には、他にも便利な関数があるので、一度覗いて見て下さい。
var pngFolder = document.form1.pngFolder.value; var expFolder = document.form1.expFolder.value;var doc = dw.getDocumentDOM( "document" ); var bgcolor = doc.body.getAttribute( "bgcolor" ); dw.releaseDocument( doc );var filename = findObject( "filename" ).value; var width = findObject( "width" ).value; var height = findObject( "height" ).value;
３．
書き出しオプションの部分ですが、これは 「Webフォトアルバムの作成」のソースをそのままコピーしています。このあたりは定型分のようなものなので、コピーして使って下さい。
var export = document.form1.export;
gSourceFormatSelection = export.options[ export.selectedIndex ].value;
if (gSourceFormatSelection == "gif")
{
gSourceExtension = ".gif";
gSourceFormat = {
applyScale:false,
colorMode:"indexed",
exportFormat:"GIF",
jpegQuality:80,
jpegSmoothness:0,
jpegSubsampling:1,
name:"GIF WebSnap 128",
numEntriesRequested:128,
percentScale:100,
useScale:true,
xSize:0,
ySize:0
};
} else if (gSourceFormatSelection == "jpeg")
{
gSourceExtension = ".jpg";
gSourceFormat = {
applyScale:false,
colorMode:"24 bit",
exportFormat:"JPEG",
jpegQuality:80,
jpegSmoothness:0,
jpegSubsampling:0,
name:"JPEG - Better Quality",
numEntriesRequested:0,
percentScale:100,
useScale:true,
xSize:0,
ySize:0
};
}
４．
Fireworks に送るコマンドを作成します。
送るコマンドを作成するコツですが、最初に Fireworks でコマンドを作成します。このコマンドを変数によって切り替えたい部分を変数に置き換えて、最初に初期値を設定する形に修正します。Dreamweaver でこの初期値の部分をダイアログで設定した値になるように、コマンドを生成します。
var doc = fw.getDocumentDOM();
doc.addNewRectangle({left:0, top:0, right:72, bottom:172}, 1);
doc.setFillColor("#000000");
doc.rotateSelection(45, "autoTrimImages");
doc.clipCopy();
doc.clipPaste("ask user");
doc.moveSelectionBy({x:100, y:0}, false, false);
doc.setFillColor("#3359ff");
doc.clipCopy();
doc.clipPaste("ask user");
doc.reflectSelection(true, false, "autoTrimImages");
doc.moveSelectionBy({x:72, y:0}, false, false);
doc.selectAll();
doc.convertToSymbol("graphic", "macromedia");
今回作るコマンドは、このコマンドをDreamweaver からの設定で書き換えるようにします。png の保存先、書き出し先、画像の幅と高さを初期値で設定できるようにします。
var bgcolor = "#ffffff";
var width = 450;
var height = 200;
var expFolder = "file:///D|/Web/game3rd/flash/";
var pngFolder = "file:///D|/Web/png/flash/";
var filename = "title";
var exportOption = {applyScale:false, colorMode:"indexed", exportFormat:"GIF", jpegQuality:80, jpegSmoothness:0, jpegSubsampling:1, name:"GIF WebSnap 128", numEntriesRequested:128, percentScale:100, useScale:true, xSize:0, ySize:0};
var extract = ".gif";
var doc = fw.createDocument();
doc.setDocumentCanvasColor( bgcolor );
doc.setDocumentCanvasSize({left:0, top:0, right: width, bottom: height});
５．
コマンドを生成するスクリプトを記述します。ダイアログの値を設定する部分は、自分で書かないとだめですが、変数を設定した部分はコピー＆ペーストするだけで簡単に作成することができます。
jsfString += "var width = " + width + ";\n"; jsfString += "var height = " + height + ";\n"; jsfString += "var expFolder = \"" + expFolder + "\";\n"; jsfString += "var pngFolder = \"" + pngFolder + "\";\n"; jsfString += "var filename = \"" + filename + "\";\n"; jsfString += "var exportOption = " + gSourceFormat.toSource() + ";\n"; jsfString += "var extract = \"" + gSourceExtension +"\";\n"; jsfString += "var doc = fw.createDocument();\n"; jsfString += "doc.setDocumentCanvasColor( bgcolor );\n"; jsfString += "doc.setDocumentCanvasSize({left:0, top:0, right: width, bottom: height});\n";jsfString += 'doc.addNewRectangle({left:0, top:0, right:72, bottom:172}, 1);\n'; jsfString += 'doc.setFillColor("#000000");\n'; jsfString += 'doc.rotateSelection(45, "autoTrimImages");\n'; jsfString += 'doc.clipCopy();\n'; jsfString += 'doc.clipPaste("ask user");\n'; jsfString += 'doc.moveSelectionBy({x:100, y:0}, false, false);\n'; jsfString += 'doc.setFillColor("#3359ff");\n'; jsfString += 'doc.clipCopy();\n'; jsfString += 'doc.clipPaste("ask user");\n'; jsfString += 'doc.reflectSelection(true, false, "autoTrimImages");\n'; jsfString += 'doc.moveSelectionBy({x:72, y:0}, false, false);\n'; jsfString += 'doc.selectAll();\n'; jsfString += 'doc.convertToSymbol("graphic", "macromedia");\n';
jsfString += 'doc.setSelectionBounds({left:0, top:0, right: width, bottom: height}, "autoTrimImages");\n';jsfString += "fw.saveDocument( doc, pngFolder + filename + \".png\" );\n"; jsfString += "fw.exportDocumentAs( doc, expFolder + filename + extract, exportOption );\n"; jsfString += "fw.closeDocument( doc );\n";
６．
生成したコマンドをFireworks に送るには、execJsInFireworks() 関数を使い、引数にはコマンドのスクリプトまたは、コマンドファイルのURLのどちらかを指定します。今回は、ファイルを生成して
Configuration フォルダに保存するようにします。
DWfile.write( jsfPath, jsfString );gProgressTracker = FWLaunch.execJsInFireworks( jsfPath );if( gProgressTracker == null || typeof( gProgressTracker ) == "number" ) { alert( "An error occurred." ); window.close(); }
この関数を実行すると、コマンドの実行結果を調べるために必要なオブジェクトを返します。このオブジェクトが、nullだったり、数字が帰ってきた場合はエラーになります。数字はえらコードになっているので、Extending Dreamweaver には詳しいエラーコードの内容が書いてあります。
７．
Fireworks は勝手に動くので、いつ終了するかわかりません。そこで、setTimer で定期的にチェックするようにします。
window.setTimeout( "checkJsResponse();", 500 );
８．
終了のチェックするには、getJsResponse()関数に、execJsInFireworks() 関数の戻り値で取得したオブジェクトを引数に指定して、呼び出します。この関数の戻り値が
null の場合は続行中になり、数字が返った場合にはエラーとなります。数字以外は処理が成功したことになります。
if (typeof(gResponse) == "number")
{
alert( "エラーが発生しました\n- " + number );
window.close();
}
else
{
var filename = RelactivePath( dw.getDocumentPath( "document" ), gImageName );
var width = findObject( "width" ).value;
var height = findObject( "height" ).value;
resultTag = "<img src=\"" + filename + "\" width=\"" + width + "\" height=\"" + height + "\" >";
window.close();
}
このようにして、Fireworks で一度コマンドとして作ったものを変数で変えられるように変更して、Dreamweaver で初期値を与えるようにするのが、連携のパターンだと思います。一度、連携のパターンを作ってしまえば、後は書き出すコマンドの中身と結果、ダイアログの内容だけなので、簡単に作れるようになると思います。
成功したときには、実は Fireworks で実行した最後の結果が文字列として返されるようになっています。これを利用すれば、画像を自動生成した場合にサイズを返すことができます。今回は戻り値を使用しませんが、この選択したテキストを画像に変換するコマンドでは、最後にこのように、"x,y;"として、画像のサイズを取得するようになっています。
Fireworks 側
x = doc.width; y = doc.height; fw.saveDocument( doc, pngFolder + filename + ".png" ); fw.exportDocumentAs( doc, expFolder + filename + extract, exportOption ); fw.closeDocument( doc ); x + "," + y;
Dreamweaver 側
var point = dw.getTokens( gResponse, "," ); var str = "<img src=\"" + RelactivePath( dw.getDocumentPath( "document" ), gImageName ) + "\" width=\"" + point[ 0 ] + "\" height=\"" point[ 1 ] + "\" >";
デザインノートは、ファイルに対して外部情報を残せる機能で、Fireworks の場合は元PNGファイルの情報をデザインノートに残しています。
このようにして、コマンドの設定情報をデザインノートに残してやれば、その値を元に修正をすることが簡単にできます。
このコマンドは画像に対してエフェクトを設定するコマンドです。
このコマンドでは、最初に使用した画像に対して実行するようになっています。これは、デザインノートに最初に選択した画像のURLをデザインノートに残して、実行する場合にこのURL先の画像に対してエフェクトを設定するようになっています。
デザインノートの使用方法は、ファイルを開くのとよく似ています。開きたいデザインノートの URL を指定して open関数を呼び出します。成功すれば、ハンドルを返します。デザインノートに対して作業する場合は、このハンドルを使ってやり取りを行います。使い終わったら close関数でハンドルを閉じます。デザインノートは、JS Extension のC 言語内でも使用することができます。
var hNote = MMNotes.open( gImageName );
if( hNote != null )
{
MMNotes.set( hNote, ImageEffectKey, gOldImage );
MMNotes.set( hNote, "fw_source", gPngFile );
MMNotes.close( hNote );
}