はじめに

FlexとRIAに関する基本知識から開発方法の基礎を習得していただくことを目的とする連載です。対象とする読者は次のような方です。

• デザイナーでFlex、RIAの概要や開発方法を知りたい方
• PHP、Perl、J2EEなどのWebアプリ開発者でFlex開発に興味がある方
• FlashやDreamweaverでサイト構築をしている方でFlex開発に興味がある方

つまり、プログラミングの経験を問わず、RIAの概念、Flexの基本を理解したうえで、シンプルなFlexアプリケーションを作成できることを目標とします。

本連載の他にも「Flex/AIR無償ハンズオンセミナー」を定期開催（2009年5月～2009年10月）しております。インタラクティブな環境で学習されたい方は、是非お申し込みください。

第1回目はRIA（Rich Internet Application）の基本概念、および既存のWebアプリケーションに比べてどの点でFlexが優れているかをご紹介します。

必要なソフトウェアとファイル

今回はありません。

必要な前提知識

特にありません。プログラミングやWebアプリケーション開発の知識も必要ありません。

学習できること

RIAの概念、Flexの特長と概要

1. RIAとFlexアプリケーション

FlexはRIA（Rich Internet Application）を代表するインフラとしてすでに世界標準となっています。まずRIAの基礎知識とFlexの特徴をご紹介します

I．RIAの概要とFlex

Flexは、Flash技術を利用して高機能なWebアプリケーションやWebサイトを作成するための製品と技術を含めたソリューションです。

ここで「高機能なWebアプリケーション」とは、Flashの高い表現力と処理能力を利用するユーザにとって使いやすくパフォーマンスが高いアプリケーションをさします。このようなWebアプリケーションはリッチインターネットアプリケーション（Rich Internet Application：以下本連載では「RIA」と呼びます）と呼ばれています。

なお、RIAという概念は、2002年のMacromediaが提唱したもので、Flash技術をベースとした高機能なWebアプリケーションというカテゴリを意味するものです。

II．RIAとFlexアプリケーションの優位点

Flexが可能にするRIAとは、主に次のような特徴と利点を持つインターネットアプリケーションです。

1. 使いやすい
   GUI（Graphical User Interface）で構成されるFlexアプリケーションは、ユーザにとってWindowsやMacで使われるデスクトップアプリケーションと同じように使いやすく、フレンドリーです。
2. 広範囲である
   インターネットを利用するため、ユーザはネット接続とブラウザさえあれば、広い範囲でアプリケーションが使用できます
3. インストールが不要
   ブラウザ上で動作するということはデスクトップアプリケーションのようなインストールや個別のバージョンアップは不要です。ブラウザとネットワークのメンテナンスが必要になります。 Creative Suite製品のようなデスクトップアプリケーションはパソコンにインストールするため、アップデートは各ユーザが行なう必要があります。これに比べてブラウザで稼動させるFlexアプリケーションはWebユーザがインストールやアップデートを行う必要がありません。
4. コンテンツと表現力の充実
   Flash技術を使用するFlexでは、Flash Playerが持つ高度な映像や音楽などのマルチメディア配信やアニメーションを盛り込むことができます
5. パフォーマンスがよい
   クライアント側でアプリケーションの処理を行い、ページの移動もサーバへアクセスすることなく行えるため、ネットワークやサーバへの負荷を抑えることができ、HTMLベースのアプリケーションと比較してパフォーマンスは格段に向上します。

このように多くの利点があることがわかります。FlexによるRIAは、ショッピングカートなどに代表される、HTML/CGIベース、またはHTML/PHPペースのアプリケーションよりもデスクトップアプリケーションに近い高機能なWebアプリケーションをFlash技術を使用して、実現するものといえます。

あえて不利な点を挙げるとすると、アプリケーションのファイルサイズが数MBと大きくなることがあります。しかしすでにインターネットインフラの品質が向上している現在ではさほど大きい問題ではなくなっています。

flex.org のshowcaseでは、FlexによるRIAサンプルを多く見ることができます。

FLEX Showcase

2.HTMLベースのWebアプリケーションとFlexの比較

インターネットアプリケーションで大きなウェイトを占めるCGIやPHP、JavaサーブレットによるWebアプリケーションに比べてFlexアプリケーションはどの点が優れているのでしょうか？ HTTPの処理方式から、その違いをご紹介します。

I. HTTPのステートレスな処理方式

クライアントがブラウザでWebサイトのコンテンツを表示する場合、ブラウザはHTTPリクエストという形でWebサーバに「コンテンツを構成するHTMLファイルやそこで使用されている画像ファイルなどを送ってください」という要求を送信します。その要求を受けたWebサーバは、送信元（クライアントPCのアドレス）に対して、要求されたファイルを送信します。

それらのファイルを受け取ると、ブラウザはHTML文書を解析してコンテンツを表示します。なお、Webサーバはファイルを送信し終えると、そのクライアントに関する情報を忘れて（捨てて）しまいます。

パソコンからWebサイトを閲覧する際、この様な単純な仕組みによって、コンテンツを効率よく（素早く）表示しているわけです。

HTTP通信のイメージ

「サーバはクライアントにデータを送信した跡、そのクライアントに関する情報を破棄してしまう」という方法は、パフォーマンスの向上と記憶容量の節約につながるわけですが、サイトを利用しているユーザに関する情報を持たない、このような処理方式を「ステートレス（stateless）」と呼びます。

II. HTMLページの移動と更新

上記のような単純なやり取りでブラウザがWebページを表示するわけですが、ハイパーリンクをクリックするなどしてページを移動するごとに毎回サーバへのHTTP要求が送信され、ブラウザは戻ってきたHTML文書を受け取って表示します。このように、HTTPとHTMLによるWebコンテンツの閲覧では、基本的にページの移動や更新を行うたびにサーバへのアクセスが発生します。

HTMLベースのWebアプリケーションの処理イメージ

なお、表示を高速化するために、上記のように毎回サーバにアクセスせずに、一度表示したページの情報を保存しておいて次回以降再利用する「Webキャッシュ」とか「インターネット一時ファイル」とか呼ばれる方式が使われています。

III. HTMLによるデータ表示の限界

広く知られているように、HTMLはWeb上のドキュメントを記述するために使われているマークアップ言語ですが、「マークアップ」とは、タグによってテキスト文書に見た目や構造などの指定を行うことを意味します。「タグ」とはHTMLの場合、< > で囲まれた指定文字を表します。

例えば「文字をボールドで表示してください」という指定は、CSSで次のように記述できます。
「ここだけ太字」の部分だけがボールドで表示されます。

<div style="font-weight:bold">ここだけ太字</div>

HTMLによるページでは、画像データを読み込めたり、ハイパーテキストで別の文書へのリンクを設置することができますが、基本的には上の例のようにテキスト文書にマークアップやCSSスタイルを設定したり、表組み機能を利用してページを格子スタイルでレイアウトすることしかできません。

そのため、たとえば業務アプリケーションでよく見られる「スクロールバーつきのデータグリッドで大量データの表示する」というよう画面を作成することはできず、検索エンジンの結果画面のように「次のページ」や「前のページ」というハイパーリンクをたどってページを切り替えるか、縦に長いページに表示することになります。

さらに、ページ切り替えを行う場合サーバープログラムへのアクセスが毎回発生することになります。検索エンジンのような高速なレスポンスを行うには莫大な投資によるインフラの構築が必要なため、通常はレスポンスの課題を様々な方策で克服する必要があります。

HTMLベースのWebアプリケーションの処理イメージ2

IV. CGI/PHP/JavaサーブレットによるWebアプリケーション

PerlによるCGIや、PHP、JSP/サーブレットなどで作成されたWebアプリケーションは、通常HTMLベースの画面構成がとられるため、WebサーバへのHTTP要求がクライアントから送信されると、そのタイミングでプログラムが実行され、「結果をHTMLドキュメントとして要求元に返す」という処理の繰り返しになります。

HTTP要求を処理するサーバ

例えばショッピングカートの内容を確認して「決済画面に進む」ボタンを押すと、次の画面で合計金額の確認が表示されるのは、ボタンを押したときにHTTPリクエストがサーバに送信されてCGI、PHPやサーブレットプログラムが呼び出され、そこで金額を再計算し、画面を作成して送り返すという処理によるものです。

つまり、CGI/PHPやJavaサーブレットによるWebアプリケーションでは、基本的にページを変更するたびに次の処理が行われます。

1. サーバへの要求
2. サーバ上でプログラムが動いてHTMLを作り、クライアントに返す
3. ブラウザがそのHTMLを表示してページ全体を更新する

現在まだ主流といえるHTTPとHTMLによるWebページの欠点ばかりをあげましたが、優れた点は、わかりやすくシンプルな構造であるために多くの人に利用され、Webが普及した一要因となったといえます。

V. FlexによるWebアプリケーション

前置きが長くなりましたが、いよいよFlexアプリケーションの特長をご紹介します。
HTMLベースに比べたFlexアプリケーションの利点、Flexの開発ツールとしての特長をまとめると次のようになります。

1. サーバにアクセスしなくてもページを切り替えることが可能
   FlexアプリケーションはFlash Playerで稼働するSWFアプリケーションです。そのため、Flashで作成したコンテンツがタイムラインによる画面切替えではサーバに一切アクセスしないのと同じように、ページの切り替えをアプリケーション内で自由に行うことができます。さらにFlexには画面切り替えを効率よく（開発時も実行時も）行うための方法が用意されています。これは後の章でご紹介します。
2. ページ全体を再表示しなくても、データを取得して表示できる
   上に述べたように、HTMLベースのアプリケーションではサーバから送られるデータはHTMLドキュメントとしてブラウザに到達するため、基本的にページ全体の切り替えが行われます。Flexアプリケーションでは取得したデータをどのように使うかは完全にプログラミングで制御できます。つまりページ全体を再表示する必要はまったくありません。これは効果的なユーザエクスペリエンスのベースとなります。
3. Flash Playerの高度な機能を利用するアプリケーションを作成できる
   FlexアプリケーションはFlash PlayerのAPI（Application Programming Interface）を使用します。つまり、Flash Playerに備わる限りなく豊富な機能を利用できます。グラフィック処理やアニメーションはもとより、ビデオ、サウンド、XMLデータ処理などのコンポーネントを利用した高度なアプリケーションを構築できます。
4. LiveCycle ESのフロントエンドアプリケーション開発ツールである
   ビジネスプロセスの自動化および効率化を実現するエンタープライズサーバープラットフォームであるLive Cycle ESの開発ツールにFlex Builderが含まれています。Suite製品群の中でもLiveCycle Data Services ES はFlex Data Serviceという製品でリリースされました。これはFlexアプリケーションにサーバサイドの高度なデータ処理を提供するものです。つまりFlexはLive Cycle ESエンタープライスソユーリョンのフロントエンド開発インフラの一つでもあります。

最後に

今回はRIAの基本概念、HTMLベースのWebアプリケーションに比べた場合のFlexソリューションの優位な点をご紹介しました。Flexアプリケーションを作成するにはプログラミングの基礎知識が必要です。そのため、次回はFlexアプリケーションの開発に入るための前提知識をプログラミングの一般的な基礎知識を含めてご紹介いたします。

次回のトピック

• ソースファイルとプログラム開発の基礎知識
• コンパイルの基本概念とFlexコンパイラ
• コンポーネントとは
• Flex Builderでコンポーネントを使う
• ライブラリの基本概念とActionScriptクラスライブラリ
• テストとデバッグ

著者について