いまさら聞けない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で動作するFlash／ActionScriptベースのRIA／リッチクライアント・システムを簡単に開発するためのフレームワークです。RIA開発の選択肢として最近急速に関心を集めてきました。
本稿では、その「Flex」についての過去・現在・未来を解説します。併せてバージョン3になったFlexの魅力を詳しく紹介しますので、これを機に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（Builder／SDK）では、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 BuilderやFlex 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関連ソフトウェアの歴史 | ||||||||||||||||||||||||
|
■ 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 3の新機能を解説します。
| 1-2 |  |
| INDEX | ||
| いまさら聞けないFlex、そして、いまこそ入門のとき!? | ||
 |
Page1 Flex 3正式版リリース！ いまさら聞けない「Flex」とは？ AIRによって大きな1ピースがはまった いまこそ総まとめ！ Flex／Flashの歴史 |
|
| Page2 Flex 3の新機能はこんなにある Flexの未来はいったいどうなるの？ いまこそFlexに触れてみませんか？ |
||
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
