第2回 WebデザイナーもFlexを使おう！

Flex Builder 3ってWebデザイナーでも使えるの？

　Flex Builder3は、AIRと併せてWebデザイナー向け雑誌で多く取り上げられ、話題になっています。しかし、WebデザイナーはFlash CS3を使っていますので、あまり必要性を感じていない方も多いのではないでしょうか。今回は、その辺りを検証しながら進めていきたいと思います。

　「第1回：Flex Builder 3って何ができるの？（http://www.thinkit.co.jp/article/102/1/）」では、文字表示だけの簡単なSWFファイルをFlex Builder 3で作成しました。その際、「デザインモード」で作業したように、Flex Builder 3ではデザインを確認しながら作業を行うことができます。

　作業を行うためのモードですが、この「デザインモード」コードを編集するための「ソースモード」の2種類モードがあります。この「デザインモード」と「ソースモード」の関係が、Dreamweaverの「デザインビュー」と「コードビュー」の関係に近いので、Webデザイナーの方でもなじみやすいインターフェースになっていると思います。では、前回作成した文字表示しただけの「firstProject」の「ソースモード」の内容を確認してみましょう（図1）。

ソースモードの記述内容

　図1が、「ソースモード」の記述内容です。

　見慣れない記述だと思いますが、実際に内容を確認すると意味が理解できる個所も多いかと思います。ここ記述されているのが、MXMLと呼ばれているXML言語です。MXMLを使うと、後述するFlexコンポーネントという部品を配置することができます。

　Webデザイナーの方は、XHTMLをご存じだと思いますが、MXMLもXHTMLと同様のマークアップ言語ですので、すぐに内容を理解することができると思います。

　例えば、図1のMXMLの記述ですが、ラベル（文字表示）機能をX座標「149.5」、Y座標「52」に配置し、テキストの内容「Flex Builder 3」を、フォントサイズ「22」、文字色「白」で表示するという内容を読み取ることができます。

<mx:Label x="149.5" y="52" text="Flex Builder 3" fontSize="22" color="#FFFFFF" />

　そのため、「ソースモード」からでもラベルの設定情報を変更することができますし、「デザインモード」からラベルの設定情報を変更できますので、Webデザイナーの方でも感覚的に使える部分が多いツールとなっています。

　次のページでは、コンポーネントについて説明します。