How Flex can transform the user experience on the web

業界の注目がクライアントサイドとユーザ体験に注がれている今、過去10年もの眠りから覚め、Webユーザインタフェースのクオリティが飛躍的に向上することが見込まれています。

このような状況の中、Flexは人とWebアプリケーションの関わり方を一新する独特の機能性を数多く提供します。中でも、次に挙げる特長が注目に値します。

• 表現力（ベクトルグラフィックス）
• パフォーマンス（JITコンパイラ）
• リアルタイム（バイナリソケットとPub/Subメッセージング）
• リッチメディア（ビデオとオーディオのストリーミング）
• オフライン状態のサポート（ローカル保存領域とデスクトップクライアント）

これらの機能性はひとつひとつが特別なわけではありません。しかし、ここで特筆に値するのは、今すでに、上記の機能性をすべてサポートするユビキタスかつコンパクトな実行環境（Flashバーチャルマシン）が、すべての主要オペレーティングシステムとブラウザの組み合わせに対して提供されているという点です。

表現力

表現力という観点においてFlexが他のテクノロジーと異なるのは、ベクトルグラフィックスに対するサポートです。ビットマップと異なり、ベクトルグラフィックスは、線、シェープ、画像といった要素を幾何学的な数式で表現します。Flexでは、ベクトルグラフィックスのAPIへのフルアクセスが提供されている上に、ベクトルグラフィックスを駆使したFlexフレームワークのコンポーネントを利用するだけで、大半の機能実装が完了できます。

例えば、半透明処理が施され、四隅に丸みの掛かった赤いパネルを描きたい場合は、次のコードを記述するだけです。

<Panel backgroundColor="#FF0000" backgroundAlpha="0.5" cornerRadius="6"/>

もちろん、これだけならばビットマップ画像をスライスするだけでも済みます。しかし、ベクトルグラフィックスを利用する場合は、オブジェクトの伸張、縮小、回転および反転はもちろん、オブジェクトの形状を自由に変形することさえ可能なので、ユーザインタフェースのあり方に大きな変化をもたらせることができます。例えば、ユーザインタフェースのオブジェクトを、実在するオブジェクトのように振る舞わせることが、ベクターグラフィックスの利用によって可能になります。

このようなユーザインタフェース要素を備えたアプリケーションの例が、Ely Greenfield氏の作成したFlickrルーレットアプリケーションです。

http://bridge.quietlyscheming.com/flickr/ajax*

このアプリケーションはあくまでモックアップでしかありませんが、十分な可能性を秘めているといえるでしょう。ベクトルグラフィックスの利用が奏功するアプリケーションタイプは広範に及びます。例えば、ダッシュボードを開発するような場合は、クライアントサイドで再描画・アニメーション化されるチャートコンポーネントがベクターグラフィックスによって可能になるので、データの変化やトレンドをより分かりやすく提示できるようになります。このようなダッシュボードの例は、次のアドレスでご覧いただけます。

http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html*

クリックするたび、あるいはドリルダウンを指示するたびに、サーバサイドでチャートコンポーネントが再生成され、その都度、クライアントに再送されるようでは、ユーザ体験が台無しにならざるを得ません。

しかし、ベクトルグラフィックスを利用すれば、アニメーション化されたスムーズな画面遷移が実現できます。Flexの場合は、チャートコンポーネント自体に、これらの動作がカプセル化されているので、ローレベルのドローイングAPIを扱う必要さえありません。

パフォーマンス（処理能力）

処理能力の低さとジャストインタイム形式コンパイラの欠如。ブラウザの最大の弱点として挙げられているのが、この２点ですが、 FlexとFlashバーチャルマシンの組み合わせは、ここでも実力を発揮します。Flexアプリケーションは、クライアントにバイトコードとして配信され、このコードの実行には、JIT形式のコンパイラを利用するFlashバーチャルマシンが用いられます。この方式なら、コード実行時に大幅なアドバンテージが得られ、Web上であるにもかかわらず、デスクトップアプリケーション並みの処理性能を実現することができます。

処理能力の高さは、コンシューマ向け、ビジネス向けのどちらのアプリケーションにとっても重要です。コンシューマ向けアプリケーションの場合は処理能力が向上することで、よりスムーズなユーザ体験が可能になり、一方のビジネスアプリケーションでは、Webでデプロイする長所を生かしつつ、大規模なデータをデスクトップアプリケーション並みの素早い操作感で処理するといったことなどが可能になります。

リアルタイム（即時性）

ブラウザが採用するリクエスト・レスポンスの通信モデルは、サーバサイドの各種処理ならびにクライアントサイドでの処理操作から発せられる、イベントをリッスン（待機）することが得意ではありません。しかし、Flash Playerはバイナリソケットをサポートしているので、あらゆるソケットサーバとのリアルタイムでの双方向通信が可能です。

このインフラをベースに開発されたFlex Message Serviceは、シンクライアントとサーバ間のリアルタイムなメッセージ交換を可能にする、Pub/Sub形式のメッセージングにも対応できます。また、Flex Message ServiceはJMSベースのシステムといった、既存のエンタープライズソリューションシステムとも統合できます。

つまり、Flexに採用されているメッセージング・リアルタイムインフラを利用すれば、Webデプロイメントモデルの特長である「軽さ」を維持しつつ、スケーラビリティと信頼性に優れたコラボレーションアプリケーション・データプッシュ配信アプリケーションが開発できます。

リッチメディア

ビデオとオーディオはビジネス向け、コンシューマ向けの違いを問わず、アプリケーションの重要なコンポーネントとして急速に普及しつつあります。Webとビデオの組み合わせは新しい概念ではありませんが、現時点でのユーザ体験はお世辞にも満足のいくものとはいえません。例えば、インストールされているメディアプレーヤーのバージョンが正しくない、正しいバージョンをインストールするために数メガバイトものダウンロードを待つ必要がある、ビデオのインタラクティビティが限定されている（従来のビデオデッキのボタン程度のインタラクティビティしかない）、ビデオとその周囲のアプリケーションとの関連性が限定されている、というように、さまざまな問題を抱えているのが現状です。

Flash Playerにはマルチメディアの再生はもちろん、これらのストリーミングに対応する機能が搭載されています。Flash Playerはインターネットに接続されたパソコンの約98%にインストールされている、Web上で最も（しかも群を抜いて）ユビキタスなメディアプレーヤーです。有力ビデオサイトのGoogle Video*やYouTube*がFlashを採用しているのは、このFlash Playerのユビキタスさが認められているからだといえます。

Flexを利用すれば、Webにありがちな、インタラクティビティに乏しいストリーミング体験ではなく、より強固に周囲のアプリケーションと統合された、インタラクティブなビデオ体験が実現できます。例えば、ビデオ再生時に特定のイベントを呼び出し、ユーザインタフェース内の要素の動作を制御するといった連動が可能です。これらの機能を活用すれば、新しい次元の高度なインタラクティブアプリケーションが実現できます（インタラクティブビデオチュートリアル、インタラクティブな「専門家に質問」、各種メディアポータル、ビデオ会議・ビデオチャット機能の備わったコラボレーション環境など）。

ローカル保存領域とオフライン状態のサポート

Flexアプリケーションは、データをクライアントサイドのローカルデータ保存領域（正式名称、ローカル共有オブジェクト）に保存することも可能です。ローカルデータ保存領域には、ネットワークとの接続が確保できない場合でもアクセス（読み書き）可能です。

また、現在開発中の軽量なデスクトッププレーヤー（開発コード名、Apollo）を利用すれば、Flexアプリケーションをブラウザ外でも実行できるようになります。（Apolloについて詳しくは、こちらを参照*してください。）

デベロッパーの開発体験を一新

Flexに関しては、もうひとつ特筆に値する事柄があります。それは、ユーザ側の体験ではなく、デベロッパーの開発体験が変わるということです。Flexを利用すれば、ここまでに紹介した数々の画期的な機能を含むアプリケーションが、いとも簡単に開発できます。Flexのプログラミングモデルは、とてもパワフルでありながら明快です。アプリケーションUI要素の配置にはXML形式の宣言型言語を使用し、その他のプログラミング部分にはECMAScript規格に基づくActionScriptを使用します。また、Flexのプログラミングモデルには100種類以上ものコンポーネントから構成されるクラスライブラリが含まれています。

Flexのプログラミングモデルがもたらす高い生産性。これは、簡単に言葉で説明できないものなので、以下にサンプルを示すことにします。

中間層にデプロイされたJavaオブジェクトのメソッドを呼び出し、この結果をDataGridに表示するには次のコードを記述します。

<mx:RemoteObject id="ro" destination="portfolio"/>
<mx:DataGrid dataProvider="{ro.getStocks.lastResult}" />
<mx:Button label="Get Data" click="ro.getStocks()"/>

Webサービスから取得したデータをもとに、線グラフを生成するには次のコードを記述します。

<WebService id="ws" wsdl="sales.wsdl"/>
<Button label="Get Data" click="ws.getData()"/>
<LineChart dataProvider="{ws.getData.lastResult}">
    <horizontalAxis>
        <CategoryAxis categoryField="name"/>
    </horizontalAxis>
    <series>
        <LineSeries yField="revenue"/>
    </series>
</LineChart>

ビデオをストリームするには次のコードを記述します。

<VideoDisplay id="videoFMS" autoBandWidthDetection="true" source="streamName"/>

XMLドキュメントを解析し、仮に6つ目のemployeeノード内のzipノードの値を抽出したい場合は、次のE4X（ECMAScript for XML）表現を利用するだけです。

employees.employee[5].address.zip

展開可能な（しかも、展開動作がアニメーション化された）パネルを作成したい場合は、複数のステートが備わったパネルを次のように作成するだけです。

<states>
    <State name="expanded">
        <SetProperty target="{myPanel}" name="height" value="100%"/>
    </State>
</states>

<Panel id="myPanel" width="100%" height="50%" resizeEffect="Resize"/>
<Button label="Button" click="currentState='expanded'"/>

JMSトピックにサブスクライブし、メッセージがパブリッシュされるたびにメソッドが実行されるようにするには次のコードを記述します。

<Consumer destination="myJMSTopic" message="myHandler()"/>

リッチインターネットアプリケーションの開発にFlexを利用する理由は、他にもたくさんありますが（ぜひ、Richard Ziade氏が作成したこちら*のリストを参照してください）、特に、表現力、パフォーマンス、リッチメディア、リアルタイム、オフラインといったFlexの優れた機能が、Webのユーザ体験を変革するのです。

関連リンク

• Flexデベロッパーダービーの受賞作品を見る
• Adobe Flexサンプルアプリケーションを見る
• Flexコミュニティが開発したサンプルアプリケーション*を見る
• Christophe（筆者）のブログ*を読む

著者について