Every little helps

だいぶ時間があいてしまいました。
ちょうど「これは保存版でしょ！」というネタに遭遇したので、
備忘とこれから歩む人のために残しておきます。

シゴトで、画像をたくさん書き出す必要がありました。
数にして、余裕で1,000を超えます。（フォーマット違いを入れると2,300以上になります）

その画像は入っているテキストがそれぞれ異なるもので、
要はwebでのタイトルやメニューに利用する画像なのですが、
さすがに手動でやるのはかなり非効率なので、（でも最悪それしかないかと思ってた）
自動化する方法を探していました。

photoshopで、ドロップレットによる自動処理があるのですが、
あくまでアクションの繰り返しであって、「サイズの変更」や「形式変更」「エフェクト追加」など
には有用なのですが、さすがに画像の中身までを書き換えることができません。
（知らないだけかもしれません。知ってる人いたら教えてください）

そこで、google先生に聞いてみたら、
FireWorksのグラフィックウィザードを活用する
FireWorksMXを使おう！グラフィックウィザード
データ駆動のグラフィックウィザードを使ったグラフィック生成を自動化する
を発見。なんと、FireWorksでできそうです。

結果、うまくいきましたので、一連の方法を紹介しておきます。

1．入れ込みたいテキストをＸＭＬで用意する。

たとえば、画像に自動的にいれ込みたい文字が「アバウト」と「申込」だった場合、
以下のような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}

と（半角中カッコ）で変数を定義しておきます。（この定義もエフェクトかけておくことができます）

2．グラフィックウィザードを起動する

まずは、起動前に「ファイルを保存」する必要があります。
保存後、「コマンド」から、「グラフィックウィザード」をクリックします。

すると、下記のようなダイアログが出てきます。
先ほど作成したXMLファイルを指定し、次へ。

ちゃんと認識されていると、先ほど入れたデータが表示されます。
次に進むと、どのレコードに対して処理を行うか聞かれます。
個別に指定できますが、面倒なので、すべてを選択して次へ。

ここが一番大事。変数とでXMLでのデータの紐付を行う場面ですが、
左側の変数と紐付るデータフィールドを指定し、「＋」ボタンを押します。

すると、「マッピング済み変数」に変数とフィールドが結び付けられて格納されます。

最後に、
ファイル名（これもデータフィールドから指定できますので、今回はfilename）
書き出しファイルの保存場所を選んで、「次へ」をクリックします。

内容を確認して、「終了」をクリックすると、画像生成が始まり、自動的に書き出されていきます。

おかげで人力なら2週間コースでかかるものが、3日間くらいで終えることができました。
web制作などで画像をたくさん作る必要がある人にとっては、とっても便利な機能です。

テキストの流し込みだけではなく、URLの指定や画像のセットも変数化できるようなので、
いろんなことが自動処理で可能になります。