グラフまたはアンケート結果の表示手段として利用する
概要
サンプルのプログレスバーを使って、グラフやアンケート結果を表示することもできます。図3は、このプログレスバーを使って「Yes」または「No」という選択肢からなるアンケート結果を表示したものです。
プログレスバーのセットアップ
このプログレスバーは、次に示すスクリプトによってクライアント側でセットアップされます。
<SCRIPT LANGUAGE="Javascript"> var percentYes; var percentNo; function init() { percentYes = new ProgressIndicator(); percentNo = new ProgressIndicator(); percentYes.xmlDoc = "ProgressIndicator/ProgressIndicatorGreen.xml"; percentNo.xmlDoc = "ProgressIndicator/ProgressIndicatorRed.xml"; percentYes.xslDoc = "ProgressIndicator/ProgressIndicator.xslt"; percentNo.xslDoc = "ProgressIndicator/ProgressIndicator.xslt"; percentYes.target = percentYesContainer; percentNo.target = percentNoContainer; percentYes.init(); percentNo.init(); percentYes.update(99); percentNo.update(1); } </SCRIPT>
このスクリプトでは、「Yes」と「No」だけのアンケート結果を表示するために、percentYesとpercentNoという2つの変数を宣言しています。これらの変数はProgressIndicatorクラスとして初期化されます。
init()関数では、変数の作成と初期化を行った後に、XMLおよびXSLT（XSL Transformations）ファイルへのパスを設定します。percentYesオブジェクトには「ProgressIndicatorGreen.xml」ファイルへのパスを指定し、percentNoオブジェクトには「ProgressIndicatorRed.xml」ファイルへのパスを指定しています。これらのXML設定ファイルは、「Yes」と「No」の各バーの色の設定、さらに開始パーセント値の初期化を行います。
ここまでの手順を終えたら、「Yes」と「No」それぞれのinit()メソッドを呼び出して各プログレスバーを初期化します。このinit()メソッドの呼び出しにより、初めてプログレスバーが表示され、適切な場所に配置されます。
プログレスバーのメリット
このプログレスバーまたは同様の仕組みを利用することで、アプリケーションのユーザビリティを向上させることができます。進捗状況を一切表示しないまま、420レコードのデータバインド処理をするのに6秒も待たせたり、1600レコードの処理をするのに24秒も待たせたりすることはなくなります。ユーザーに最新の状況を知らせることによって、アプリケーションがフリーズしているわけではなく動作中であることを通知できるのです。
デモ
終わりに
本稿の内容が、Webアプリケーションインターフェイスの質的向上に役立てば幸いです。質問・コメント・提案があれば、著者紹介にあるアドレスまで遠慮なくメールをお送りください。
また、データバインド機構を非同期処理にしてくれたMicrosoftの面々に感謝します。
