Flexことはじめ - インターネットのすみっこ

ついぞ最近Flexに手を出し始めました。

大学でid:viverに「Flexいいよ、Flex」といわれて洗脳されたわけですが、見事に洗脳されました。

以下いろいろとまとめてみました。間違っているところなどがありましたら教えてくれると助かります。

FlashからFlexへ

WEBページで様々なFlashコンテンツを見かけることがあると思います。
そのようなコンテンツはAdobeFlashなどのソフトを利用して開発されています。Flashを用いると、インタラクティブなWEBページを作ることができます。
どちらかというとデザインとかそっちの方面の島のように感じるところが強いです。*1

その根本となる、Flash自体はすばらしい技術で、プラットフォームにあまり依存せずに作り手の意図する挙動をさせることができます。
この点はJavaアップレットなどと似ています。Flashには、Javaアップレットに対するJavaVMのように、AVM*2が存在します。AVMはFlashPlayerとして配布されています。作成されたFlashPlayerバイトコード(SWFファイル)は、この上で実行されることになります。

最近では、WEBアプリケーションの付加価値として使いやすさが求められるようになりました。*3
Flashはもともと、ユーザのアクションに対して非常に柔軟に対応することができました。
現に、ニコニコ動画 *4など、Flashを用いたWEBサービスも存在します。
そこで、Flashでより使い勝手のよいWEBアプリケーションを簡単に実現することができないかということで、Flexが開発されました。

Adobeのページでは、Flexは以下のように説明されています。

ブラウザ、PC、OSの違いを超えて、同一のユーザエクスペリエンスを提供できる、表現力豊かなWebアプリケーションを開発・管理するための、開発効率の高いオープンソースフレームワークです。

つまり、Flexは、Flashでより高度な事を行うための仕組みと言えると思います。*5

で、なにができるの。

前書きはこんなところで。で、何ができるかというと、
こんなこととかこんなことができます。
競合する技術としてAjaxがありますが、Ajaxのできることは結構Flexでできたりしますし、機能によってはFlexのほうが高性能です。
もちろん、マルチメディアコンテンツも扱えるので、ストリーミングができたりと機能はいろいろ。

こんにちは、世界まで

んじゃ早速準備。

コンパイラ

というわけでまずはコンパイラを入れます。

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3emailからFlexSDK3をダウンロードします。
下のほうにある「I have read the Adobe Flex 3.0 SDK License, and by downloading the software listed below I agree to the terms of the agreement.」にチェックをして、「Download the Flex 3.0 SDK for all Platforms 」をクリックすればOKです。

落としてきたファイルを展開します。ファイルは「flex_sdk_3.zip」となっていると思います。
展開するとその中身に「binフォルダ」があり、その中にある「mxmlc.exe(Windowsなら)」がコンパイラです。これを直接起動することでコンパイラが起動します。
さすがにこのままだと不便なので、環境変数のPATHを通しておくといいでしょう。
ちなみに、今回は「C:\FlexSDK」に設置しました。

コード

Flexアプリケーションを作成するときには、二種類の言語を用います。「MXML *6」と「ActionScript3」です。WEBページでたとえると「HTML」と「JavaScript」の関係と同じです。(ActionScript自体かなりJavaScriptに似ています。)

基本的に、MXMLでインターフェースなどの見た目を、ActionScript3でボタンが押されたときなどの動作を記述します。

では早速こんなコードを書きます。

これをファイル名「HelloWorld.mxml」として保存します。その後、このファイルをコンパイルします。

$mxmlc HellowWord.mxml
Loading configuration file C:\FlexSDK\frameworks\flex-config.xml
HelloWorld.swf (150407 bytes)

これでFlash バイトコードが生成されました。生成されたファイルは「HelloWorld.swf」です。
後はこれを適当なブラウザなどで開くと、以下のようになります。

Hello,World!と書かれたボタンが表示されました。
今はまだ、ボタンを押しても何も起こりません。
ボタンに対するアクションを定義したりとやることはいっぱいありますが今回はここまで、続きはまた今度ということで。

*1:実際FlashアニメーションとかFlashゲームとかそういう需要も大きいです。

*2:ActionScript Virtual Machine

*3:Googleマップが代表的かな。

*4:メインとなる動画プレーヤはFlash

*5:こんなとこでいいのかなぁ

*6:Macromedia Flex Markup Language