2.HTMLベースのWebアプリケーションとFlexの比較
インターネットアプリケーションで大きなウェイトを占めるCGIやPHP、JavaサーブレットによるWebアプリケーションに比べてFlexアプリケーションはどの点が優れているのでしょうか? HTTPの処理方式から、その違いをご紹介します。
I. HTTPのステートレスな処理方式
クライアントがブラウザでWebサイトのコンテンツを表示する場合、ブラウザはHTTPリクエストという形でWebサーバに「コンテンツを構成するHTMLファイルやそこで使用されている画像ファイルなどを送ってください」という要求を送信します。その要求を受けたWebサーバは、送信元(クライアントPCのアドレス)に対して、要求されたファイルを送信します。
それらのファイルを受け取ると、ブラウザはHTML文書を解析してコンテンツを表示します。なお、Webサーバはファイルを送信し終えると、そのクライアントに関する情報を忘れて(捨てて)しまいます。
パソコンからWebサイトを閲覧する際、この様な単純な仕組みによって、コンテンツを効率よく(素早く)表示しているわけです。
「サーバはクライアントにデータを送信した跡、そのクライアントに関する情報を破棄してしまう」という方法は、パフォーマンスの向上と記憶容量の節約につながるわけですが、サイトを利用しているユーザに関する情報を持たない、このような処理方式を「ステートレス(stateless)」と呼びます。
II. HTMLページの移動と更新
上記のような単純なやり取りでブラウザがWebページを表示するわけですが、ハイパーリンクをクリックするなどしてページを移動するごとに毎回サーバへのHTTP要求が送信され、ブラウザは戻ってきたHTML文書を受け取って表示します。このように、HTTPとHTMLによるWebコンテンツの閲覧では、基本的にページの移動や更新を行うたびにサーバへのアクセスが発生します。
なお、表示を高速化するために、上記のように毎回サーバにアクセスせずに、一度表示したページの情報を保存しておいて次回以降再利用する「Webキャッシュ」とか「インターネット一時ファイル」とか呼ばれる方式が使われています。
III. HTMLによるデータ表示の限界
広く知られているように、HTMLはWeb上のドキュメントを記述するために使われているマークアップ言語ですが、「マークアップ」とは、タグによってテキスト文書に見た目や構造などの指定を行うことを意味します。「タグ」とはHTMLの場合、< >
で囲まれた指定文字を表します。
例えば「文字をボールドで表示してください」という指定は、CSSで次のように記述できます。
「ここだけ太字」の部分だけがボールドで表示されます。
<div style="font-weight:bold">ここだけ太字</div>
HTMLによるページでは、画像データを読み込めたり、ハイパーテキストで別の文書へのリンクを設置することができますが、基本的には上の例のようにテキスト文書にマークアップやCSSスタイルを設定したり、表組み機能を利用してページを格子スタイルでレイアウトすることしかできません。
そのため、たとえば業務アプリケーションでよく見られる「スクロールバーつきのデータグリッドで大量データの表示する」というよう画面を作成することはできず、検索エンジンの結果画面のように「次のページ」や「前のページ」というハイパーリンクをたどってページを切り替えるか、縦に長いページに表示することになります。
さらに、ページ切り替えを行う場合サーバープログラムへのアクセスが毎回発生することになります。検索エンジンのような高速なレスポンスを行うには莫大な投資によるインフラの構築が必要なため、通常はレスポンスの課題を様々な方策で克服する必要があります。
IV. CGI/PHP/JavaサーブレットによるWebアプリケーション
PerlによるCGIや、PHP、JSP/サーブレットなどで作成されたWebアプリケーションは、通常HTMLベースの画面構成がとられるため、WebサーバへのHTTP要求がクライアントから送信されると、そのタイミングでプログラムが実行され、「結果をHTMLドキュメントとして要求元に返す」という処理の繰り返しになります。
例えばショッピングカートの内容を確認して「決済画面に進む」ボタンを押すと、次の画面で合計金額の確認が表示されるのは、ボタンを押したときにHTTPリクエストがサーバに送信されてCGI、PHPやサーブレットプログラムが呼び出され、そこで金額を再計算し、画面を作成して送り返すという処理によるものです。
つまり、CGI/PHPやJavaサーブレットによるWebアプリケーションでは、基本的にページを変更するたびに次の処理が行われます。
- サーバへの要求
- サーバ上でプログラムが動いてHTMLを作り、クライアントに返す
- ブラウザがそのHTMLを表示してページ全体を更新する
現在まだ主流といえるHTTPとHTMLによるWebページの欠点ばかりをあげましたが、優れた点は、わかりやすくシンプルな構造であるために多くの人に利用され、Webが普及した一要因となったといえます。
V. FlexによるWebアプリケーション
前置きが長くなりましたが、いよいよFlexアプリケーションの特長をご紹介します。
HTMLベースに比べたFlexアプリケーションの利点、Flexの開発ツールとしての特長をまとめると次のようになります。
- サーバにアクセスしなくてもページを切り替えることが可能
- ページ全体を再表示しなくても、データを取得して表示できる
- Flash Playerの高度な機能を利用するアプリケーションを作成できる
- LiveCycle ESのフロントエンドアプリケーション開発ツールである
FlexアプリケーションはFlash Playerで稼働するSWFアプリケーションです。そのため、Flashで作成したコンテンツがタイムラインによる画面切替えではサーバに一切アクセスしないのと同じように、ページの切り替えをアプリケーション内で自由に行うことができます。さらにFlexには画面切り替えを効率よく(開発時も実行時も)行うための方法が用意されています。これは後の章でご紹介します。
上に述べたように、HTMLベースのアプリケーションではサーバから送られるデータはHTMLドキュメントとしてブラウザに到達するため、基本的にページ全体の切り替えが行われます。Flexアプリケーションでは取得したデータをどのように使うかは完全にプログラミングで制御できます。つまりページ全体を再表示する必要はまったくありません。これは効果的なユーザエクスペリエンスのベースとなります。
FlexアプリケーションはFlash PlayerのAPI(Application Programming Interface)を使用します。つまり、Flash Playerに備わる限りなく豊富な機能を利用できます。グラフィック処理やアニメーションはもとより、ビデオ、サウンド、XMLデータ処理などのコンポーネントを利用した高度なアプリケーションを構築できます。
ビジネスプロセスの自動化および効率化を実現するエンタープライズサーバープラットフォームである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クラスライブラリ
- テストとデバッグ