CodeZine(コードジン)

特集ページ一覧

Adobe Flexのはじめの一歩を教えます(第1回)
~FlexはRIA開発のフレームワーク

RIA開発向けフレームワーク「Flex」とは

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 業務システムの開発現場では近年、RIA(Rich Internet Application)が技術要件として求められるケースが増えています。このシリーズではRIA開発のフレームワーク「Adobe Flex Builder」を紹介します。今回は「Flex」の概要、実行環境や開発環境などについて説明していきます。

はじめに

 業務システムの開発現場では近年、RIA(Rich Internet Application)が技術要件として求められるケースが増えています。RIAを実現する技術にはさまざまなものがありますが、その中でもAdobeが提供する「Flex」は、全世界で9割を超えるPCにインストールされているFlashのランタイムを活用できる強力なプラットフォームの1つなのです。

 本稿ではITエンジニア向けに、Flexとは何か、初心者でも簡単に分かるように解説していきます。

対象読者

  • RIA開発をこれからはじめようと思っている方
  • 「Flex」というキーワードを聞いたことがあるという方

「Flex=フレームワーク」になりました

 米Adobe社は2009年4月、コマンドラインでFlashを開発するツール群「Adobe Flex 4 SDK」と、Eclipseベースの統合Flash開発キット「Adobe Flash Builder 4」、そしてデザイナがFlashの画面デザインを容易に行うことのできるツール「Adobe Flash Catalyst」のベータ版を公開しました(関連ニュース)。

Adobe Flash Builder 4の画面
Adobe Flash Builder 4の画面

 「Adobe Flash Builder 4」の前身である「Adobe Flex Builder 3」は、Flash開発者にとっても有益なツールとして利用されてきました。これは「Adobe Flash CS4」などのスクリプト開発機能に不満を持つユーザーが、その補完目的で活用してきたという側面があります。このような状況であったことから、中には「Flex=スクリプトベースのFlash開発環境」というイメージを持たれている方も多いかもしれません。

 今回発表されたベータ版「Adobe Flash Builder 4」からは、名称から「Flex」がなくなりました。これはFlexはFlashの一部であり、さらにRIA開発向けのコンポーネントを備えたフレームワークである、という明確なメッセージングです。これまでは同じFlash技術を使いながら「これはFlashアプリケーション」「こちらはFlexアプリケーション」といったように混乱した状況がありましたが、今後は「Flexフレームワークを使ったFlashアプリケーション」といったようにイメージを明確化できると考えています。

 ではFlexフレームワークでは、どのようなことができるのでしょうか。Flexフレームワークで開発されたプログラムは、フレームワークが使われている以外はまったくFlashのswfファイルと変わりありません。Adobe Flex Builder 3を使うことで、レイアウトを記述するMXMLとロジックを記述するActionScriptを併用した「ソースコードを書いてコンパイル」する環境を用意しています。Flexフレームワークには予めRIA開発を行うために、グラフやデータグリッドなどのコンポーネントやリモーティングやバイナリ通信を行うAMF3などの機能を備えています。これらの機能を活用し、サーバとのやり取りを行った上で、クライアント上でFlashランタイムを使ったリッチなUIを持つアプリケーションの開発が可能になるのです。

 既にFlexフレームワークは、ひまわり証券の「Hits証券デリバティブ」やAdobeの「Flash Conf.登録アプリ」など、さまざまな業務システムでRIAを実現しています。

Flexフレームワークを活用したRIAの実行環境

 実際にRIAをFlexフレームワークで実現した場合の実行環境には、いくつかのパターンが考えられます。最もシンプルなシステムであれば、Webサーバに対して情報の送受信を行い、Flexフレームワークを使って開発したFlashアプリケーションをWebブラウザ上で実行するという形になります。この時サーバサイドでは特別な動作は必要なく、従来と同様にデータベースなどを活用し、クエリによって各種操作を行い、サービスのインターフェースを提供するという構造のままでFlashアプリケーションから利用できることとなります。

サーバとの通信の模式図画面
サーバとの通信の模式図画面

 FlexフレームワークにはAMF3というデータ通信の機能が用意されています。このAMF3は以前は仕様が非公開だったため、Seasarプロジェクトでは独自にAMFを解析してJavaによるサーバサイドアプリケーションとFlexフレームワークの通信を実現するS2Flex 2の開発が行われていました。しかし2008年にAdobeがAMF3の仕様をオープン化し、さらにJava EEで通信を行うためのコンポーネントも公開したことで、サーバとの連携が容易に行えるようになりました。

 またオープン化を受けて、これまでサーバサイドアプリケーション開発で多く利用されていたPHPやRuby、さらには.NET用にも通信を行うためのコンポーネントが有志によって開発され、サーバサイドに大きな変更を加えることなく、Flexフレームワークを使ったリッチなUIに載せ替えるといったことが可能になったのです。

さらに高度な連携はAdobe製品との組み合わせで

 RIAが従来のサーバサイドアプリケーションと大きく異なるのは、クライアント側が受信したデータをアプリケーション上で保持/更新が行える点です。このため、アプリケーションとサーバの両方でデータが異なるケースがあり、データの同期について常に注意を払う必要があります。もちろんJavaをはじめとした従来のサーバサイドの言語で同期機能をスクラッチで記述することもできます。

 しかしこの部分に手間をかけるよりも、実際のRIA開発ではUIや操作性といった部分により注力したいものです。そこで考えられる最も有用な選択肢は、上の図にあるようにサーバ側のアプリケーションの実行環境にAdobeの製品である「LiveCycle」や、オープンソースで公開されている「BlazeDS」を組み込むことによって、より密なデータ連係を行うことができるようになります。

Flexフレームワークの開発環境について

 詳しくは次回の記事で解説しますが、現在Flexフレームワークを使った開発環境としては、Eclipseをベースにした「Adobe Flex Builder」を用意しています。このAdobe Flex Builderは単体で動作するスタンドアローン版と、Eclipseのプラグインとして動作するプラグイン版の2つに大別できます。AdobeがAMF3をJavaに対して公式にサポートしていることに加えて、同じJavaの開発環境であるEclipseを利用できることで高い親和性を実現しています。

 既にサーバサイドでの開発を行っているユーザーであれば、プラグイン版で開発環境を一本化できるほか、スタンドアローン版でも同等の使い勝手が得られ、デバッグしやすい環境を手に入れることができます。またFlexフレームワークで開発する際には、ActionScript 3を利用します。このActionScript 3はJavaと同様にオブジェクト指向の言語です。このためJavaで利用されてきたデザインパターンがActionScript 3で流用できるほか、シンタックスについても似ている部分があるなど、Javaとの親和性が高いと言えるでしょう。

 RIA開発において、これまでのサーバサイドアプリケーションとの大きな違いは画面設計にあります。これはFlexフレームワークに限った話ではありませんが、開発初期の段階で細かい単位で画面設計を行っておかなくては、その後の作業は厳しくなってしまいます。逆に、それ以外のファイル構成やクラス設計といった部分についてはクライアントアプリケーションの作成はサーバサイドアプリケーションの開発とほぼ同じと言っても差し支えないでしょう。

 またサーバサイドの開発については、AMF3を使うか使わないか、という点を除けばこれまでのフレームワークやデザインパターンを活用できます。つまりFlexフレームワークを活用するだけで、従来のスキルにRIAという新しい形を与えることができるのです。

実際にFlexフレームワークに触れてみよう

 Adobeでは現在、製品版の「Adobe Flex Builder 3」の体験版、もしくはベータ版の「Adobe Flash Builder 4」をダウンロードして実際にFlexフレームワークの開発環境を試すことができます。

 もちろん「最新技術をすぐに体験したい」というユーザは「Adobe Flash Builder 4」をダウンロードしたいと思われるでしょう。しかし、まずは日本語の情報が広く公開されているAdobe Flex Builder 3の利用をお勧めします。

 これはAdobe Flex Builder 3が、現在9割のPCにインストールされているFlash Player 9をターゲットにしており、非常に広い環境で利用できるためです。またAdobe Flex Builder 3で経験した知識は、Adobe Flash Builder 4の正式版が登場しても無駄になることはありません。

Adobe Flex Builder 3画面
Adobe Flex Builder 3画面

 次回はAdobe Flex Builder 3の体験版をベースに、実際にFlexフレームワークを活用したアプリケーションについて見ていきたいと思います。

「FlexではじめるRIA開発」特集、絶賛公開中!
  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • アドビ システムズ株式会社(アドビ システムズ カブシキガイシャ)

    アドビ システムズ社は、時間や場所、利用するメディアや機器を問わず、あらゆるユーザーの、アイデアや情報との関わり方に変革をもたらしています。アドビ システムズ 株式会社はその日本法人です。同社に関する詳細な情報は、Webサイト(http://www.adobe.com/jp)に掲載されています。...

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5