SWF,SVG書き出し
2000/10/23
=====================================================[ No.09 2000/10/23 ]==
Dreamweaver Programming < SWF,SVG書き出し >
[ BACK NUMBER ]
http://www.game3rd.com/dreamweaver/mail/
===========================================================================
◆本が出ました
===========================================================================
今月の13日から、カスタマイズ本が発売されました。迷彩色の表紙なので、目立つの
か目立ってないのか微妙なところです。(^^;Design Book や Flash と３つセットで
並んでいるのをよく見かけます。
DREAMWEVER WEB MASTERING BOOK
ISBN4-88135-954-1 3400円(税別) 翔泳社
Amazon.com
http://www.amazon.co.jp/exec/obidos/ASIN/4881359541/
◆UCON終わりました
===========================================================================
UCONが終わりました。どうもうまくしゃべれなくて、Fireworksは全然ダメでした。
また、声が小さくて、聞きにくかったと思います。資料はそれなりに用意していた
んですが、練習不足でした。次は、もっとうまくしゃべれるようになりたいです。
詳細はまだ決まっていませんが、今度、大阪でやる予定になってます。
◆セミナーします
===========================================================================
UCONのリベンジということで、今度は大阪でします。Dreamweaverのカスタマイズの
導入部分をやろうと思ってます。カスタマイズできる部分とできない部分の紹介、
カスタマイズすれば何が作れるかを説明しようと思います。
★★★★★★★★ 今世紀最後で最大のWeb構築イベント ★★★★★★★
★ ★
★ 「Webサイト構築最前線！！ ★
★ 〜WebページデザインからWebサイトデザインへ〜in OSAKA」 ★
★ ★
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
■日 時：2000年12月18日（月）10：30開場 11：00開演〜20：00終了
（途中入退場可）
■場 所：大阪厚生年金会館芸術ホール
（大阪市西区新町1-14-15,TEL.06-6532-6301,地下鉄四ツ橋駅・本町駅
から徒歩5分）<http://plaza8.mbn.or.jp/~matuo/map/map.html>
■出演者：森川 眞行（Silicon Cafe' 代表）<http://www.siliconcafe.com/>
植木 友浩（WEB PROGRAMMER）<http://www.game3rd.com/>
手嶋 雅夫（マクロメディア（株）代表取締役）
阿部 成行（マクロメディア（株）プロダクトマーケティングマネージャ）
<http://www.macromedia.com/jp>
神田 敏晶（Kanda News Network代表）<http://www.knn.com>
岸本 栄司（（有）イージー代表取締役）<http://www.easy.ne.jp/>
司会進行：菅原 裕（Creators Net代表）
■参加可能人数：申込先着順1000名
■参加対象者：Webサイト制作に興味の有る方
Webマスター、Webデザイナー、Webプランナー等
Eビジネスを志向される企業担当者
■参加費用：事前振込3,700円（当日払4,500円）
■詳細情報・お申込方法：下記URLからお申込の上、参加費用をお振込下さい。
<http://www.sohowest.net/1218/>
■お振込先：
三和銀行 四条大宮支店 普通 ３８０３１２４ 振込先名：関西ソーホー
または、郵便振込
記号１４４００ 番号３２６３３５４１ 振込先名：関西ソーホー
■主催：関西ソーホー・デジタルコンテンツ事業協同組合
<http://www.kansai-soho.or.jp/>
■セミナー事務局・問合せ先
大阪市西区北堀江１−２１−１１ 山名ビル５Ｂ
有限会社ウエストプランニング内
関西ソーホー・デジタルコンテンツ事業協同組合セミナー事務局
担当：塩見・竹森
TEL 06-4391-7155 FAX 06-4391-7156
e-Mail：<mailto:mark@sohowest.net>
＜タイムスケジュール＞
10：30 開場
11：00 開演
手嶋社長の基調講演：60分
12：00 お昼休憩：45分
12：45 Fireworks 基本編
Fireworks クリエイティブ編
Dreamweaver 基本編
Dreamweaver & Fireworks サイト構築編
Dreamweaver & Fireworks カスタマイズ
（途中休憩込みで5時間30分）
18：15 休憩(15分)
18：30 パネルディスカッション
20：00 終了
◆GoLive 5
===========================================================================
GoLive 5が発売されましたね。早速購入しました。カスタマイズできるので、
試しに作りました。
http://www.game3rd.com/golive/target.zip
ページ中のターゲットを統一するコマンドです。
Dreamweaver に比べると、カスタマイズはかなりできるんですが、独自仕様な部分
多いので、敷居が高いです。Dreamweaverだと、HTML,XML,JavaScriptがわかれば
できるんですが、GoLiveでは、SDKが製作段階で、アンドキュメントな部分が多い
です。また、DOMが使えないので、ドキュメントの編集はかなり面倒です。
と悪口ばかりなんですが、サイト管理に関しては全然 Dreamweaver より上です。
ページ編集は Dreamweaver、サイト管理は GoLive だと思います。
◆拡張ファイルの新作
===========================================================================
前回のメルマガの発行している間に作成した拡張ファイルです。UCONで見せるために
作った拡張ファイルです。
○ODBC経由でグラフ作成オブジェクト
前回作ったオブジェクトでは、表を作るだけだったのですが、Fireworksと連携して
グラフを作成するようになりました。対応フォーマットは、GIF,JPGです。また、JS
Extension を利用して、SWF,SVGを書き出すようにしてます。あまり使い道はあり
ませんが、Dreamweaver上で、こんなこともできるよっていうサンプルです。
データベースと連動しているので、応用はいろいろとできると思います。こんなグラフ
を作って欲しいという方がいましたら、ご連絡下さい。
○選択したテキストをSWF変換コマンド
選択したテキストを SWF に変換するコマンドです。単純に変換するだけでなく
Swishのようなアニメーションを設定することができます。
http://www.game3rd.com/dreamweaver/
からダウンロードして下さい。
先週から Extension Manager対応バージョンを作るようになりました。Extension
Managerを使えば、簡単にインストールできます。Extension Managerはマクロメ
ディアのサイトからダウンロードできます。
http://www.macromedia.com/exchange/dreamweaver/
このサイトには、海外の拡張ファイルもたくさんあるので便利です。僕の拡張
ファイルも３つほど登録しました。日本人の登録者は僕以外にいないので、少し
寂しいです。(^^;
◆追加した拡張ファイルの解説
===========================================================================
○ODBC経由でグラフ作成
このオブジェクトは、４つのファイルでできています。
ODBCGraph.htm(オブジェクト)
ODBCGraph.gif
ODBCGraph.htm(コマンド)
ODBCGraph.js
オブジェクトのパレットから、オブジェクトを選択するとオブジェクト内の処理が
実行されます。オブジェクト内では、ODBCGraph コマンドを呼び出しているだけで
何もしません。コマンドの呼び出した結果をそのまま戻り値にしています。
function objectTag()
{
var odbcCmdURL = dreamweaver.getConfigurationPath() +
"/Commands/ODBCGraph.htm";
var odbcDoc = dreamweaver.getDocumentDOM( odbcCmdURL );
dreamweaver.popupCommand( "ODBCGraph.htm" );
return( odbcDoc.parentWindow.getObjectTag() );
}
コマンドの呼び出しには、dreamweaver.popupCommand() 関数を使います。
引数にファイル名を指定します。相対パスで指定した場合は、Configuration/
Commands が基点になります。
コマンドの戻り値を取得する方法は、DOM オブジェクト内の parentWindows で
document オブジェクトを取得しています。このオブジェクトを使えば、コマンド内
の関数を呼び出したり、変数を取得することができます。
コマンドを呼び出すと最初に、接続可能なODBCの一覧を表示します。このあたりは、
前回の表を作成するオブジェクト同じで、クェーリーの発行方法も同じです。違う
のはデータを取得した後の動作です。「データの抽出」を押すとクェーリーを発行し
てデータの取得行い、レイヤーの表示を切り替えます。実際のソースは下のように
なっています。
if( getRecordSet() )
{
// レイヤーの切り替え
findObject( "odbcLayer" ).visibility = "hidden";
findObject( "exportLayer" ).visibility = "visible";
var sublabel = findObject( "sublabel" );
var record = gRecordSet[ 0 ];
// 見出しリストボックスの設定
for( i = 0; i < record.length; i++ )
sublabel.options[ i ] = new Option( record[ i ] );
sublabel.selectedIndex = 0;
}
else
{
alert( "レコードの抽出に失敗しました" );
}
getRecordSet() 関数でデータの抽出を行い、成功した場合には、レイヤーの表示を
切り替えています。また、見出しとする項目を選択するためのリストボックスの初
期化を行っています。
書き出し設定用のフォームが表示されるので、書き出しの設定を行います。書き出
すフォーマットによって実行する処理が変わります。GIF,JPGはFireworks、SWF,SVG
は JS Extension で処理します。「書き出し...」ボタンを押すと、以下のように、
フォーマットの拡張子を見て、それぞれの処理に分岐しています。
if( gSourceFormatSelection == "swf" )
{
createFlash();
}
else if( gSourceFormatSelection == "svg" )
{
createSVG();
}
else
{
createImage();
}
順に書き出し方法を見ていきます。 crateFlash() 関数内は、このようになってい
ます。
// フォームの入力値を読み取る
var expFolder = findObject( "expFolder" ).value;
var filename = findObject( "filename" ).value;
var savename = expFolder + filename + ".swf";
var width = findObject( "width" ).value;
var height = findObject( "height" ).value;
var title = findObject( "titlelabel" ).value;
var subindex = findObject( "sublabel" ).selectedIndex;
// Flash書き出し
SWFLaunch.SWFGraph( gRecordSet, width, height, savename, title, subindex );
// 挿入するタグの設定
resultTag = "<embed src=\"" + RelactivePath( dw.getDocumentPath(
"document" ), savename ) + "\" width=\"" + width + "\" height=\"" +
height + "\" ><\/embed>";
// ダイアログを閉じる
window.close();
最初にフォームの設定を読み取り、そのあとに SWFLaunch オブジェクトの SWFGraph
関数を呼び出しています。データ、幅、高さ、保存ファイル名、タイトル、見出しの
順で引数を設定し、実行すると、ファイルを書き出しします。エラーが発生した場合
はこの関数で処理が終了するようになってます。ファイルができたら、そのファイルを
ページに挿入すルためのタグを resultTag に設定してます。この変数は、オブジェクト
から呼び出している getObjectTag() 関数が返す戻り値になっていて、getObjectTag()
関数は以下のようになってます。
function getObjectTag()
{
return resultTag;
}
SVG書き出しもSWF書き出しと同じような処理になっていて、設定するタグとファイ
ルを生成する関数が違うだけです。createSVG()関数は以下のようになってます。
// フォームの入力値を読み取る( SWF書き出しと同じ )
var expFolder = findObject( "expFolder" ).value;
var filename = findObject( "filename" ).value;
var savename = expFolder + filename + ".svg";
var width = findObject( "width" ).value;
var height = findObject( "height" ).value;
var title = findObject( "titlelabel" ).value;
var subindex = findObject( "sublabel" ).selectedIndex;
// SVG書き出し
tomochan.SVGGraph( gRecordSet, width, height, savename, title, subindex );
// 挿入するタグの設定
resultTag = "<embed src=\"" +
RelactivePath( dw.getDocumentPath( "document" ), savename ) +
"\" width=\"" + width + "\" height=\"" +
height + "\" ><\/embed>";
// ダイアログを閉じる
window.close();
SVG書き出しの関数も関数名が違いますが、引数の種類はまったく同じになってます。
目的が同じなので、同じ引数になるのは当然なんですが、ファイルを生成している
関数内では、SWFはMacromediaのクラスライブラリ、SVGはMicrosoftのXMLエンジンを
使ってます。
最後に GIF,JPG書き出しです。最初のフォームの入力値を読み取る部分までは同じで
すが、ファイルを生成するスクリプトも Dreamweaver側で作っていて、また、
Fireworksの終了待ちがあるので、ちょっと複雑な処理になってます。
// Fireworksが起動中かどうか調べる。gProgressTrackerはFireworksの連携
// オブジェクト
if( gProgressTracker != null )
{
alert( "現在実行中です。" );
return;
}
// カーソルを砂時計に
MM.setBusyCursor();
// Fireworksに送るコマンドの生成
var i,j;
var jsfString = "";
// 入力フォームの内容を読み取る
var pngFolder = findObject( "pngFolder" ).value;
var expFolder = findObject( "expFolder" ).value;
var title = findObject( "titlelabel" ).value;
var subindex = findObject( "sublabel" ).selectedIndex;
var doc = dw.getDocumentDOM();
var bgcolor = doc.body.getAttribute( "bgcolor" );
dw.releaseDocument( doc );
var filename = findObject( "filename" ).value;
var width = findObject( "width" ).value;
var height = findObject( "height" ).value;
// -- Fireworksに送るコマンドの生成、引数を設定するスクリプトを記述
jsfString += "var bgcolor = \"" + bgcolor + "\";\n";
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 title = \"" + title + "\";\n\n";
jsfString += "data = new Array();\n";
for( i = 1; i < gRecordSet.length; i++ )
{
var rec = gRecordSet[ i ];
var num = i - 1;
jsfString += "data[ " + num + " ] = new Array( \"" +
rec[ subindex ] + "\"";
for( j = 0; j < rec.length; j++ )
{
if( j != subindex )
{
jsfString += ", " + rec[ j ];
}
}
jsfString += " );\n";
}
jsfString += "\n";
//--------------------------------- ここまで
// 引数を元にグラフを生成するスクリプトと連結
jsfString += DWfile.read( dw.getConfigurationPath() +
"/Commands/ODBCGraph.js" );
// Configuration/Commands にコマンドを保存
jsfPath = dw.getConfigurationPath() + "/Commands/ODBCGraph.jsf";
DWfile.write( jsfPath, jsfString );
// コマンドを実行
gProgressTracker = FWLaunch.execJsInFireworks( jsfPath );
// 戻り値が null または、エラーコードが帰ってきた場合はアラートを表示
if( gProgressTracker == null ||
typeof( gProgressTracker ) == "number" )
{
alert( "エラーが発生しました" );
window.close();
}
else
{
// Fireworks を前面に表示
FWLaunch.bringFWToFront();
// Fireworksの処理の終了チェック
checkOneMoreTime();
}
この関数でポイントなのは、Fireworks に送るコマンドの生成部分です。Dreamweaver
側で、引数だけを設定し、グラフの描画部分は、設定したの引数を元にグラフを描画
するスクリプトを用意して、それと一緒にしてひとつのコマンドを生成しています。
Dreamweaver で、全部処理を任せて逐次処理のスクリプトを生成することもできます
が、引数だけを設定して、この引数を元に動くコマンドを生成させるが一番いい方法
だと思います。この方法だと、Fireworks で作ったコマンドを引数で動く形変換すれ
ば、後はDreamweaver から引数を設定する部分を書けばいいだけなので、
プログラマーとデザイナーとのやりとりも容易です。
コマンドを実行している間は、Dreamweaver 側で、Fireworks が終了したかどうか
調べなければなりません。checkOneMoreTime() 関数では、setTimer()関数 を
使って checkJsResponse() 関数を定期的に呼び出してFireworks が終了したかどう
か調べています。
// コマンドの実行が終了したかどうか調べる
if (gProgressTracker != null)
gResponse = FWLaunch.getJsResponse( gProgressTracker );
if (gResponse == null)
{
// 終了していない場合はもう一度タイマーをセット
checkOneMoreTime();
}
else
{
// Dreamweaver を前面に表示
FWLaunch.bringDWToFront();
// カーソルを元に戻す
MM.clearBusyCursor();
// 数値が返った場合はエラー
if (typeof(gResponse) == "number")
{
alert( "エラーが発生しました\n- " + number );
}
else
{
// 正常終了したので、ページに挿入するタグを生成する
var filename = findObject( "expFolder" ).value +
findObject( "filename" ).value;
var width = findObject( "width" ).value;
var height = findObject( "height" ).value;
resultTag = "";
for( var i = 0; i < ( gRecordSet.length - 1 ); i++ )
{
var savename =
RelactivePath( dw.getDocumentPath( "document" ),
filename + "_f" + i + gSourceExtension );
resultTag += "<img src=\"" + savename + "\" width=\"" +
width + "\" height=\"" + height + "\" >";
}
}
// ダイアログを閉じる
window.close();
}
Fireworksの終了を調べるには、FWLaunch.getJsResponse() 関数を使います。
この関数の引数には、Fireworksのコマンドを実行するときに呼び出した
FWLaunch.execJsInFireworks() 関数の戻り値を設定すると、コマンドが終了したか
どうかわかります。戻り値が null の場合は、まだ実行中で、数値が返った場合は
エラーになり、文字列が返った場合は正常終了です。
正常に終了した場合に文字列が返ってきますが、この文字列はコマンドで最後に実行
した処理の結果が返ってくるようになっているので、Fireworks 側からDreamweaver
に渡したい値がある場合は、Fireworksのコマンドの最後の行に
x,y;
としてやれば、 x,yの値が返るようになっています。このコマンドでは使っていま
せん、画像のサイズの取得や、Fireworksのディレクトリ調べる場合に使ったことが
あります。
GIF,JPGでグラフを生成した場合は、レコードごとに画像を生成するようになってい
るので複数のIMGタグを挿入するようになっています。
以上で、ODBC経由でグラフ作成 コマンドの説明を終わります。説明が長くなった
ので、選択したテキストをSWF変換コマンドは、次回にします。
◆おしまい
===========================================================================
今回のメルマガは途中まで書いていて、間が1ヶ月も空いてしまい何を書いていたか
結構忘れてました。(^^;文章がつながってなかったら申し訳ないです。
次回は、セミナー前には出そうと思ってます。最近、コマンドは頼まれて作ることが
多くなって、オリジナルを作ることが少なくなりました。公開できないのは残念で
すが、いろいろあるので、仕事で興味がある方は聞いて下さい。
===========================================================================
Dreamweaver Programming
発行、編集： 植木 友浩
登録、解除： http://www.game3rd.com/dreamweaver/mail/
注意： 記載された情報は各人の責任においてご利用ください。
この記事により生じるいかなる損害についても責任は
負いかねますのでご了承ください。
Copyright(C) 1999-2000. Tomohiro Ueki. All rights reserved.
===============================================[ Magazine ID: 0000021775 ]=
Thank you!
---------------------------------------------------------------------------
このメールマガジンは、インターネットの本屋さん『まぐまぐ』を利用して
発行しています。( http://www.mag2.com/ )
---------------------------------------------------------------------------
