Macromedia Fireworks MX の最もエキサイティングな新機能は、グラフィックウィザードです。この新しいウィザードを使えば、一つのデータソースから複数のグラフィックを作成できます。これにより、Web グラフィックの制作プロセスを自動化できます。MX がもたらす革命の真の成果とも言うべきグラフィックウィザードは、ユーザーインターフェイスが Flash でデザインされた Fireworks MX の拡張機能です。Dreamweaver MX を使って編集したデータやColdFusion MX を使って生成されたデータを利用することも可能にしています。それでは、このウィザードでどのようなことができるのかを詳しく見ていくことにします。

グラフィックウィザードは、XML ファイルと Fireworks のテンプレートに埋め込まれた変数とを組み合わせ、オリジナルのテンプレートに基づいて新しいグラフィックを生成します。中核となる1つのグラフィックをもとに、さまざまなバリエーションのイメージファイルを次から次へと大量に作成した経験がある方であれば、きっとこのグラフィックウィザードがお気に入りになるでしょう。

XML ファイル

グラフィックウィザードは標準フォーマットの XML ファイルを読み込み、使用します。これらのファイルは、データベースプログラム （Access 2002など） から書き出したり、Dreamweaver MX または一般のテキストエディターを使って手入力で作成したりすることができます。また、ColdFusion MX を使って、クエリーを XML ファイルに変換することもできます。XML ファイルのフォーマットは次のようなものです。
※日本語テキストを扱う場合、テキストエンコーディングは "utf-8" にします。

<?xml version="1.0" encoding="iso-8859-1"?>
  <records>
<record>
<varModel>ZX2002</varModel>
<image>luxury.png</image>
<url>http://www.triomotors.com/zx2002</url>
</record>
<record>
<varModel>M210</varModel>
<image>power.png</image>
<url>http://www.triomotors.com/zr2002</url>
</record>
</records>

2 つの <record> タグの間に 3 つの異なるフィールドが含まれていることが分かります。フィールド名は、varModel、image、url で、それぞれのタグの間にそのフィールドに関するデータが含まれています。一つの XML ファイルの中に必要に応じて複数のレコードとフィールドを記述することができます。

Fireworks でのグラフィックテンプレートを作成する

グラフィックテンプレートそのものは Fireworks MX で作成します。Fireworks のイメージソースファイルをテンプレートにするために必要な作業は、変数を追加することだけです。グラフィックウィザードは、{varModel} のように {} で囲まれたテキストを変数として認識します。このイラストウィンドウの例のように、必要な数だけ変数を記述でき、同じ変数が数箇所に出てきても構いません。

テキスト変数に加え、グラフィックウィザードは他にも2つのタイプの変数、すなわちイメージと URL を取り扱うことができます。イメージを変数にするには、まずイメージを選択し、プロパティインスペクタの[オブジェクト名の編集]テキストボックスに {varImage} のように {} で囲んだ固有の名前を入力します。URL の場合もやり方はほとんど同じです。スライスやホットスポットを選択し、{url} のような変数名を[リンク]テキストボックスに入力します。

変数の名前はどのようなものでも構いませんが、対応するデータフィールドで使われているものと同じ名前にするのが分かりやすいでしょう。たとえば、"lastName" という名前のデータフィールドがあったとすると、そのフィールドからのデータが出てくるところには {lastName} というような変数を使います。このような方法で変数の名前をつければ、作業の中のステップを1つ省略できます。

グラフィックウィザードを使用する：チュートリアル

それでは、グラフィックウィザードの使用法を、順を追って見ていきましょう。このチュートリアルに沿って実際に作業を進めていくには、まずサンプルファイル （XML ファイル1つ、Fireworks MX PNG ファイル1つ、いくつかのイメージファイルを含むフォルダー1つ） をダウンロードし、これらのファイルを専用のフォルダー内で解凍します。

この記事に必要なもの

このチュートリアルは、こちらのソフトウェアのインストールとサンプルファイルが必要です。

Macromedia Fireworks MX

• トライ
• 購入

チュートリアルとサンプルファイル:

 

最初に XM Lファイルと Fireworks MX テンプレート（前述のように変数を含む PNG ファイルです）ファイルが必要になります。ダウンロードしたサンプルファイルを使ってこのステップを行う場合、これらのファイルはすでに用意されていますので、Sample Template.png を開いてください（この後のステップではこのサンプルファイルを使うことを前提に進めていきますが、もちろん自分で用意したファイルを使っても構いません）。

テンプレートファイルを開いたら、[コマンド] - [グラフィックウィザード] を選びます。6つのステップからなるこのウィザードでは、それぞれのステップに対応するヘルプが用意されているので、テンプレートの中の変数と XML ファイルの中のフィールドをすばやく対応させることができ、複数のファイルを自動的に作成することができます。

グラフィックウィザードを開始する

最初の画面では、グラフィックウィザードがテンプレートファイルに含まれているすべての変数を表示します。

まず行う必要があるのは、[XMLデータファイルを選択してください:] フィールドの横にあるフォルダーアイコンを選択して、XML データファイルを特定することです。ここでは、Sample_Data.xml を選びます。次に、イメージ変数がある場合は置き換えるファイルを含むフォルダーを選びます。サンプルファイルを使っている場合であれば、sample_Imagesフォルダーを選びます。準備ができたら [次へ] を選びます。

XML ファイルのレコードとフィールドをレビューする

次に、ウィザードは XML データファイルの中に見つかったレコードを表示します。ビデオのコントロールボタンに似たインターフェイスでレコードを前後に進めることができます。この画面（下図参照）は、XML ファイル内のフィールドを特定するのに特に役立つのと同時に、処理する必要があるどんなレコードも特定することができます。[次へ] をクリックして次のステップに進みます。

処理するレコードを選択する

3つめのステップでは、処理したいレコードを選択します。[すべてのレコード] を選べば、そのデータファイルに含まれるすべてのレコードを処理することになります。[最初のレコードのみ] を選ぶと1番目のレコードのデータを処理します。特定のレコードを選ぶ場合は、[特定のレコード番号（カンマ区切り）] を選びます。レコードを指定する場合は、"1,3,5"、あるいは"2,4"のようにカンマで区切って数字を指定します。レコードの選択が終わったら、[次へ] をクリックします。

データフィールドをマッピングする

さて、ここからがグラフィックウィザードの最も重要なところです。Fireworks MX テンプレートの中の変数をXMLデータファイルのフィールドにマッピングします。前述したように、同じ名前の変数とフィールドであれば自動的にマッピングされます。リンクされていない変数をデータにマッピングするためには、[変数を選択してください] リスト上で変数名を選択し、次に [フィールドを選択してください] リスト上で、対応するフィールドを選びます。次に、[リンクの追加] ボタンをクリックして選択を確定すると、下にある [マッピング済み変数] リストに変数とフィールドの組み合わせが表示されます。[マッピング済み変数] リストから変数とフィールドの組合せを選択してから [リンクを削除] ボタンをクリックすれば、リンクを解除することもできます。変数のマッピングが完了したら、[次へ] をクリックします。

命名と書き出し

ここまで来ればほとんど完了です。ステップ5はしめくくりの作業で、ファイルの命名と書き出し先のフォルダーなどを指定するだけです。まず、生成されるファイルの命名スキームを選択します。命名スキームは、ベースとなるファイル名前に自動生成された番号が付いたものです。デフォルトでは、ベースとなる名前はテンプレートの名前から取られますが、またファイル名として有効なものであれば拡張子をつけない形で [ファイル名] フィールドに指定できます。次に、3つある自動番号割り付けパターン（先行の0を付けない方法、先行の0を一桁だけ付ける方法、先行の0を2桁つける方法）の中からいずれかを選びます。最後に、[開始値] を入力するか、何も入力せずにデフォルトのままにするかを指定します。

続いて、ドロップダウンリストの中から書き出しのタイプを選びます。デフォルトのオプションは [Template Export Settings] （テンプレートの書き出し設定）で、これは元になっているテンプレートに設定されている書き出し設定が使われるということです。ファイルを書き出すときには、あらかじめ書き出しファイルを格納するフォルダーを選択する必要があります。また、ソースのPNGファイルを生成するように指定するオプションもあり、このオプションを選んだ場合はそれらのファイルを格納するフォルダーも選択します。[次へ] をクリックし、最後のステップに進みます。

最終レビュー

最後のステップは今まで選択してきた内容の確認です。選択した内容を変更したければ、[戻る]を選んで、該当するステップまで戻ります。すべてが確定したら、[終了] を選び、グラフィックを生成します。ここで Fireworks はただちに処理を開始します。生成されたすべてのファイルは選択したフォルダーに格納されます。[最初のレコードのみ] レコードオプションを選んだ場合は、ファイルは開いた状態になります。

ウィザード処理をレビューする

生成されたファイル（このイラストレーションウィンドウ 参照） を開くと、すべての変数がXMLファイルの中で指定したデータに置き換えられているのが分かります。

変数イメージに1つ、あるいは複数のエフェクトが適用されている場合は、それらのエフェクトは代替のイメージにも適用されます。さらに、変数URLを伴うすべてのスライスは新しいアドレスにリンクされます。
ここまで見てきた作業はまるで魔法のように簡単なものでした。でもこれこそが Filreworks MX の素晴らしさなのです。

著者について