Ajax活用のポイント：ページ遷移とユーザビリティの関係

たにぐちまこと（H2O Space.）
2008/01/16 15:00

AjaxなWebサイトは画面の遷移こそ少ないが、変化が分かりづらいという欠点もある。これを克服しよう。

　エフェクト系のライブラリにはscript.aculo.usや、jQueryなどが著名だ。どちらも情報は豊富なので、日本語の解説サイトなどを探してみると良いだろう。筆者がよく利用しているのは、AdobeのAdobe Spry framework for Ajax（以下、Spry）というライブラリである。

　次にSpryを利用して、先のエフェクトを利用する方法を紹介しよう。

　まずは「ハイライト」だ。リスト1のようなHTMLを準備しよう。

リスト1

<!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>Spryのハイライトを使う</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input name="btnClick" type="button" id="btnClick" value="ハイライトする" />
</form>
<div id="areaHighlight">この部分がハイライトします</div>
</body>
</html>

　Spryを先ほどのWebサイトからダウンロードし、「includes」フォルダと「widgets」フォルダを適当なフォルダにコピーする。そして、リスト2のようにして参照しよう。

リスト2

<script type="text/javascript" src="includes/SpryEffects.js"></script>

　後は、ボタンをクリックしたときのスクリプトとして次のように記述すれば良い。

リスト3

<input name="btnClick" type="button" id="btnClick" onclick="Spry.Effect.DoHighlight('areaHighlight');" value="ハイライトする" />

　このスクリプトを実行すると、ボタンをクリックすることで下の要素がハイライトする。ハイライトの色やアニメーションの速度などは、カスタマイズすることができるので、必要に応じて変更すると良いだろう。

　また、2番目のサンプルで紹介した演出は「ウィジット」と呼ばれるコントロールを利用している。ウィジットとは、便利な機能を小さくまとめたものを、簡単に組み込むことができるようにして提供しているものだ。Spryには、先の「Accordionウィジット」のほか、「Toolbar」や「Menubar」など、いくつかの種類が提供されており、いずれも完成度が高く、非常に便利なウィジットといえる。

　例えば、Accordionウィジットを使うためには、あらかじめ次のようなHTMLを準備する。

記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 昨日のトップ記事
  • 2日前
  • 3日前
  • 4日前
  • 5日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Mac OS X プログラミング言語 Internet Explorer リファレンス Safari Webアプリケーション開発 Ruby Ajax CSS 小技 携帯電話機 プロジェクト管理 SOA Java XML Firefox Opera Python Off Topic Webサービス server Windows モバイル 脆弱性 iPhone 3G Apple 開発環境 HTML Adobe Mozilla Linux Apache データベース Google iPod touch 仮想化 Firefox 3 Database 入門 ブラウザ RIA Webデザイン Tips JavaScript オープンソース Flash PHP ソフトウェア開発 iPhone 仮想化ソフトウェア
  • 話題のタグを見る »