SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(AD)

これからはじめるRIAとFlexプログラミング
~第1回 RIAの基本とFlexの優位点~

FlexとRIAに関する基本知識、開発方法の基礎を習得

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

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

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

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

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

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

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

HTTP通信のイメージ
HTTP通信のイメージ

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

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

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

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

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

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

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

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

 「ここだけ太字」の部分だけがボールドで表示されます。

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

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

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

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

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

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

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

HTTP要求を処理するサーバ
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. サーバにアクセスしなくてもページを切り替えることが可能
  2.  FlexアプリケーションはFlash Playerで稼働するSWFアプリケーションです。そのため、Flashで作成したコンテンツがタイムラインによる画面切替えではサーバに一切アクセスしないのと同じように、ページの切り替えをアプリケーション内で自由に行うことができます。さらにFlexには画面切り替えを効率よく(開発時も実行時も)行うための方法が用意されています。これは後の章でご紹介します。

  3. ページ全体を再表示しなくても、データを取得して表示できる
  4.  上に述べたように、HTMLベースのアプリケーションではサーバから送られるデータはHTMLドキュメントとしてブラウザに到達するため、基本的にページ全体の切り替えが行われます。Flexアプリケーションでは取得したデータをどのように使うかは完全にプログラミングで制御できます。つまりページ全体を再表示する必要はまったくありません。これは効果的なユーザエクスペリエンスのベースとなります。

  5. Flash Playerの高度な機能を利用するアプリケーションを作成できる
  6.  FlexアプリケーションはFlash PlayerのAPI(Application Programming Interface)を使用します。つまり、Flash Playerに備わる限りなく豊富な機能を利用できます。グラフィック処理やアニメーションはもとより、ビデオ、サウンド、XMLデータ処理などのコンポーネントを利用した高度なアプリケーションを構築できます。

  7. LiveCycle ESのフロントエンドアプリケーション開発ツールである
  8.  ビジネスプロセスの自動化および効率化を実現するエンタープライズサーバープラットフォームである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クラスライブラリ
  • テストとデバッグ
「FlexではじめるRIA開発」特集、絶賛公開中!

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

Webシステム開発株式会社 宮田亮(ミヤタ リョウ)

Webシステム開発株式会社 代表取締役 / 開発・教育エンジニア。20年を超えるIT開発・教育・マネージメントキャリアを持つ。Flex、AIR、Java、C/C++、Oracle、MySQL、.NET等を駆使したシステム開発経験を多くもち、現在も開発作業をメインとする。同社サイトでは、AIR、Fle...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4517 2009/10/27 15:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング