SHOEISHA iD

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

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

japan.internet.com翻訳記事

XMLとXSLによるプログレスバーの使用

XMLとXSLを使った高度なUIデザイン:パート6

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

グラフまたはアンケート結果の表示手段として利用する

概要

 サンプルのプログレスバーを使って、グラフやアンケート結果を表示することもできます。図3は、このプログレスバーを使って「Yes」または「No」という選択肢からなるアンケート結果を表示したものです。

図3 アンケート結果の表示
図3 アンケート結果の表示

プログレスバーのセットアップ

 このプログレスバーは、次に示すスクリプトによってクライアント側でセットアップされます。

<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」だけのアンケート結果を表示するために、percentYespercentNoという2つの変数を宣言しています。これらの変数はProgressIndicatorクラスとして初期化されます。

 init()関数では、変数の作成と初期化を行った後に、XMLおよびXSLT(XSL Transformations)ファイルへのパスを設定します。percentYesオブジェクトには「ProgressIndicatorGreen.xml」ファイルへのパスを指定し、percentNoオブジェクトには「ProgressIndicatorRed.xml」ファイルへのパスを指定しています。これらのXML設定ファイルは、「Yes」と「No」の各バーの色の設定、さらに開始パーセント値の初期化を行います。

 ここまでの手順を終えたら、「Yes」と「No」それぞれのinit()メソッドを呼び出して各プログレスバーを初期化します。このinit()メソッドの呼び出しにより、初めてプログレスバーが表示され、適切な場所に配置されます。

プログレスバーのメリット

 このプログレスバーまたは同様の仕組みを利用することで、アプリケーションのユーザビリティを向上させることができます。進捗状況を一切表示しないまま、420レコードのデータバインド処理をするのに6秒も待たせたり、1600レコードの処理をするのに24秒も待たせたりすることはなくなります。ユーザーに最新の状況を知らせることによって、アプリケーションがフリーズしているわけではなく動作中であることを通知できるのです。

デモ

  1. データバインドのデモ
  2. アンケート結果およびグラフ表示のデモ

終わりに

 本稿の内容が、Webアプリケーションインターフェイスの質的向上に役立てば幸いです。質問・コメント・提案があれば、著者紹介にあるアドレスまで遠慮なくメールをお送りください。

 また、データバインド機構を非同期処理にしてくれたMicrosoftの面々に感謝します。

本連載のその他の記事

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

japan.internet.com(ジャパンインターネットコム)

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

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

Joe Slovinski(Joe Slovinski)

1993年以来、Webアプリケーションの開発に継続的に携わる。本稿で紹介したコードについてのお問い合わせはJoe Slovinskiまで。

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/272 2006/04/11 19:07

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング