FireWorksで自動画像出力処理

シゴトでやったネタですが、まあ、あげちゃいます。

fireworks-cs3-070118.jpg
シゴトで、画像をたくさん書き出す必要がありました。
数にして、余裕で1,000を超えます。(フォーマット違いを入れると2,300以上になります)
その画像は入っているテキストがそれぞれ異なるもので、
要はwebでのタイトルやメニューに利用する画像なのですが、
さすがに手動でやるのはかなり非効率なので、(でも最悪それしかないかと思ってた)
自動化する方法を探していました。
photoshopで、ドロップレットによる自動処理があるのですが、
あくまでアクションの繰り返しであって、「サイズの変更」や「形式変更」「エフェクト追加」など
には有用なのですが、さすがに画像の中身までを書き換えることができません。
(知らないだけかもしれません。知ってる人いたら教えてください)
そこで、google先生に聞いてみたら、
FireWorksのグラフィックウィザードを活用する
FireWorksMXを使おう!グラフィックウィザード
データ駆動のグラフィックウィザードを使ったグラフィック生成を自動化する
を発見。なんと、FireWorksでできそうです。
結果、うまくいきましたので、一連の方法を紹介しておきます。
1.入れ込みたいテキストをXMLで用意する。
たとえば、画像に自動的にいれ込みたい文字が「アバウト」と「申込」だった場合、
以下のようなXMLファイルを作成します。

<?xml version=1.0 encoding=utf-8?>
<records>
<record>
<varName>アバウト</varName>
<varLen>4</varLen>
<filename>about</filename>
</record>
<record>
<varName>申込</varName>
<varLen>2</varLen>
<filename>apply</filename>
</record>
</records>

これは、
varNameを入れ込みたい文字列、
varLenは文字列の長さ、
filenameは画像出力時に利用する文字列としてセットした例です。
これをtitle.xmlとかなんとか、適当な名前をつけて保存します。
<注意点>
・日本語を扱うときは、UTF-8で保存しておく
・ちゃんとしたXMLじゃないと認識してくれません。文法しっかり。
2.テキストをいれ込む画像素材を用意する
これはfireworksで適当につくります。
今回は、こんな感じのタイトル画像っぽいやつを作ってみました。
その際、テキストツールで、

{varName}

と(半角中カッコ)で変数を定義しておきます。(この定義もエフェクトかけておくことができます)
fireworks1.gif
2.グラフィックウィザードを起動する
まずは、起動前に「ファイルを保存」する必要があります。
保存後、「コマンド」から、「グラフィックウィザード」をクリックします。
fireworks2.gif
すると、下記のようなダイアログが出てきます。
先ほど作成したXMLファイルを指定し、次へ。
fireworks3.gif
ちゃんと認識されていると、先ほど入れたデータが表示されます。
次に進むと、どのレコードに対して処理を行うか聞かれます。
個別に指定できますが、面倒なので、すべてを選択して次へ。
fireworks4.gif
ここが一番大事。変数とでXMLでのデータの紐付を行う場面ですが、
左側の変数と紐付るデータフィールドを指定し、「+」ボタンを押します。
すると、「マッピング済み変数」に変数とフィールドが結び付けられて格納されます。
fireworks5.gif
最後に、
ファイル名(これもデータフィールドから指定できますので、今回はfilename)
書き出しファイルの保存場所を選んで、「次へ」をクリックします。
fireworks6.gif
fireworks7.gif
内容を確認して、「終了」をクリックすると、画像生成が始まり、自動的に書き出されていきます。
おかげで人力なら2週間コースでかかるものが、3日間くらいで終えることができました。
web制作などで画像をたくさん作る必要がある人にとっては、とっても便利な機能です。
テキストの流し込みだけではなく、URLの指定や画像のセットも変数化できるようなので、
いろんなことが自動処理で可能になります。
::追記::
ファイル名をパラメータで扱うようにするには、XMLを用意していれ込むだけではだめみたいです。
ベースとなるファイルに変数を追加して、マッピングまでしてあげる必要があります。
(実際は、表示されると困るので、マッピングした変数は透明度100%にしておけばOK)