客を待たせず、不安にさせず：Ajax活用の5つのポイントふたつめ

たにぐちまこと（H2O Space.）
2007/12/20 11:00

Ajaxを使えば、利用者が「待ち」状態の間、不安にならないように工夫することが出来る。今回はその例を示そう。

　インターネットを利用していると、通信回線の不調や時間のかかる処理などで、利用者を「待たせる」事が多々ある。しかし、利用者にとって待つことはストレスになるうえ、「パソコンが不調になったのではないか」とか「うまく操作ができなかったのではないか」など、不安を感じることもあるだろう。

　Ajaxでは、このようなケースでも利用者を不安にさせないことができることが、利点の一つである。例えば、次のようなスクリプトを試してみよう。

　なお、このサンプルスクリプトを試すためには、PHPの動作環境が必要だ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JKL.ParseXMLを使う</title>
<script type="text/javascript" src="js/jkl-parsexml.js"></script>
<script type="text/javascript">
window.onload = function() {
    document.getElementById('btnUpdate').onclick = function() {
        var http = new JKL.ParseXML('site_list.xml.php');
        var data = http.parse();
        document.getElementById('areaName').innerHTML = data.site_list.site[0].name;
    }
}
</script>
</head>

<body>
<p>&quot;name&quot;の内容は「<span id="areaName"></span>」です</p>
<div><input id="btnUpdate" type="button" value="ページを更新する" /></div>

</body>
</html>

<?php
// 10秒間待ちます
sleep(10);
?>
<?php echo '<?xml version="1.0" encoding="UTF-8"?>' ?>
<site_list>
<site>
<name>CNET Japan</name>
<url>http://japan.cnet.com/</url>
</site>
<site>
<name>ZDNet Japan</name>
<url>http://japan.zdnet.com/</url>
</site>
<site>
<name>CNET Venture View</name>
<url>http://v.japan.cnet.com/</url>
</site>
<site>
<name>GameSpot Japan</name>
<url>http://japan.gamespot.com/</url>
</site>
</site_list>

　このスクリプトを実行すると、しばらくの間Webブラウザが反応しない状態になる。PHPであえて意味のない繰り返しを行うことで、処理に時間がかかっている様子を再現したわけだ。これでは、利用者はソフトウェアが不調になったのではないかと不安になってしまうだろう。そこで、次のようにスクリプトを変更してみよう。

記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 昨日のトップ記事
  • 2日前
  • 3日前
  • 8日前
  • 9日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
JavaScript HTML Opera Microsoft Java PHP Webデザイン iPhone 仮想化 UI 脆弱性 Safari SOA iPhone 3G Database オープンソース Linux Mac OS X データベース モバイル RIA Apple Google リファレンス Windows 7 Firefox Internet Explorer セキュリティ WebKit Webサービス 開発環境 Mozilla プログラミング言語 Windows Adobe ソフトウェア開発 OS ツール Windows Vista Tips Firefox 3 アプリケーション ブラウザ Off Topic Flash Chrome 小技 iPod touch CSS Ajax
  • 話題のタグを見る »