連載 :
  Flash×AIR

FlashデザイナだってFlex!

2008年6月20日(金)
舛原 盛元

Flex?XMLって?

 「Flexって、なんとなく難しそう」というイメージを持っている方に、Flexの説明から、FlashとFlexの違いについて紹介していきます。今回も実際にアプリケーションを作ってみましょう。

 まず、Flexとは「ユーザからのリクエストに応じて、サーバ側でSWFファイルを生成して見せる」というものです。ここで「生成する」というのがポイントで、FlexはMXMLという形式のファイルによってアプリケーションを作成し、ユーザからリクエストを受けると、そのMXMLファイルを解析してSWFに変換します。しかし、ユーザからリクエストを受ける度にMXML→SWFの変換を行っていては効率が悪いので、Flexでは一度変換を行うと、それ以降、MXMLに変更がない限りは変換済みのSWFを再利用します。

 では、Flexでアプリケーションを作成するための「キモ」である「MXML」について説明しましょう。MXMLは、XML形式で書かれたFlex独自のタグ言語です。XMLはで囲まれたタグと呼ばれる要素によって構成されるテキストファイルです。一般的なウェブサイトで使われるHTMLもXML言語の一種ということになります。

 MXMLに記述できる内容は以下のように分けることができます。

1.コンポーネントのレイアウト(見た目)
2.ActionScriptで記述するアクション(動作)
3.データ部分(データ)

 これらを作成するFlexアプリケーションに応じて記述していきます。

 「コンポーネントのレイアウト」は、テキストボックスやラベル、Flashで作成したコンポーネント(SWC)の配置を決定します。それぞれのコンポーネントの属性を設定することで表示の変更ができます。また、Flexにデフォルトで用意されているコンポーネントについては、一部CSSが適用可能なものもあります。

 「ActionScriptで記述するアクション」は、コンポーネントに定義したイベントハンドラに対するアクションをActionScriptで記述します。例えばボタンコンポーネントをクリックした場合(イベントハンドラ)にアラートメッセージを表示する(アクション)などです。

 「データ部分」にはアプリケーションで使用する画像やサウンド、外部SWFなどの情報を記述していきます。

FlashとFlex

 さて、FlashとFlexを比べてみると、FlexはMXMLからSWFへ変換するなどの違いはありますが、ユーザからみればどちらもSWFが見られるものということに変わりはありません。では何が違うのか?

 よく「Flashはデザイナ、Flexはプログラマ向けのツール」と言われています。確かにFlexはコンポーネントを配置していってアプリケーションを作成していくため、全体的にアニメーションを使ったものには向かないとは思います。また、XMLベースで書かれているという理由からFlashデザイナから敬遠されるという理由もあるかもしれません。

 しかし、それだけでFlexはプログラマのためのツールと言ってしまうのは寂しいですね。Flexアプリケーションを作成するための開発環境として、Adobe社が提供しているFlex Builderを利用すれば、コンポーネントの配置をGUI上で行うこともできますし、コンポーネントの属性もMXMLを直接操作しなくても行うことができます。

 確かにオブジェクト指向やらデザインパターンやらと、Flexはプログラマから入りやすいように設計されているツールではあります。しかし、コンポーネントを配置してアクションの定義ができます。つまり、ActionScriptを使ってイベントハンドラなどの仕組みが分かるようなFlashデザイナだと、ちょっとしたアプリケーションを作るためにはすごく便利だと思います。

 では、実際の書き方については次ページからサンプルのアプリケーションを作成していく中で解説していきます。

株式会社ティーケーラボ
チーフアーキテクト。ティーケーラボにて、Javaエンジニアから、Flexエンジニアにめでたく転身。大手メーカーでのエンタープライズシステムの開発経験を生かし、Flexでのエンタープライズシステム開発に邁進中。http://www.tk-lab.com/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています