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

たにぐちまこと(H2O Space.)
2008-01-16 15:00:00
  • このエントリーをはてなブックマークに追加

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

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

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

リスト1





Spryのハイライトを使う



この部分がハイライトします

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

リスト2


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

リスト3


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

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

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

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]