Fireworksとの連携
2001/12/22}
=====================================================[ No.16 2001/12/22 ]==
Dreamweaver Programming < Fireworksとの連携 >
[ BACK NUMBER ]
http://www.game3rd.com/dreamweaver/mail/
===========================================================================
◆Fireworksの連携その２
===========================================================================
今回はFireworksの連携方法です。前に一度DreamweaverからFireworksを起動する
話を書きましたが、今回はおさらいとFireworksのコマンドでできることをいくつか
紹介しようと思います。
○Fireworksの設定内容を取得
Fireworksに対して何らかの処理を行う場合は、Fireworksで用意されているAPI
を呼び出すだけでいいんですが、Fireworksのインストール先などFireworksの設定
内容について知りたい場合があると思います。そういった場合に、Fireworksでは
設定内容を取得するAPIを呼び出して調べることができます。したがって、Dreamweaver
で調べるためには、DreamweaverからこのAPIを呼び出してFireworksで実行させる
ようにします。APIの実行結果は、DreamweaverからFireworksのコマンドを呼び出す
と最後に実行した処理の結果がDreamweaverへ返るようになっているので、調べたい
内容を最後の実行結果となるようにコマンドを作成します。
Fireworksの設定内容を取得するためのAPIは、Extending Fireworksに記載され
ています。これは標準ではインストールされないので、CD-ROMから手動でコピー
して下さい。Macromediaのサイトからダウンロードすることもできます。
http://www.macromedia.com/support/fireworks/extensibility/extending_fireworks4.html
●Fireworksの起動
DreamweaverからFireworksに対して何らかの操作を行う場合には、必ずFWLaunch
オブジェクトを使用します。これがないとFireworksと連携することはできません。
これはDreamweaver2以降から標準でついています。このオブジェクトが存在を
判定する場合は、
if( typeof( FWLaunch ) != "undefined" )
{
// オブジェクトは存在する
}
else
{
// オブジェクトは存在しない
}
とtypeof演算子で調べることができます。これは、Fireworksに限らずオブジェクトの
存在を調べる場合に使えます。次にすることはFireworksのバージョンを調べること
です。FWLaunchオブジェクトはDreamweaverのバージョンによって使用できる機能が
異なるので、使用できない機能を呼び出すとエラーになります。これを防ぐために
バージョンを調べます。調べるには、FWLaunchオブジェクトのvalidateFireworks()
関数を使います。
if( FWLaunch.validateFireworks( 3.0 ) )
{
// 3.0以上
}
else
{
// 3.0よりもしたもしくはインストールされていない
}
この関数は引数で受け取ったバージョン値以降のFireworksがインストールされている
かどうか調べる関数です。これで使用する機能やFireworksに渡すAPIが実行可能か
どうか判断できれば、APIの実行をFireworksへ処理するように指示します。処理する
内容は直接渡す方法とファイルに保存してそのファイル名を渡す２種類の方法があり
ます。なれていれば、直接渡してしまえばいいですが、正しく処理内容を渡せているか
確認できるようにいったんファイルに保存することをおすすめします。
今回は、直接渡す方法をとります。実行する内容はApp.appDirを指定します。これは
AppオブジェクトのappDirプロパティで、Fireworksのインストール先のパスが格納され
ています。このプロパティだけを指示して、内容をDreamweaverに返すようにしてます。
Fireworksの処理を実行するには、FWLaunchオブジェクトのexecJsInFireworks関数を
使用します。
gProgressTracker = FWLaunch.execJsInFireworks( "App.appDir" );
execJsInFireworks関数の引数に、処理内容もしくはファイル名を渡すと、Fireworksを
起動し、処理を開始します。失敗した場合には戻り値はnullもしくはエラーコードが返る
ようになっています。正常に終了するとFireworksの識別オブジェクトを返します。
if( gProgressTracker == null || typeof( gProgressTracker ) == "number" )
{
// 実行エラー
}
else
{
// 正常実行
}
●Fireworksからの戻り値
Fireworksを起動されて処理を行いますが、終了してもDreamweaverには何も
連絡はいきません。そのため、終了したかどうかはDreamweaver側で定期的に
調べることになります。終了したかどうかは、起動時に取得した識別オブジェクト
を使ってgetJsResponse関数を呼び出します。
gResponse = FWLaunch.getJsResponse( gProgressTracker );
if (gResponse == null)
{
}
else if (typeof(gResponse) == "number")
{
}
else
{
}
この関数は引数に識別オブジェクトを指定すると、その処理が終了したかどうか
を返します。nullが返ると実行中、数値だとエラーコードになります。それ以外は
Fireworks実行結果の文字列が返されます。この処理を定期的に調べる必要があるので、
nullが返された場合には、この内容もう一度繰り返すようにsetTimeOut関数を
使用します。setTimeOut関数を設定した経過時間後に指定した関数を呼び出す
ようになっています。従って、上の終了チェックの処理は関数として定義し、
Fireworksの起動開始後に、タイマーを設定して呼び出すようにします。
全体の処理を書くと以下のようになります。getFireworksPath()関数を呼び出すと
Fireworksを起動し、インストール先のパスをアラートで表示します。このようにして
Fireworksの起動と処理結果の判定を行います。
var gProgressTracker = null;
var gResponse = null;
var commandPath = "";
function getFireworksPath()
{
gProgressTracker = FWLaunch.execJsInFireworks( "App.appDir" );
commandPath = "";
if( gProgressTracker == null || typeof( gProgressTracker ) == "number" )
{
alert( "エラーが発生しました。処理を中断します。" );
window.close();
}
else
{
window.setTimeout( "checkPathResponse();", 500 );
}
}
function checkPathResponse()
{
if (gProgressTracker != null)
gResponse = FWLaunch.getJsResponse( gProgressTracker );
if (gResponse == null)
{
window.setTimeout( "checkPathResponse();", 500 );
}
else
{
FWLaunch.bringDWToFront();
if (typeof(gResponse) == "number")
{
alert( "エラーが発生しました - " + number );
window.close();
}
else
{
var commandPath = unescape( gResponse ) + "/Configuration/Commands/";
alert( commandPath );
window.close();
}
}
}
○置換を使う
Dreamweaverの置換は前回説明しましたが、Fireworksにも検索と置換の機能があり
ます。あまり目立ってない機能ですが、フォントや色、テキストの変更を一括で行え
ます。また、プロジェクトログ機能を使えば、プロジェクトに登録されている画像
ファイル一括置換、書き出しなんてこともできます。プロジェクトログの機能も
目立った機能じゃないんですが、結構使えます。僕は最近知りました。(^^;
コマンドで置換を行う場合には、置換処理を行うためのオブジェクトを用意して、
置換条件を設定します。どのようにして置換条件を設定するかは実際にダイアログ上で
置換条件を設定・実行すれば、ヒストリパネルに残るので、ここから調べます。
テキストとフォントの置換の場合は以下のようになります。
●テキストの置換
findOption = {
find: "検索文字列",
matchCase:false, // 大文字小文字の区別
regExp:false, // 正規表現の使用
replace: "置換文字列",
updateLog:true, // プロジェクトログへの追加
whatToFind:"text", // 処理内容
whereToSearch:"document", // 処理範囲
wholeWord:false // 単語検索
};
●フォントの置換
findOption = {
find: "検索フォント名",
findMaxSize:999, // 検索対象の最大フォントサイズ
findMinSize:1, // 検索対象の最小フォントサイズ
findStyle:-1, // 検索対象のスタイル
replace: "置換フォント名",
replaceSize:0, // 置換後のフォントサイズ
replaceStyle:-1, // 置換後のスタイル
updateLog:true, // プロジェクトログへの追加
whatToFind:"font", // 処理内容
whereToSearch:"document" // 処理範囲
};
これで、findOptionには、置換条件のオブジェクトが設定されます。これを
fw.setUpFindReplace()の引数の設定するとFireworksの置換条件がこのオブジェクト
内容と入れ替わり、実行できる状態になります。
fw.setUpFindReplace( findOption );
実際の置換を行うには、fw.replaceAll()関数を呼び出せば、置換を開始します。
fw.replaceAll();
条件設定さえできれば、簡単な作業です。しかし、Dreamweaverでこの作業を
実行する場合に、オプションの指定が面倒になると思います。Fireworksへ
コマンドを実行するには、テキストをDreamweaver側で生成することになりますが、
オプションをテキストで表現すると、
"findOption = {find :\"検索文字列\", matchCase:..."
と読みにくくなります。そこで、一つ便利な方法があるので紹介します。置換条件
のようにオブジェクト形式で表現されているものを簡単にテキストの表現に置き換える
方法です。これを行うには、Dreamweaver側で置換条件のオブジェクトを作成します。
function replaceFireworksCommand( findword, replaceword )
{
var findOption;
var commandText;
findOption = {
find: findword,
matchCase:false,
regExp:false,
replace: replaceword,
updateLog:true,
whatToFind:"text",
whereToSearch:"document",
wholeWord:false
};
findOptionには置換条件が設定されます。JavaScriptには、オブジェクト表現を
テキスト表現に変える関数がありこれを使って、テキスト表現を取得します。
var text = findOption.toSource();
この１行だけで、テキスト表現に置き換えることができます。オブジェクトを
使用する場合には、この方法を使うと簡単に定義できます。
これで置換が行えますが、僕が作業していて気がついた点が２点あります。これは
Fireworks4での実行結果です。同じ内容をFireworksで実行すると正常に動くので
DramweaverからFireworksを実行した場合にのみ起こる問題です。
・置換を行った後にスライス書き出しを行うと正常にスライス書き出しができない
・フォントの置換が１回目しか成功しない
検証した結果ですので、確かかどうかはわかりません。解決方法が見つかった方は
連絡下さい。m(__)m
以上で、今回は終わりますが、次回もFireworksをやろうと思います。Fireworksの
書き出し方法について説明します。ほんとは１号にまとめてもよかったんですが、
書き出しは書くことが多いのでわけることにしました。次号は、１月２６日を
予定してます。
◆作成した拡張機能
===========================================================================
今回僕が作成した機能はないんですが、新しい拡張機能が登録されたのでご紹介
します。
○都道府県選択メニュー挿入HTML4.01対応版
http://www.game3rd.com/dreamweaver/extensions/info/74.htm
-- 紹介文 --
都道府県メニューVer.2は、HTML4.01対応版で、各都道府県を地方毎に<optgroup>
要素でグループ化したものです。※尚、現在このグループ化に対応している
ブラウザは、Win版IE6とMac版IE5、Netscape6、iCab（Macintoshのみ）です。
それ以外のブラウザでは、<optgroup>要素は無視され、通常のプルダウンメニューで
表示されます。グループ化された表示は各ブラウザによって異なります。
◆FIRECRACKER-サイト編
===========================================================================
僕と森川さんで行ったプロジェクトがついに解禁になりました。FIRECRACKER
サイト編です。タイトルの通り、サイトを作るための機能が盛り込まれています。
http://www.siliconcafe.com/firecracker/site/index.html
森川さんが作ったテンプレート(10パターンＸ３バリエーションＸフォント３種類)の
９０種類のサイトのテンプレートが収録され、これを使えばすぐにサイト制作が
開始できるようになっています。また、テンプレートで使用するためのボタンなども
収録されています。これだけでも十分使えるんですが、僕が出番がないので、
拡張機能をつけました。これは一般配布していない拡張ファイル６種類用意し、
普段つけていないヘルプもつけてました。ここで紹介します。ヘルプだけはサイトで
公開しているので、どんなものか確認できます。
○サイトウィザード
今回の目玉としてあげられている機能です。ホームページビルダーに負けたくない
一心で作ったサイトの自動生成コマンドです。森川さんのテンプレートを素材にし
ウィザード上で設定した内容通りにサイトの作成を行います。これは事例の一つ
で、いろいろなウィザードを展開していく予定です。
http://www.game3rd.com/dreamweaver/extensions/FIRECRACKER/05SiteWizard.htm
作成後のページ画像
http://www.game3rd.com/dreamweaver/extensions/FIRECRACKER/05SiteWizard11.gif
実際にウィザード動作しているムービーが用意されているので、よかったら見て
下さい。
http://www.siliconcafe.com/firecracker/site/movie/movie01.html
○Fireworksボタンの挿入
用意されたボタンのスタイルを選択し、新しくボタンを作成することができます。
FireworkPNGと書き出し画像を一緒に作成します。また、書き出し形態をスライスと
単一画像から選ぶことができ、ロールオーバーボタンやアイキャッチなどの作成に
便利です。また、ボタンスタイルはFireworks PNGそのものなので、自分で簡単に
追加することができます。
http://www.game3rd.com/dreamweaver/extensions/FIRECRACKER/06FireworksBtn.htm
○テキスト画像の挿入
「選択したテキストを画像に変換」コマンドは配布していますが、それのアップ
グレード版です。オブジェクト形式になり、テキストを選択して実行する必要は
なくなりました。ファイル名も指定できるようになっています。
http://www.game3rd.com/dreamweaver/extensions/FIRECRACKER/02TextImage.htm
○ライブラリ項目の検索
ライブラリを使用したはいいが、どこのページに挿入したかわからない場合が
あると思います。この拡張機能はサイト内のライブラリ項目を検索して、
どのファイルのどの位置に挿入されているかレポートを作成します。
http://www.game3rd.com/dreamweaver/extensions/FIRECRACKER/03SearchLibItem.htm
○画像エフェクト
選択した画像にFireworksのコマンドを実行するDreamweaverのコマンドです。
選択した画像がFireworksによって作られたものである場合には、元のPNGファイルを
開いて、コマンドを実行します。ちゃんと別でPNGファイルに保存し、書き出し方法
も変更できるようになってます。
http://www.game3rd.com/dreamweaver/extensions/FIRECRACKER/04ImageEffect.htm
○サムネイルテンプレート
テンプレートで作成したHTMLの編集可能領域内のコンテンツを取り出して、
１つのHTMLにしてしまうコマンドです。いわば、テンプレートHTMLの
サムネイルを作る機能です。タイトルだけ抜き出して元のHTMLへリンクを
設定することもできるので見出しの作成にも使えます。
http://www.game3rd.com/dreamweaver/extensions/FIRECRACKER/01ThTemp.htm
☆現在、先行予約キャンペーンということで500円OFFで買うことができます。27日
までです。
http://www.easy.ne.jp/s-cafe/cd/cd-002.html
森川さん発行のメルマガもよろしくお願いします。FIRECRACKERについての最新情報を
知ることができます。
http://www.easy.ne.jp/cargo3/f_form/report.html
◆おしまい
===========================================================================
発行日を１６日と決めたのに１週間も遅れてしまいました。最近、SWFブラウザを
収録したいという雑誌が増えたので、Flash4のままだと悪いかなと思ってバージョン
アップさせてました。プログラミングは好きなので、これに没頭してメルマガを
書く時間を削ってしまいました。すみません。SWFブラウザは、プロテクトのかかって
いないSWFムービーのスクリプトと画像を見るツールです。
http://www.game3rd.com/soft/action/
SVGの出力はプレイヤーで再生できることを意識して作っていたんですが、
Illustator 10で読み込めるように調整する予定です。
===========================================================================
Dreamweaver Programming
発行、編集： 植木 友浩
登録、解除： http://www.game3rd.com/dreamweaver/mail/
注意： 記載された情報は各人の責任においてご利用ください。
この記事により生じるいかなる損害についても責任は
負いかねますのでご了承ください。
Copyright(C) 1999-2001. Tomohiro Ueki. All rights reserved.
===============================================[ Magazine ID: 0000021775 ]=
Thank you!
---------------------------------------------------------------------------
このメールマガジンは、インターネットの本屋さん『まぐまぐ』を利用して
発行しています。( http://www.mag2.com/ )
---------------------------------------------------------------------------
