アプリケーションを作ろう - 前回よりは成長したブログ

Flexとは、Flash Player上で動作するプログラムを書くための言語である「ActionScript3(AS3)」で、リッチクライアントアプリケーションを作成するために、Adobe Systemsが用意したフレームワークです。

もともとFlashというのはアニメーションをWeb上で見せるために利用されてきた経緯があり、アニメーションをWebブラウザ内でスムースに行うためのプラグインとして浸透してきました。
それまで、デスクトップアプリケーションと同じように表現力豊かなアプリケーションをブラウザ内で実現する、リッチクライアントについては非現実的と捉えられてきました。なぜなら、それまでのWebとは静的な「文書」をめくるものと考えられてきたからです。Webサーバーがユーザーに送出するのはHTMLなのが当然であり、しかも送ったらページが「めくられてしまう」ため、JavaScriptのあるページであっても、スクリプトごと流されてしまいます。したがって連続的にブラウザの上でプログラムが動作するなどというのは、ほとんどの人が想定していませんでした。

そこに風穴をあけたのがGoogle Mapです。このアプリケーションはJavaScriptで半ば忘れ去られてきた機能である「非同期通信」を利用することで、Script自身がブラウザ内にとどまり続けることに成功しました。そしてHTML内の地図データのみをインタラクティブに入れ替え、あたかもデスクトップアプリケーションであるかのような動きを実現したのです。ここに至って、世の中の開発者の視線は「非同期通信」に一斉に向けられました。

しかしながら、JavaScriptはブラウザごとに実装が異なることや、スクリプト言語であるため動作開始までのタイムラグが大きいといった欠点があり、「レイアウトも含めてちゃんと動けば儲け物」といった印象をもたれていました。現在では技術の標準化が進み、ほとんどの主流なブラウザで相当正確に動作するようになってきましたが、ここで大きなアドバンテージを持っていたのがFlashというプラグインでした。

FlashはWeb上でアニメーションやゲームを見せるために、細々とシェアを広げてきました。インターネット黎明期には様々なブラウザプラグインが存在していましたが、その中で生き残ったといえるのはFlashとAcrobat Readerぐらいなものです。しかしながら、いざこれをリッチクライアントアプリケーションの作成に利用しようとすると、主に二つの大きな問題が発生しました。一つはタイムラインという独自の概念、もう一つはGUI コンポーネントの不足です。

タイムラインは、FlashPlayer内で動くひとつの時計に従って動作を記述するというものです。アニメーション主体で使われてきた従来のFlashであれば、ビデオにエフェクトを挿入するかのようにプログラムを「挟み込む」ことができるので、非常に使いやすいのですが、従来のプログラミング言語では、基本的に上から下に順番に実行するスタイルなので、なじみにくいものがありました。

もう一つはGUI コンポーネントであり、テキストボックスやダイヤログ、コンボボックス、ボタン、リスト、データグリッドといったものについて、標準的な物が不足していました。VisualBasicなどのプログラマはこれらの部品をデザイナーで配置するところから始めるので、デザイナーが使えないことは致命的でした。

そこで、考えだされたのがMXMLという記述方法です。
これはXMLの一種で、HTMLを書くのと同じ感覚でGUI コンポーネントを記述することができます。
MXMLはコンパイル時にAS3のコードに一度自動的に書き直され、さらにコンパイルされてswfというFlashの再生ファイルになります。つまり、AS3プログラムの一部をXMLで表現するための規格がMXMLであるといえます。

MXMLはHTMLに似ていることや、プログラムロジックを考えなくてよいことから、Webデザイナーさんとの分業がしやすい、という触れ込みになっています。
しかしながら、実際にはそれを実現するために、MXMLとロジック部分を書いたAS3のソースコードを、お互いに気を使わずに済む程度に分離する必要があり、そのために習熟が必要になるという、本末転倒な状況も作り出されているようです。たとえばこれまでデザインパターンに興味の薄かったプログラマが、きれいにコードを分離したくてデザインパターンを勉強し始める、という…僕のことですね（＾＾；

ここで、やっとソースを載せてみましょう。
おなじみ「Hello world」です。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
	<mx:Label text="Hello World!"/>
</mx:Application>

一行目。XMLのお約束です。encoding="utf-8"となっているように、このソースコードファイルはUTF-8で保存します。
二行目。ApplicationはFlexのメインウィンドウを示すコンポーネントのタグです。
xmlns:mx=~というのは名前空間の記述で、mx:と頭についているタグは、すべてこの名前空間に存在するクラスであることを意味します。
とりあえず、Flex Builderで書く限りは、この記述は自動生成して勝手につけてくれるので気にする必要はありません。
layout=~はApplicationコンテナ（ほかのコンポーネントを持たせてレイアウトすることを目的としたコンポーネントをコンテナと呼びます）のプロパティで、コンテナ内のパーツは特に指定しない限り左から右へ水平に配置していきますよ、という意味です。
三行目。Labelというコンポーネントをおいています。中に表示するtextをtextプロパティで指定しています。

この段階では、ほとんどHTMLと変わりませんね。