Web 2.0エフェクトとリッチクライアントアプリケーション / developer.com

はじめに

　市場には、ユーザーのWebエクスペリエンスを向上させるためのテクノロジが数多く存在します。インターネットが自社のビジネスモデルの不可欠な部分になっている企業の多くは、ユーザーベースを拡大したり、顧客をつなぎとめておくために、そうしたテクノロジを利用しています。たとえばYouTubeやAmazonやYahooは最近、ユーザーエクスペリエンスを向上させるために自社のメインWeb資産にAdobe Flashを導入し、動的なコンテンツを含むウィジェットを利用できるようにしました。このようなWebエフェクトはリッチクライアントアプリケーションとも呼ばれます。リッチクライアントアプリケーションの背景にあるアイデアは、クライアント側により多くのロジックを置いて、アプリケーションの応答性と対話性の両方を高めようとするものです。

　本稿では、Web 2.0ムーブメントと共に現れた種々の新しいWebエフェクトについて取り上げ、これらのWebエフェクトのいくつかを実際のプロジェクトに実装する方法を示します。これらのエフェクトは既存の標準規格に基づいているので、エンタープライズサイトでも個人サイトでも安心して使用できます。最近のAJAXフレームワークの多くは、AJAXを使用するものも使用しないものも含め、さまざまなWebエフェクトに特化した大きなモジュールを備えています。Web 2.0エフェクトは見た目が良いだけでなく、非常に機能的でもあり、次世代のWeb UIの代表的手法となっています。

Web UIの進化

　Webがまだ静的だった頃から、開発者たちはユーザーとWebサイトとの対話性を改善しようと努力し続けてきました。初期の例の1つは、バックグラウンドでロードされ、Webユーザーを楽しませる（または煩がらせる）単調なリズムのMIDI音楽ファイルです。もう1つの例は、複数のフレームをループさせてムービーのように見せるアニメーションGIFのような手法です。アニメーションGIFは一部のサイトではまだ使われていますが、ビデオプラグイン（Quicktime、DivX、WMA）やFlashのような現代的なテクノロジに徐々に置き換えられています。

　90年代末期におけるインターネットのドットコムバブルは、数々の現代的なWeb UIテクノロジの基礎を築きました。また、E-コマースサイトの急増によって動的Webが生み出されました。静的コンテンツと自動生成セクションが複雑に組み合わされるようになり、新しいWebエフェクトが爆発的に普及しました。このようなエフェクトの代表例がマウスロールオーバーやイメージマップ、ドロップダウンナビゲーションメニューなどで、その多くは現在のWeb 2.0サイトでは大幅に改良されています。

　Webエフェクトの多くは、ドラッグアンドドロップや透過性といったデスクトップアプリケーションのエフェクトを発展的改良するものですが、ユーザーとコンピュータとの対話性を全般的に向上させることに貢献しているものも少なくありません。たとえば、Google Mapsのドラッグ可能なイメージエリアなどは、Webメディアで考案されたもので、デスクトップアプリケーションには適用されないエフェクトです。

Web 2.0エフェクト、テクノロジ、フレームワーク

　さて、Web 2.0エフェクトとは何か、あらためて考えてみましょう。なぜ話題になっているのでしょうか。誰かが新しいエフェクトを紹介したときに、なぜブログ界が一斉に盛り上がるのでしょうか。Web 2.0エフェクトとは、サイトとその基本データをユーザーが操作するための方法を表すユニークな手法です。ナビゲーションを提供するエフェクトもあれば、Webページの表示領域を節約するためのエフェクト、データを独特の方法で表示するエフェクト、いくつかのアクションを組み合わせたエフェクトもあります。たとえばGoogleのGoogle Suggest機能は、よく行われるクエリをユーザーの入力中に自動補間することで、入力の手間を減らし、検索を容易にします。DellやAmazonのサイトには、ユーザーが現在のページから去らずに動的な（div要素による）ダイアログを開くことのできる小さなリンクがあり、それによってWebページの表示領域を節約し、ユーザーエクスペリエンスを高めています（Dellではショッピングカートとサイトログインに使用しており、Amazonではウィッシュリストに使用しています）。

　ソーシャルネットワーキングサイトでは、長時間のページリフレッシュを避け、ユーザーにサイトの対話的機能を数多く使ってもらうために、AJAXに大いに依存したWebエフェクトが利用されています。データはAJAXを通じてサーバーから非同期にフェッチされ、クライアント側でDHTMLとJavaScriptによって操作されます。リッチクライアントアプリケーションではAdobe Flash（およびFlex）も使用しており、それによって対話性に優れたアプリケーションを実現し、Webページの一部または全部を動的アプリケーションに置き換えています。たとえば、Fidelity LabsではFlashを多用してリッチクライアントアプリケーションを実現しています。

ケーススタディ: グラスシャドウエフェクト

　「グラスシャドウエフェクト」（または「曇りガラス効果」）は、Yahoo、Kayak.com、DealOgre.comなど、いくつかの人気サイトで導入されています。このエフェクトの背景にあるアイデアは、ページの残りの部分へのアクセスを不能にして、ユーザーに何かの情報を表示するというものです。このエフェクトには多くのバリエーションがありますが、いずれの実装でもメッセージと共にダイアログが表示され、その背後でページの残りの部分がぼかされたり暗くなったりします。

　これはユーザーの注意を即座にダイアログに引き付けて、ダイアログとの対話を促す、かなり印象的なエフェクトです。このエフェクトを実現するためのテクノロジとツールキットはいくつかありますが、本稿ではもっぱらJavaScriptとDHTMLというソリューションを考察します。このアイデアは、現在のページUIをいくつかの層に分離して、Z軸上の最も手前にダイアログを置き、最も奥にページコンテンツ層を置くというものです。

　ページ層の上には、ページ層を覆う「フィラー（filler）」と呼ばれる層があります。フィラー層は通常は透明で、下のページとのユーザー対話を妨げる働きをします。フィラー層の上にはダイアログ層があります。ダイアログ層はドラッグやサイズ変更などが可能な場合もあれば、そうでない場合もあります。

　このエフェクトをJavaScriptとDHTMLで実現するには、DIV要素で透明なフィラー層を作成する必要があります。フィラーDIVのサイズは、ブラウザウィンドウの可視ビューポートに合わせます。JavaScriptロジックとその背景はCSSで設定します。

　以下は、ページ層の上に重なるポップアップダイアログとDIVのスタイルを設定する例です。フィラーDIVのz-indexプロパティ（太字の部分）がダイアログのz-indexより小さいこと、かつ、どちらもページのz-index（デフォルトは0）より大きいことに注意してください。また、フィラーDIVがアルファチャネルのopacityで透明に設定されていることにも注意してください。フィラーDIVの背景に透明イメージを設定することでも、同じエフェクトを実現できます。

<style>
.shade{
   background-color black;
   ''position:absolute;''
   top: 0px;
   left: 0px;
   width:100%;
   height:100%;
   ''filter:alpha(opacity=25);''
   ''-moz-opacity:.25;''
   ''opacity:.25;''
   ''z-index:5;''
   padding: 0px;
   margin: 0px;
}
.popup{
   background-color:#EEEEEE;
   ''position:absolute;''
   top: 200px;
   left: 200px;
   width:200;
   height:100;
   border:1px solid black;
   padding:5px;
   ''z-index:10;''
   text-align:center;
}
</style>

<body>
<textarea rows="5">Type here if you can...</textarea><br>
<!-Visible Shadow Glass element that will cover the whole page ->
<div class="''shade''" id="''smokeglass''"
     style="''visibility:hidden''"></div>

<!- Sample PopUp Dialog box ->
<div class="''popup''" id="''box''"
style="''visibility:hidden''">

</body>

　ブラウザウィンドウのサイズが変更された場合は、それに応じてフィラーDIVのサイズも変更する必要があります。

　以下は、可視ビューポートのサイズを計算するJavaScript関数です。

　window.onresizeイベントに割り当てられるコールバック関数も併せて示します。

function ''calcSize''() {
   var myWidth = 0, myHeight = 0;
   if( typeof( window.innerWidth ) == 'number' ) {
   //Non-IE
   myWidth = window.innerWidth;
   myHeight = window.innerHeight;
   } else if( document.documentElement &&
      ( document.documentElement.clientWidth ||
        document.documentElement.clientHeight ) ) {
   //IE 6+ in 'standards compliant mode'
   myWidth = document.documentElement.clientWidth;
   myHeight = document.documentElement.clientHeight;
   } else if( document.body && ( document.body.clientWidth ||
              document.body.clientHeight ) ) {
   //IE 4 compatible
   myWidth = document.body.clientWidth;
   myHeight = document.body.clientHeight;
   }
   return [myWidth, myHeight];
}

''window.onresize''=function captureResize(){
   document.getElementById("smokeglass").style.width =
      calcSize()[0];
   document.getElementById("smokeglass").style.height =
      calcSize()[1];
   };

　これらをすべて組み合わせると、次のような結果になります。

　あるいは次のようになります。

まとめ

　本稿では、Web UIエフェクトとエフェクトテクノロジの進化について論じ、Web 2.0エフェクトがどのようなものか、それらの作成にどんなツールキットを利用できるか、それらが人気サイトでどのように使われているかを説明しました。これまでWeb UIはゆっくりとしたペースで進化してきましたが、AJAXやFlashといった新しいテクノロジによって進化のスピードは加速しそうです。これからWeb UIがどのように進化し、5年後、10年後にどのような対話的機能が実現されるのか、想像してみると楽しいでしょう。

参考資料

著者紹介

Vlad Kofman（Vlad Kofman）

ウォールストリート有数の企業でエンタープライズレベルのプロジェクトに携わる。また、米国政府の防衛関連の仕事も手がけている。特に関心を寄せているのは、オブジェクト指向プログラミング方法論、UI、デザインパターン。