
最新トレンドやキーワードをわかりやすく解説
WCR Watch [1]
リッチクライアントの最右翼FlexとFlashの違い
宮下知起
2004/11/9
10月23日(2004年)、マクロメディアがユーザー向けに開催したカンファレンス「Macromedia Flash Conference 2004」では、マクロメディアがRIA(Rich Internet Application)の普及に向けて、RIAのプラットフォームと開発ツールの提供に注力することがあらためて強調された。そして、RIAを推進する原動力が従来のFlashではなく、“Macromedia Flex”であることが明言された機会でもあった。本稿では、まだ内容が広く知られていないMacromedia FlexでRIAを実現する場合と従来のFlash作成ツール“Flash MX”を使う場合とでどのような違いがあるのか、カンファレンスの各スピーカーの発言内容から整理してみたい。
![]() |
| 米マクロメディア シニアプロダクトエバンジェリスト Christophe Coenraets氏 |
ところで、“RIA”と“リッチクライアント”という2つのキーワードの存在に読者は混乱するかもしれない。今回のカンファレンスでマクロメディアは、「RIAは、リッチなユーザーインターフェイスを保ちながら、誰もが使うことができる、リーチの長いWebアプリケーションのデプロイモデル」(米マクロメディア
シニアプロダクトエバンジェリスト Christophe Coenraets氏)という定義を加えている。Flashの普及率は現在インターネットに接続するPCの98%だ。しかもFlashにはCurlやBiz/Browserが必要とするクライアントライセンスが不要。マクロメディアのリッチクライアント・ソリューションは、Flashをユーザーインターフェイスに用いることでより幅広いユーザーに利用できる、ということを同社は訴えている。
編注:Macromedia Flexの詳細は「XMLでリッチクライアントを実現「Macromedia
Flex」」を参照してほしい。
- - PR -
さらに同氏は「Flexのプログラミングモデルは、JavaのJSPによく似たプログラミングモデルを持つ。タグベースの開発スタイルを持つため、J2EE開発者には馴染み易いはずだ」と説明する。Flexでは、画面の設計をMXMLと呼ばれるテキストベースのタグで行う。テキストファイルなので、開発者は任意のテキストエディタで開発ができる。MXMLはXML形式のマークアップ言語なので、普段XMLを書く機会の多い開発者には難しくないはずだ。
Flexには、Flashで実現するグリッドやアコーディオンタブなど、さまざまなユーザーインターフェイスがコンポーネントで用意されている。XMLのタグでこれらを利用することを定義するだけで、実行時にFlashによるユーザーインターフェイスが生成される。
また、FlexにはFlex Builderと呼ばれる開発環境が提供される。これは、Macromedia Dreamweaver MXの環境をベースに開発されたもので、DreameweaverがWYSIWYGでHTMLをコーディングできるのと同様に、ユーザーインターフェイスと、その対になるMXMLの両方を随時参照しながら開発できる。
さらにFlexでは、ユーザーインターフェイスにひも付くさまざまなアクションはAction Script 2(以下Action Script)で記述することになるが、Action Scriptは完全なオブジェクト指向言語であり、Javaプログラマには取っ付きやすい。
![]() |
| 株式会社セカンドファクトリー コミュニケーションセクションマネージャ/RIA アーキテクト 東賢氏 |
株式会社セカンドファクトリー コミュニケーションセクションマネージャ/RIA アーキテクト 東賢氏は、従来までデザイナがFlashムービーに動きを持たせるためだったAction
ScriptがAction Script2になったことで、システム開発向けに変化したと述べる。「もともとアニメーションのための言語だったので、以前はバグに甘いところがあった。なぜなら内部的にエラーがあっても、アニメーションは動いていた方がよかったからだ。Action
Script 2は型チェックが厳密になったことによって、バグが潜みづらくなった」と説明する。また、Javaと同様にインターフェイスの継承が可能になったことでプログラムのメンテナンス性も高まっている。さらに東氏は「Flexでの開発にはオブジェクト指向の思考ができる人が重要だ。そこから考えると、Javaプログラマからの転向の方が現実的だ。中途半端に以前のAction
Scriptに詳しい人はかえって開発の障害になる可能性もある」と述べる。
■Flexの優位性はどこにあるのか?
従来のFlashは、オーサリングツールを使ってバイナリファイルであるFlashファイル(swfファイル)を作成してサーバに配置したが、Flexの場合は異なる。サーバにはMXMLで記述したテキストファイルを配置する。JSPが実行時サーブレットにコンパイルされるのと同様、MXMLは実行時にコンパイルされ、swfファイルが生成される。2回目以降のアクセスではキャッシュされたswfファイルが使われる。これはJSPのコンパイルモデルに似ている。
JSPと同様のコンパイルモデルは「JSPにデータベースアクセスに必要な情報を埋め込むことができ、swfファイルのサイズを小さくすることができる」(東氏)メリットももたらす。また画像もswfファイルに含めなくてもよくなるので、この点でもswfファイルのサイズ縮小に貢献する。Flexによる開発は通常のJSP、HTMLを使ったWebアプリケーション開発の手法を適用しやすい。
セカンドファクトリーは、最近自社が手掛けた「富士写真フイルムのサービス」を例に、Flexのメリットを説明する。「お客さまは開発後のメンテナンスを自社でやりたいと考えていた。Flexであれば、FlashのユーザーインターフェイスをJSPと同様にテキストファイルで管理できる。また、頻繁な仕様変更が予測されるので、修正作業そのものがトラブルのトリガとなることが予想された。そのため、テキストファイルであることが求められた」
さらに、このシステムは他社にASPサービスとして提供することも想定されていたため、画面のコーポレートカラーや見栄えを切り替えられる必要があった。「通常のFlashでは、画像をスタティックにswfファイルに埋め込むことしかできなかった。しかし、Flexの場合は、画像の要素を外部のリソースから持ってくることができるために、機能は同じで見栄えだけを変えることが容易だ」(東氏)。
■FlexはRIAの開発効率を向上させる
RIAの開発では、生産性が大きな課題となる。高いユーザビリティを実現するために、その分開発にはコストが掛かるからだ。そのため、Flashによるユーザーインターフェイス構築においては、「提供されるコンポーネントがどれだけ充実しているか、また、そのまま使えるものがどれくらいあるかが重要なポイント」(東氏)だという。この点でセカンドファクトリーはFlexを高く評価する。またFlexではアプリケーションの機能は変えずに、見栄えだけを変更する“スキニング”が容易になる。
さらにRIAの開発では、顧客が望む高いユーザビリティを実現するために、最初にユーザーインターフェイスのモックアップを作成し、それをクライアントに確認しながらいく度か修正を繰り返していくプロセスが必要になる。Flex Builderは、XMLファイルを変更するだけでユーザーインターフェイスを変更できるため、モックアップの作成には最適だ。「プロトタイプを最終的な仕様につなぐことができる」(東氏)という。
FlexによるRIAの開発では、デザイナが不要になるわけではない。もちろん、ユーザーに優れた体験、優れた操作性を提供するデザインを考えるのはデザイナの仕事である。Flexは、デザイナと開発者との間に明確な分業体制を提供する。クリエイティブの要素をアプリケーションロジックとは別にすることができる。
ただ、今後の課題は残される。RIAの開発にはテスト手法が確立されていない。「自由度が高い分、その確立には時間がかかる」(東氏)という。しかし、J2EE開発と似たモデルを適用できる点、「従来のJ2EE開発のノウハウを適用しやすい。これは大きなメリットだ」(東氏)とも述べた。
Flexは、従来までデザイナーの独壇場だったFlash開発を、J2EE開発者にも門戸を開いたプラットフォームだ。その実力は国内でもすでに評価できる段階に来た。正式出荷は11月中(2004年)に行われるが、Flex
1.5英語版(トライアル)とFlex Builder英語版(トライアル)はすでにマクロメディアのサイトからダウンロードできる。ぜひ、読者自らの手で評価してほしい。
ホワイトペーパー(TechTargetジャパン)
- いまさら聞けないTwitter超入門−@IT記事も対応なう (2010/2/4)
Twitterは最近話題のつぶやきツール。基本的な使い方から、iPhoneアプリの使い方、RTの解説、4人のご意見番の活用例や感想まで - HTML5は開発者側の都合。ユーザーには関係ない (2010/2/2)
3つのレンダリングエンジンを載せている“国産”ブラウザベンダは、HTML5やWeb/ブラウザの進化について何を語るのか - テキスト・フォント周りをキレイに見せるCSS、13選! (2010/1/29)
無数にあるCSSのプロパティを大まかに分類し、1つずつ紹介していく本連載。初回は、テキスト・フォント周りについて - OpenGL ESが大変な3Dアプリ開発を楽にするUnity (2010/1/27)
iPhoneゲーム開発に必須のOpenGL ES。そのコーディングに手こずっている方に有用なツールを紹介し簡単なサンプルを作成します
|
|
スキルアップ/キャリアアップ(JOB@IT)
スポンサーからのお知らせ
お勧め求人情報

**先週の人気講座ランキング**
〜CCNA編〜
| ◆ | 企業の仮想化に足りない“発想”とは? 仮想化運用管理のキモは意外なところに! New! |
| ◆ | 操作もマニュアルも分かりやすい! ユーザー視点で開発されたPC管理ツール New! |
| ◆ | 仮想化すればコストは削減できるか? 仮想化に必要な「3つの視点」を解説する |

| ◆ | セキュリティを知り尽くす上野氏が登壇! @ITメールソリューションLive! in Tokyo |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |
| ◆ | 世界に通用するストレージの作り方とは? 製品に込めた思いを富士通の開発者に聞く |

| ◆ | OSSで手間も時間も、障害も減った―― 「マピオンの事例」オープンソース活用法 |
| ◆ | 「ノートPCの持ち出し禁止」で大丈夫? 情報漏えいを防ぐ管理手法とインフラは? |
| ◆ | 1日の処理を1秒に――MySQLの達人が語る 「コスト削減」できるチューニング |

| ◆ | ドキュメント作成を自動化して、SEの作業 効率を大幅アップ! Visio 2007の魅力 |
| ◆ | 急速に広がるHyper-Vでのサーバ仮想化 そのベストプラクティスをデルが解説 |
| ◆ | @IT主催セミナーで語られた、「担当者に 求められるセキュリティ対策」をレポート |

| ◆ | @IT「Windows 7」 特設サイトオープン! 最新情報・移行ノウハウを公開しています |








