リッチインターネットアプリケーション時代の到来 【第3回】
	ColdFusion MXで リッチインターネットアプリケーションを体験

リッチインターネットアプリケーションの実行

　ここまでで、Pet Marketを実行するための環境は準備できた。以下のURLにアクセスして実行しよう。

　すべてが正しくセットアップされていれば、以下のPet marketアプリケーションの実行画面が表示されるはずだ。

Pet Marketアプリケーション　（画面をクリックすると拡大します）

　しばらく、Flashによる優れたユーザーインターフェイスを堪能してほしい。Flashによるクライアントは、一般のクライアントアプリケーションと同様のリッチなインターフェイスを実現するだけでなく、画面の遷移ごとにサーバとの通信が発生しないため、アプリケーションの利用者にストレスを与えないスムーズな動作を提供することがお分かりいただけると思う。

■カタログのブラウジングにおけるメリット

　Pet Marketでは、ペットのカタログのナビゲーションを1つのコンテキストという感覚で進めることが可能だ。具体的には、[dogs]ボタンをクリックすると動物の種類が並ぶボタンリストの中から[dogs]ボタンがズームアウトし、それが犬を選択するメニューボックスになる。同様に、そのリストから特定の犬種を選択すると、その犬の性別や大人・子供の種類を表示するダイアログボックスが表示される。

[dogs]ボタンがズームアウトし、犬種を選ぶ[dogs]ダイアログが表示される。このように、一連のリレーションが直感的に分かるようになっている

　このように、一連のリレーションをアニメーションを用いた演出で直感的に理解できるわけだ。Pet Marketはまだ画面要素が少ないが、より画面要素が多い複雑なアプリケーションでは、ユーザーが自分の行っている操作が一連の操作のどこに位置するかを直感的に理解できる。

　通常のWebアプリケーションでは、多数のウィンドウを開いているうちにウィンドウの所在やウィンドウ間のリレーションを見失ってしまうことが非常に多い。それに対してFlashムービーによるユーザーインターフェイスは、ウィンドウ間のリレーションを直感的にしてくれるというメリットがある。

■Historyの実現

　Pet Marketアプリケーションの画面の右側に「history」機能が配置されている。これは各カテゴリから選択したペットのヒストリが記録されるものだ。よって、historyの中のペットの名前をクリックすると、以前にペットを選択したときの画面にすぐに戻ることができる。ところで、実際に試していただくと分かるが、[back]ボタンを押して前の画面に戻ってもhistoryの内容は同じままである。これは、通常のHTMLをベースにしたWebアプリケーションでは実現不可能である。

　どう実現しているかを簡単に説明すると、ユーザーが行ったすべての行動はローカル上にロードされている「subswf.swf」という名称の隠しFlashムービーに保存される。アプリケーションはgetURLを受け取ったタイミングでsubswf.swfから情報を取得し、[back]ボタンを押した後の画面の描画を行う。このように、隠しFlashムービーを活用したアプリケーションの作成を行うことができるのも大きな特徴だ。

Pet Marketに見る技術的優位性

　さて、次にPet Marketに見る、Flashアプリケーションの技術的な優位性を見てみよう。

■帯域の有効利用

　Pet Market のリッチクライアントユーザーインターフェイスでは、プレゼンテーションとフォーマットがデータから分離されているため、送信されるバイト数が少なくなる。また、クライアントサイドのプロセス（合計の計算、フォームの妥当性検査など）により、サーバへのリクエスト回数が少なくなる。これらの2点の理由により、使用帯域幅が低減されるわけだ。

■パフォーマンス

　マクロメディアは、このPet Marketアプリケーションの負荷テストを以下の環境で行った。

　その結果、ColdFusion MX エンタープライズ版で動作するPet Marketアプリケーションの応答時間は、ユーザー負荷が700人の同時ユーザーまで増大しても実質的に変化しないという結果を得た。

　また、ユーザーから見たアプリケーションの応答性については、従来のHTMLベースのアプリケーションに比べ、サーバとクライアント間の通信回数が少ない分、応答性が非常に良い。Pet Marketの現在のバージョンは1.2であり、前バージョンからいくつかの改良がなされている。例えば、顧客がカートの追加、変更、削除の操作を行うときは、必ずカートの品目の数量と金額合計を確認する。追加、変更、削除のAPI関数が数量と金額の合計を返すように変更することにより、サーバとの往復が1回不要になり、カートの感覚的な応答性が改善されている。

　このように、Flashを用いたアプリケーションではサーバとクライアント間の通信回数が少なくなるようにロジックを実装することで、ユーザーから見た応答性を向上させることができる点が大きな利点といえる。

■本家Java Pet Storeとのコード量の比較

　Pet Marketは、Java Pet Storeを、フロントエンドのユーザーインターフェイスをFlashで、バックエンドのビジネスロジックをColdFusion MX で実装したものだ。Pet MarketとJava Pet Storeのコード量を比較すると下図のようになる。

Pet MarketとJava Pet Storeのコード量を比較

　図は、アプリケーションの構成ごと（構成設定、データベース、中間層、プレゼンテーション層）に、コード量を比較している。特に、中間層のコード量が非常に少なくなっているが、これはColdFusion MXのマークアップ言語（CFML）が、各種データベースバックエンドに必要なデータベース呼び出しなどのコードを効率的にカプセル化しているからだ。

　ここまでFlashアプリケーションの優位性について駆け足で紹介してきたが、マクロメディアのサイトには、ここでは触れられなかったパフォーマンスのデータ、ユーザビリティに関する考察など、さらに詳細な情報が公開されている。では、どのような情報があるのか紹介していこう。

　Pet Marketは、Macromedia Flash MX でリッチユーザーインターフェイスを作成し、ColdFusion MXをサーバのアプリケーションプログラミングインターフェイス（API） に、Dreamweaver MXを開発ツールに利用し、Fireworks MXをビットマップグラフィックの編集と最適化に使って作成されている。Pet Marketは、これらのプラットフォームとツールを使い、リッチなユーザーインターフェイスをもつWebアプリケーションを作成する際の“お手本”を開発者に提供している。Pet Marketがどのようなユーザーインターフェイスをもち、どのようなアーキテクチャで作成されているか、また、Flashによるユーザーインターフェイスはどのようなクラス設計で実装されているかについてが、「Pet Marketブループリントアプリケーションツアー」に詳細に解説されている。

　一方で、Flashによるユーザーインターフェイスと連携するサーバサイドのロジックについて解説したのが「Pet Marketのサーバサイド」だ。Pet Marketで使用されているColdFusion MXの部分、ColdFusionの高速サーバスクリプト環境としての利点は何かについて解説している。また、これをColdFusionコンポーネント（CFC）から具体的に解説したのが「Dreameweaver MXを使用してPet Market用のColdFusionコンポーネントを作成する」だ。

　さらに、本稿ではパフォーマンス比較は一部だけを紹介したが、.NET PetShopも含めたパフォーマンスの比較を詳細に解説しているのが「 Pet Marketのパフォーマンス」である。

　最後に、Pet Marketに関するさまざまな疑問は「Pet Market FAQ」を参照されたい。

　ここまで、Pet Marketアプリケーションを実際に体験しながら、リッチインターネットアプリケーションの優位性について見てきた。次は、読者自身がPet Marketアプリケーションのコードを深く眺めながら、新しいリッチインターネットアプリケーションのパラダイムを探求してほしい。

2/2

リッチインターネットアプリケーション時代の到来 　 第1回　次に来るWebコンピューティングの未来像とは 　 第2回　プロダクトレビュー ColdFusion MX 第3回　リッチインターネットアプリケーションを体験する

もう体験しました？ ColdFusion MXトライアル版ダウンロードページへ リッチインターネットアプリケーションの作成に必要な、 ColdFusion MX の優れた新機能をすべてご使用いただけます