Fireworksのスクリプト実行を使いこなすために

こんにちは、ピグディビジョンでフロントエンドの開発を担当しているHAKASHUN(@HAKASHUN)です。

今回は、Fireworksにおけるスクリプト実行についてお話したいと思います。



Fireworksにおけるスクリプト実行とは?



Fireworksでは、[コマンド] > [スクリプトを実行]で、.jsfという拡張子のファイルを実行することができます。

.jsfという拡張子はFireworksオリジナルのファイル形式ですが、中身はJavaScriptであるため、Fireworksの様々な機能を、JavaScript言語で制御することができます。

多数のレイヤに対して反復して同じ作業を行いたいときや、ピクセル単位の計算を正確に作業に反映させたいときなどに、時間のコストや作業ミスのリスクを軽減してくれます。



簡単なスクリプトを作って実行してみる

事始めとして、下記の画像のような簡単な図形を描画しておき、スクリプトを使って100個のレイヤを複製してみます。

square

.jsfファイルを作成して、その中に実行したいスクリプトを記述していくのですが、初めは、実際に何をどのように書けばいいのかわからないと思います。Adobeが公式に出しているリファレンスもあるのですが、現在英語のものしか存在していません。



ヒストリーパネルを使って、jsfファイルに何を書けばよいのかのヒントを掴む。

右も左もわからない状況から脱するために、ヒストリーパネルを活用することにします。ヒストリーパネルには、Fireworksの一つ一つの処理で行われているスクリプトをクリップボードにコピーしてくれる機能があり、スクリプトを書く上での大きな助けとなります。



square



今回は、図形を[コピー]し、[ペースト]する作業を複数回実行するスクリプトをつくるため、まずは普段Fireworksでしているのと同じように、１回だけ図形をコピー&ペーストし、その処理スクリプトをクリップボードにコピーすることにします。



historyPanel



上記画像の枠線内のボタンをクリックすると、コピーとペースト処理がクリップボードにコピーされます。



.jsfファイルを作成する。

コピーが完了したら、任意の名前（ここではcopyAndPaste.jsf）で.jsfファイルを作成し、エディタを開いて編集していきます。

先ほどコピーしたスクリプトをエディタ上でペーストすると、以下の記述が貼付けられます。



fw.getDocumentDOM().clipCopy();
fw.getDocumentDOM().clipPaste("ask user", "vector");


1行目で、選択状態のオブジェクトをコピーし、２行目でコピーしたオブジェクトをペーストしています。

これを100回実行すれば、100個のレイヤが複製されるため、さらにjavaScriptのfor文を使って、内容を以下のように編集します。



for(var i = 0; i < 100; i++){
    fw.getDocumentDOM().clipCopy();
    fw.getDocumentDOM().clipPaste("ask user", "vector");
}


これで、1つのオブジェクトから、100個のレイヤを複製するスクリプトが完成しました。



作成したスクリプトを実際に使ってみる

それでは、実際に作成したスクリプトを使って、オブジェクトのレイヤを100個複製してみます。







[コマンド] > [スクリプトを実行]を選択し、作成したjsfファイルを選択すればスクリプトが実行されます。







無事に想定した処理を実行することができました。





jsfスクリプト作成の手順や考え方[初級編]

上記簡易サンプルでは、主に２つの手順にわけてスクリプトを組み立てていきました。



approach



  1. 実行させたい処理を分割して考え、それぞれがどのように行われているのかをヒストリーパネルでクリップボードにコピーする。
  2. 上記でコピーした一つ一つの処理とJavascriptを組み合わせて、思い通りの処理を実行するスクリプトを組み立てる。


実にシンプルな例でしたが、このようにまずは簡単な図形などで試していくと、Fireworksの様々な処理がどのようなスクリプトで実行されるのかの理解を効率よく深めていけると思います。



少し複雑なスクリプトを作って実行してみる

次にもう少し複雑なスクリプトに挑戦してみたいと思います。

ちょうど先日、
  • 一つのレイヤ群から大量のカラーバリエーションを作成し、
  • なおかつレイヤー名も決められた規則でつけていく
というスクリプトを作成する機会があったので、それをモデルにして、複雑なスクリプトを作成する際に、有用な情報をお伝えできればと思います。



DOM Inspectorをインストールする

DOM Inspector(http://fireworks.abeall.com/extensions/panels/#DOM-Inspector)

複雑な処理を実行するには、Fireworksの内部構造をできるだけ理解する必要があります。DOM Inspectorは、FireworksにおけるGUIでの操作で、内部状態がどのようになっているのかを表示してくれるツールです。スクリプトを組み立てていくのに大変役に立ちます。

上記リンクから、swfをダウンロードし、Fireworksアプリケーションフォルダ内のCommand Panelsフォルダの中に入れることで、インストールすることができます。





Fireworksを再起動すれば、上部メニューの[ウィンドウ]リストに[DOM Inspector]欄が追加されています。 DOM Inspectorを表示した状態で、オブジェクトを選択などすると、Fireworksがどのように情報を持っているのか確認することができます。







例えば、jsfファイルの中で、opacityの値を変更する処理を書けば、スクリプトを用いて不透明度を変化させることができるし、カンバス上での位置やオブジェクトの大きさ、色なども、スクリプト上でどの値を操作すれば変更できるのか確認することができます。例として簡単なスクリプトを以下に掲載しました。

var select = fw.selection[0]; //選択している要素を取得
select.opacity = 10;
select.top = 0;
select.left = 0;




Javascriptに精通している人であれば、DOM Inspectorの内容を見て、かなり高度な処理スクリプトを記述できると感じるはずです。初めは.jsfファイルに何を書けばいいか全くわからなかったと思いますが、ここまででグッとFireworksスクリプトへの苦手意識が小さくなったはずです。

一つのオブジェクトから、大量のカラーバリエーションを作成するスクリプト

DOM Inspectorという強力な味方を手にした所で、本題のスクリプトを書いていきます。 このスクリプトは、あらかじめ下記のようなレイヤ構成のカラーセット(color_0)があったとして、色の異なるバリエーションcolor_1、color_2をスクリプトによって作成するものを目指します。







以下、ポイントだけを絞ってスクリプトの説明をさせていただきます。

レイヤをコピーし、命名規則に従って名前を変更するスクリプト

はじめに、色の変更処理は後回しにして、カラーセットごとにレイヤをコピーし、命名規則に従って名前をつけるスクリプトを作成します。

var dom = fw.getDocumentDOM(); //color_0レイヤーを取得
var colorNum = 3; //カラーバリエーションの数

for(var i = 1; i < colorNum; i++){
    dom.duplicateLayer(-1, 1, "after current"); //レイヤーを複製
    var layer = dom.layers[dom.currentLayerNum];
    layer.name = 'color_' + i; //複製したフォルダ名を変更
    var selects = fw.selection; //複製したフォルダ内のオブジェクトを選択
    for(var j = 0; j < selects.length; j++){
        selects[j].name = 'color_'+ i +'_' + j;//オブジェクト個々の名前を変更
    }
}


dom.duplicateLayer(-1, 1, "after current")で、color_レイヤーを複製し、layer.name = 'color_' + i;で、color_1、color_2という名前を最上位レイヤにつけています。 var selects = fw.selection;で、カラーセット内のオブジェクトを全て取得し、その次のfor文の中で、オブジェクトの名前を命名規則に従ってつけています。

このスクリプトを実行すると、以下のようになるはずです。







色を置き換える処理を付け加える

レイヤを複製し、それぞれのレイヤ、オブジェクトの名前を変更できた所で、色を置き換える処理を付け加えます。 color_0は、4種類の赤色を使っているので、color_1、color_2のカラーセット用にもそれぞれ4つの色を定義します。

var colorSet = [
    ['#FFBFBF', '#FF7373', '#FF2626', '#D90000'],
    ['#BFCFFF', '#7297FF', '#1D5DFF', '#0036E1'],//color_1の色セット
    ['#C4FFB8', '#82FF5A', '#52FF00', '#3DD900']  //color_2の色セット
];
次に、この配列定義を用いて、for文でオブジェクトの名前を変更する際に色の変更も行うようにします。 DOM Inspectorで確認すると、オブジェクトの色は、fw.selection.pathAttributes.fillColorで定義されていたので、その値を変更するようにします。





for(var i = 1; i < colorSet.length; i++){
    dom.duplicateLayer(-1, 1, "after current");
    var layer = dom.layers[dom.currentLayerNum];
    layer.name = 'color_' + i; //コピーしたフォルダ名を変更
    var selects = fw.selection; //コピーしたフォルダ内のレイヤーを選択

    for(var j = 0; j < selects.length; j++){
        selects[j].name = 'color_'+ i +'_' + j;//レイヤー個々の名前を変更
        //▼オブジェクト個々の色を配列定義に基づいて変更
        selects[j].pathAttributes.fillColor = colorSet[i][j];
    }
}
これで、本題のスクリプトが完成しました。最終的に完成スクリプトは以下のようになります。
var colorSet = [

    ['#FFBFBF', '#FF7373', '#FF2626', '#D90000'],
    ['#BFCFFF', '#7297FF', '#1D5DFF', '#0036E1'],//color_1の色セット
    ['#C4FFB8', '#82FF5A', '#52FF00', '#3DD900']  //color_2の色セット
];

for(var i = 1; i < colorSet.length; i++){
    dom.duplicateLayer(-1, 1, "after current");
    var layer = dom.layers[dom.currentLayerNum];
    layer.name = 'color_' + i; //コピーしたフォルダ名を変更
    var selects = fw.selection; //コピーしたフォルダ内のレイヤーを選択

    for(var j = 0; j < selects.length; j++){
        selects[j].name = 'color_'+ i +'_' + j;//レイヤー個々の名前を変更
        selects[j].pathAttributes.fillColor = colorSet[i][j]; //オブジェクト個々の色を変更
    }
}
簡単なJavascriptとDOM Inspectorが表示してくれるFireworks内部の構造を使って、複雑な処理を一瞬で仕上げてくれるスクリプトができました。 実際に実行しても、ちゃんと期待する結果が反映されます。







jsfスクリプト作成の手順や考え方[上級編]

初級編ではjsfスクリプト作成のポイントとして、以下の２つをあげました。

  • 実行させたい処理を分割して考え、それぞれがどのように行われているのかをヒストリーパネルでクリップボードにコピーする。
  • 上記でコピーした一つ一つの処理とJavascriptを組み合わせて、思い通りの処理を実行するスクリプトを組み立てる。
より高度なjsfスクリプトを作成する場合は、さらに、
  • DOM Inspectorを用いてFireworks内部の構造やデータの持ち方を理解する
ことが不可欠になります。少し難しいですが、コツをつかむことができれば、サンプルスクリプトのようにシンプルな記述で大幅に時間とミスを縮小してくれるスクリプトを作ることができると思います。

jsfスクリプト特有のメソッドやプロパティに慣れ親しめば、英語で書かれた公式Fireworksドキュメントも少しずつ理解できるようになるはずです。



最後に

Fireworksを長年使っている人でも、あまりチャレンジしたことがないスクリプト実行についてお話しました。

普段カーソルを動かして実行している様々な処理を、スクリプトを使って実行するのは、特に単調な反復処理を一気に終わらせる際に大変便利です。 私自身も以前、単純作業でも、絶対にミスのできない処理を大量にしなければならない際に、先輩にスクリプトを作成してもらい、大変感激したことがありました。

中々文献の少ないjsfスクリプトですが、少し頑張って探せば、公開されている便利なスクリプトを見つけることができます。ダウンロードしてスクリプトの中身を読んだり、自分なりにカスタマイズするのも大変勉強になると思います。

ぜひjsfスクリプトでもっともっとFireworksを使いこなしてみましょう^^

最後まで読んでいただき、ありがとうございました！



------------------------------------------

written by HAKASHUN

twitter:@HAKASHUN

Blog: http://hakashun.net/