いまさら聞けないFlex、
そして、いまこそ入門のとき!?

Flex 3正式版リリース! Flexの過去・現在・未来

クラスメソッド株式会社
篠崎 大地
2008/3/31


Flex 3正式版リリース! いまさら聞けない「Flex」とは?

 2008年2月22日に、米Adobe Systems社(以下、Adobe)はFlex 3およびAdobe AIR(以下、AIR) 1.0の正式版をリリースしました(参考「Adobe AIR 1.0がついに公開〜Web技術でデスクトップアプリを開発〜」)。AIRは、1年ほどのβ期間を経てのリリース、Flex 3は、1年半振りのメジャーバージョンアップとなります。

 「Flex」とは、Flash Playerで動作するFlashActionScriptベースのRIAリッチクライアント・システムを簡単に開発するためのフレームワークです。RIA開発の選択肢として最近急速に関心を集めてきました。

 本稿では、その「Flex」についての過去・現在・未来を解説します。併せてバージョン3になったFlexの魅力を詳しく紹介しますので、これを機にFlex開発をぜひ試してみてはいかがでしょうか。

図1 Flexのロゴ
図1 Flexのロゴ

AIRによって大きな1ピースがはまった

 Flexの魅力を一言で表すなら、「表現力」です。Flash Playerの充実した機能を背景に、従来のWebアプリケーションでは実現が困難だった、一般のデスクトップ・アプリケーション並みの機能やユーザーインターフェイス(以下、UI)、インタラクションを実現できるのです。

Flexアプリケーションの弱点

 しかしながら、Flex/FlashでのRIAは、Webブラウザの上で実行されるため、Webブラウザの制限を超えることができませんでした。制限の一例を挙げると、キーボードショートカットがあります。Webブラウザにすでに割り当てられているキーボードショートカットは、使うことができません。キーのイベントがコンテンツ側にくる前に、Webブラウザが解釈して実行してしまいます。

 業務系のRIAでは、ファンクションキーを使いたいという要望が割とよくありますが、Webブラウザで動く以上、これは選択肢として困難です([F5]キーを間違って押したら、全部リセットされてしまうシステムなんて怖くて使えませんよね?)。

 また、Webブラウザのセキュリティモデルの下では、ローカルのファイルシステムにもアクセスできませんから、一般のアプリケーションと比べてどうしても機能が限られます。

Flex 3の一番の特徴

 AIRでは、これらの機能をプラットフォームに依存しない共通のランタイムで提供するため、いままでのFlex/Flashを用いたRIAの限界を超えることができ、可能性が大きく広がります。

 今回リリースされたFlex 3の一番の特徴は、AIRのサポートです。従来までのコンテンツ開発に加え、Flex 3(BuilderSDK)では、AIRアプリケーションも開発できます。

編集部注:Flex Builderは、2010年3月の新版から「Flash Builder 4」に名称変更しています。期間限定の無料版を ダウンロード して使えます

 また、特筆すべきは、AIRの開発を始めるのに必要な知識が少なくて済むことでしょう。基本的な開発の流れは従来のFlexとまったく変わりません。画面はMXMLファイルの記述で行いますし、使用する言語もFlexと同じActionScript 3.0です。AIRで新たに追加されたAPIを習得するだけで、AIRを使いこなすことが可能です。

 AIR 1.0のリリースで、AdobeのRIA戦略の中核を成す主要なピースが出そろったことになりました。

作って学ぶAIRウィジェットの基礎→応用
最近よく聞くAdobe AIRって何だっけ? ウィジェットを簡単に作れるらしいけど…… と曖昧な知識のあなたに贈る超入門連載。楽しいサンプルを作って基礎から応用まで学ぼう

いまこそ総まとめ! Flex/Flashの歴史

 AdobeのRIAをまとめると、Flex/FlashといったWebブラウザ上で動作するRIAの開発環境としては、Flex BuilderFlex SDKがあり、デスクトップ上のRIAでは、AIR(その開発環境として、Flex Builder/Flex SDK)があり、クライアント/サーバ間をつなぐものとして、LiveCycle DataServiceと(そのオープンソース版である)BlazeDSがあります。

JavaとFlex/AIRをつなぐ「炎」のオープンソース
Tomcatを使ったサーバPushもできるBlazeDSとは? 
発表されたばかりの新OSSについて、その概要と便利なツールを紹介しサンプルを動かしてソースコードを解剖する
リッチクライアント & 帳票」フ ォーラム 2007/12/27

 Adobeは、ユーザーに高い経験をもたらす「RIA」という概念、およびその開発環境を、長きにわたって磨き上げてきました。ここで、その歴史を足早に振り返ってみましょう。

表1 AdobeのRIA関連ソフトウェアの歴史
名前 発表時期 主な特徴 課題点
Flash MX 2002年
3月
H.263コーデックのFlash Video(.flv)
・従来より小さなSWFファイル(zlib圧縮サポート)
・コンポーネント
・(一般的な開発者にとっての)Flashの扱いづらさ
・Flashで共同作業が考慮されていない
Flex 1.5 2004年
10月
・タグ記述による画面デザインとレイアウト
・高価
・サーバサイド
・Flash Playerのパフォーマンス(例:DataGridが重い)
Flex 2.0 2006年
8月
・ActionScript 3.0採用
Flash Player 9AVM 2)がターゲット、動作が高速に
EclipseベースのIDE
・低価格化
・Flexフレームワークが枯れていない
ActionScript 2.0からの移行の痛み
Flex 2.0.1 2007年
1月
・Flexフレームワークのバグフィックス
自動テスト対応
・モジュール機能追加
Flex 3 2008年
2月
・AIRサポート
Flash IDE CS3との連携
・Flexフレームワークのバグフィックスと機能追加
・開発支援機能
プロファイラ

RIAの幕開け − Flash MXの登場

 2002年3月に発売された「Flash MX」(当時は、米Macromedia社から)では、Button、ComboBoxといったUI部品が「コンポーネント」という形で提供され、それらを利用することで、クロスプラットフォーム、かつ、標準的なルック&フィールを持つUIを実現できました。

 また、Sorenson Sparkコーデックを採用したFlash Video(.flv)のサポートもあり、リッチな表現が可能となったことから、「RIA」という言葉が使われ始めたのもこのころです(参考「Macromedia Flash MX - A next-generation rich client」、2002年3月に公開されたJeremy Allaire氏によるホワイトペーパー」)。

 それ以前までのFlashアプリケーションは、ボタン1つ取っても、デザイナーが手作りする時代でしたが、Flash MXの登場によって、凝ったものでなければコンポーネントを張り付けるだけでFlashアプリケーションが作れるようになったわけです。Flash Playerの高い普及率も追い風となり、Flash MXをベースとしたRIAの事例が出始めましたが、大きな流れとはなりませんでした。

 これは、Flashがデザインツールであったため、一般的なプログラマー/開発者にとってなじみがない/なじみづらい開発環境だったことや、Flashが共同作業をあまり考慮した仕組みではなかったことが背景にあります(例えば、クラスベースで開発ができなかった、flaというバイナリにプロジェクト一式を含めるため、ソースコードのバージョン管理が困難だったなど)。

 蛇足ですが「mx」の名称は、Flexフレームワークのパッケージ名としていまでも残っています。

「Flex」の登場 − Flex 1.5時代

 2004年11月に発売されたFlex 1.5は、先のFlashによるRIA開発の弱点を一気に改善したものでした。

XMLでリッチクライアントを実現「Macromedia Flex」
Javaプロダクトレビュー リッチクライアントのブレイクスルーを予感させる、J2EE開発者をターゲットにしたFlashツールが今秋登場する
Java Solution」フォーラム 2004/9/11

 Flexでは、画面を「MXML」というXMLベースのテキストファイルに記述することで、画面の定義・レイアウトを行えるという新しいコンセプトを導入しました。Flashでは画面定義やレイアウトの調整はデザイン領域の作業であり、Flashを使って“オーサリング”しなければならなかったのが、テキストファイルの記述により行えるようになったことで、Flashに抵抗を感じていた開発者を獲得する素地ができたのです。

リッチクライアントの最右翼FlexとFlashの違い
WCR Watch [1] マクロメディア Flexとは具体的にどのような開発環境なのか? “RIA”の定義を確認し、RIA開発効率における、Flexの優位性と今後の課題を解説する
Web Client & Report」フォーラム 2004/11/9

 また、Flexで導入された特筆すべき機能の1つとして、「コンテナ」の存在があります。例えば、HBoxというコンテナを使い、中にボタンを配置することで、ボタンが水平方向に並ぶレイアウトを記述できました(意外なことに、Flashにはこのような機能や概念がありませんでした)。

 コンテナを組み合わせることで、規則ベースのレイアウトを記述でき、具体的には「画面上部右側に、制御のためのボタン群を1列に右ぞろえで並べる」といったレイアウトを、各コンポーネントの座標値を指定することなく組めるようになったことから、自由度や保守性が大きく向上しました。

ビジネスFlashはWebを変革する、マクロメディア
WCR Watch [2] ビジネス用途を意識したFlashを支えるサーバ製品マクロメディアFlex。サーバ製品をはじめとして、マクロメディアの製品群と今後の方向性を整理する
Web Client & Report」フォーラム 2005/1/13

 ただ、Flex 1.5は非常に高価であったこと、また、サーバサイドのプレゼンテーション層を担う位置付けで、一般的なFlashによるRIA開発者にとって遠い存在だったことなどから、広く普及するには至りませんでした。

Flashベースのリッチクライアントを体験
XMLタグでFlashベースのユーザーインターフェイスを構築できるMacromedia Flexを6回の連載で体験・評価します

 また、Flex 1.5で作成したコンテンツはFlash Player 7以上で再生可能でしたが、メインのターゲットだったFlash Player 7自体のパフォーマンスが十分ではなく、特に重量級のコンポーネントを配した画面での実行速度が遅くなってしまう問題もありました。業務系で頻繁に必要になる、「DataGrid」というExcelのようなUIを提供するコンポーネントが重いことは、一部の開発者には切実な問題でした。

 その後、米Macromedia社はAdobeに買収され、RIA戦略をAdobeに引き継ぐことになります。

アドビに引き継がれるマクロメディアのRIA戦略
WCR Watch(7) マクロメディア最後のプライベートカンファレンスで語られたRIA戦略は、Webのみならずデスクトップ環境にまで展開。クロスOS、クロスデバイスが強みだとする
リッチクライアント & 帳票」フォーラム 2005/10/29

AdobeによるFlex 2時代

 Flex 1.5の問題点の多くを解消したFlex 2がリリースされたのは、2006年8月のことです。Flex 2の最大の特徴は、新言語、ActionScript 3.0の採用でした。ActionScript 3.0が動作するのは、Flash Player 9以降です。

Flashの基礎を無料で習得! ActionScript入門
ActionScriptを知っていますか? Flash技術の要となる言語で無料で簡単にFlashアプリケーションを作れます。そのActionScriptについて初心者のために一から丁寧に解説していきます

 このFlash Player 9では、ActionScriptのバイトコードを実行する仮想マシンAVM、ActionScript Virtual Machine)の抜本的な再設計が行われたため、全般的な実行速度がかなり高速化し、Flash Player 8以前と比較するとコンテンツが非常に高速に動作するという特徴がありました。

Flex2でWebアプリ開発
これまで3週間かかっていたWebアプリのモック開発工程を、3日に短縮できたというFlex2の体験版をダウンロードして簡単アプリを作ってみよう

 また、Flex 2自体の販売価格がかなり安価に設定されたこと(Flashよりも安くなった)、サーバサイドの製品だったのが、クライアントサイドの製品へと変更された(Flashとほぼ同じ位置付けになった)ことから、幅広い採用実績が出始めました。

Eclipseで開発可能になったAdobe Flex 2
リッチクライアント・プロダクトレビュー 今年登場するAdobe Flex 2はEclipseプラグインを開発環境とするリッチクライアントフレームワークに生まれ変わった
リッチクライアント & 帳票」フォーラム 2006/4/8

 ただ、特に既存のFlash開発者にとって、ActionScript 3.0への移行が容易ではなかった(イベント関連の変更、API/アーキテクチャの変更など影響個所が多かった)、Flexフレームワークが枯れていないなどの課題点もありました。

 そんな中、Flexの大規模開発の品質を均質化するためのフレームワークも登場しました。

Flexのクライアントサイドをオープンソースで制覇する
大規模なWebアプリケーションを大人数で開発するときに便利なFlexのクライアントサイドのフレームワークを紹介

機能追加されたFlex 2.0.1の登場

 Flex 2.0.1は、2007年1月にリリースされました。Flexフレームワークのバグ修正と、動的なモジュールのロード・アンロード機能、HP QuickTestProとの連携による自動テスト機能などが追加されています。

現場で使えるFlex実践テクニック
本連載では、Flex開発で基本となる特徴的な機能から一歩進んで、実開発の現場でよく使われるテクニックについて、より実践的に解説します

完成度が一段とアップしたFlex 3の登場

 先日登場したFlex 3では、RIAの開発環境としての完成度が一段とアップしました。

 AIRの開発を行えることはもちろん、Flexフレームワークのバグフィックスと機能追加(フレームワークのソースコードの行数は約6万行増加)、開発者を助けるリファクタリングや、メモリおよび実行時間のプロファイル機能などが目立った特徴です。

 数字的には2から3への、メジャーバージョンアップではありますが、1.5から2へバージョンアップしたとき(新言語の採用など)のような大きなパラダイムシフトはなく、Flex 2の開発者はスムーズにFlex 3に移行できるはずです。

 Flex 3では、開発に使用するFlex SDKを選択できるため、Flex 2で開発した既存プロジェクトを、Flex 3で続けることも可能になっていることも、スムーズな移行を可能にするポイントといえます。

表2 FlexとFlash、Flash Playerの対応表
Flexの
バージョン
Flexの
発表時期
Flashの
バージョン
Flashの
発表時期
Flash Player
のバージョン
    Flash MX(Flash 6) 2002年3月 6
Flex 1.5 2004年11月 Flash MX 2004(Flash 7) 2003年12月 7
    Flash 8 2005年10月 8
Flex 2.0 2006年8月     9
Flex 2.0.1 2007年1月     9
    Flash CS3(Flash 9) 2007年6月 9
Flex 3.0 2008年2月     9

 それでは次ページでは、Flex 3の新機能を解説します。

  1-2

 INDEX
いまさら聞けないFlex、そして、いまこそ入門のとき!?
Page1
Flex 3正式版リリース! いまさら聞けない「Flex」とは?
AIRによって大きな1ピースがはまった
いまこそ総まとめ! Flex/Flashの歴史
  Page2
Flex 3の新機能はこんなにある
Flexの未来はいったいどうなるの?
いまこそFlexに触れてみませんか?




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間