ケーススタディ: グラスシャドウエフェクト
「グラスシャドウエフェクト」（または「曇りガラス効果」）は、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年後にどのような対話的機能が実現されるのか、想像してみると楽しいでしょう。
