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

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

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

リスト4

<!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>Accordionウィジットを使う</title>
</head>

<body>
<div id="Accordion1" class="Accordion" tabindex="0">
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">ラベル 1</div>
    <div class="AccordionPanelContent">コンテンツ 1</div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">ラベル 2</div>
    <div class="AccordionPanelContent">コンテンツ 2</div>
  </div>
</div>
</body>
</html>

　これらのHTMLは、マニュアルなどを参照しながら組み立てることもできるが、同梱されているサンプルファイルをコピーして使うと良いだろう。上記のリストなら「/widgets/accordion/accordion.html」というファイルに記述されている。

　次に、リスト5のようにして必要なファイルを参照する。

リスト5

<script src="widgets/accordion/SpryAccordion.js" type="text/javascript"></script> <link href="widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" />

　後は、要素の最後などに、次のスクリプトを記述してウィジットを組み込めば完成だ。

リスト6

<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>

　これだけで、切り替え時の演出などを含めて、気の利いた動きを実現することができる。見た目は、CSSのカスタマイズなどで自由に行えるため、他のウィジットも含めて活用すると良いだろう。

記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
秋もやります！ builder tech day
ユーザーにとっては、UIがすべて
RIAやAjaxによりインターフェイスデザインの幅が広がりました。「正しいデザイン」へのアプローチを、テクノロジーとメソドロジー両方の切り口で、具体的にご紹介するリアルイベントです。
  • 2日前のトップ記事
  • 3日前
  • 4日前
  • 5日前
  • 6日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Mozilla iPod touch Python Google iPhone 3G Flash Webサービス 開発環境 Database SOA Apache 仮想化ソフトウェア Opera プログラミング言語 Firefox Tips Ajax 携帯電話機 Internet Explorer JavaScript CSS ソフトウェア開発 Adobe Apple 入門 HTML 脆弱性 Linux データベース プロジェクト管理 Firefox 3 ブラウザ Safari Off Topic Webデザイン Webアプリケーション開発 iPhone 仮想化 Windows PHP 小技 Java リファレンス モバイル XHTML RIA Mac OS X server XML オープンソース
  • 話題のタグを見る »