レベル: 中級 Brian J. Dillard (bdillard@pathf.com), VP, Ajax Development, Pathfinder Development
2008年 5月 06日 Ajax (Asynchronous JavaScript + XML) の手法は大規模な商用 Web アプリケーションの様相を一変させましたが、規模の小さな多くの Web サイトにはユーザー・インターフェース (UI) をまるごと一晩にしてリビルドするだけのリソースはありません。しかし Ajax による新しい機能を利用すると、実際のインターフェースの問題が解決され、ユーザー・エクスペリエンスも改善されることで、新しい機能にかかるコストが妥当なものであることが証明されるはずです。この連載を読んで、皆さんの UI をオープンソースによるクライアント・サイドのライブラリーを使って徐々に最新のものにする方法を学んでください。今回の記事では、単純なライトボックスとツールチップの手法を使うことで、ポップアップ・ウィンドウを使わないようにし、さらにナビゲーションが脇道にそれて先に進まなくならないようにする方法を紹介します。またそれを実現するために、Progressive Enhancement (漸進的な機能拡張) の原則を利用し、高度な UI 機能でもサイトのアクセシビリティーや Web 標準遵守の妨げにならないことを保証します。
この記事について
この記事では、Web 1.0 のショッピング・サイトを Ajax の手法を使って改良する手順を紹介します。サンプル・アプリケーションを「改良する前」と「改良した後」のソース・コードはダウンロードすることができます。また、この 2 つのバージョンが実際に動作する様子を著者の Web サーバーで確認することもできます。Ajax の手法とベスト・プラクティスに加え、さらに Ajax が Progressive Enhancement の原則によってユーザー・エクスペリエンスをどのように改善するかについても説明します。
この記事では、読者が HTML および CSS について十分理解していること、そして少なくとも JavaScript および Ajax プログラミング手法についての基礎知識があることを前提とします。サンプル・アプリケーションはクライアント・サイドのコードのみを使用して構築しているため、ここで紹介する手法はサーバー・サイドのどのアプリケーション・フレームワークにも適応できるはずです。サンプル・サイトを実行するには、ローカル・ホスト上で動作する基本的な Web サーバーが最低限必要になります。あるいは、ソース・コードを追いかけ、筆者の Web サーバーでサンプル・サイトの動作を確認するのでも構いません。
「Ajax による改良: 第 1 回」の復習
この連載の第 1 回ではサンプル・アプリケーション、Customize Me Now について紹介し、このアプリケーションを Web 1.0 バージョンから Ajax で強化した Web 2.0 バージョンに改良するプロセスを開始しました。改良するにあたって、ビジネス上の理由とユーザビリティーからの理由を説明し、Progressive Enhancement の定義、そしてその原則がユーザー・エクスペリエンスをどのように改善するかを明らかにしました。また、オープンソースのツールとして jQuery JavaScript フレームワーク、そして ThickBox、jQuery Forms、jTip、GreyBox などのプラグインをセットアップする方法も説明しました。前回はそのうちの ThickBox と jQuery Forms を使って、ナビゲーションの脇道をモーダル・ダイアログに変えることでユーザーのナビゲーション・フローを簡素化しましたが、これは大改良のほんの一部に過ぎません。今回は jTip と GreyBox を使用して引き続きサイトを改良します。作業が完了したら、サンプル・アプリケーションの改良前と改良後のバージョンを見比べて、サイトがいかに改善されているかを確認してください。
jTip を使用してポップアップ・ウィンドウをツールチップに変換する方法
モーダル・ダイアログを実装した第 1 回の復習が終わったところで、引き続きナビゲーションの改良に取り掛かります。その方法として、今度は jTip を使用してすべてのポップアップ・ウィンドウをツールチップに変換します。ThickBox と同じく jTip を実装するのも簡単なことで、変換したいリンクごとに以下の属性を追加するだけで実装できます。
- 「jTip」に設定した
class 属性。この魔法の言葉が、jTip の DOM (Document Object Model) 解析ルーチンにリンクをツールチップに変換するようアラートを出します。リンク要素に既に class 属性があるとしても、単純に追加クラスとして「jTip」を追加することができます。
-
id 属性。この属性には、jTip がリンクへのオブジェクト参照を取得できるように各リンクに固有の値を設定します。この属性がありさえすれば、id にはどのような値を設定しても構いません。
-
name 属性。jTip はこの属性を使用してツールチップ内にヘッダーをレンダリングします。この場合も同じく、属性が存在すること自体が肝心なので、その値は何にすることもできます。ヘッダーを表示したくない場合には、単純にこの値を空のストリングに設定してください。
上記の属性をマークアップに追加すると、それぞれのポップアップ・リンクはリスト 1 のようになります。
リスト 1. jTip リンクの HTML コード
<a class="jTip" name="About Pizza" id="pizza" target="productPopup"
href="productPopup.html?product=A">Pizza</a>
|
あとは CSS を調整すればよいだけです。Customize Me Now 1.0 に組み込まれた CSS ファイルは、マウスを重ねるとその色が変化する下線付きの赤いテキストのリンク要素の大部分をレンダリングします。ユーザーは、下線付きリンクはクリックできるものと考えますが、これらの jTip リンクはクリックできません。ツールチップは、ユーザーがマウスを重ねると起動されます。そこで必要となると考えられるのは、ユーザー操作を促すようにツールチップを目立たせながらも、他のリンクとは多少異なるスタイルを設定することです。そのためには、新しい CSS 宣言を使って jTip クラスにカスタム・スタイルを追加します。色は赤のままにしますが、下線とホバー状態は削除します。その際、ツールチップ・コンテンツの幅を制御する新規 CSS 宣言を追加して、ツールチップにスクロールバーが必要にならないようにしてください。この新しい宣言は、jTip は id 属性が「JT」に設定された div にツールチップをラップするという事実に基づきます。最後に、ツールチップ・コンテンツの見出しを非表示にする別の宣言を作成します。こうすれば、jTip がリンクの name 属性から自動的に生成するヘッダーを使用できるようになります。リスト 2 に示すのは、上記の作業が完了した後の新しい CSS の一例です。
リスト 2. jTip の CSS
/*restyle tooltip links*/
#CMN a.jTip {
text-decoration: none;
color: #930;
}
/*narrow the width of pages that will be rendered by jTip*/
#JT #main.popup {
width: 200px;
padding: 4px;
}
/*hide the headline of pages that will be rendered by jTip*/
#JT #main.popup h1 {
display: none;
}
|
jTip の動作を確認するには、Web ブラウザーに表示された 2.0 バージョンの Search Results ページで製品の名前、または製品のオプションにマウスを重ねてください。すると、図 1 のような画面が表示されるはずです。
図 1. jTip の動作を示すスクリーンショット
GreyBox を使ってオフサイト・リンクをライトボックスに変換する方法
ナビゲーションの脇道が排除され、Customize Me Now 2.0 の形ができあがってきました。いまや必要なのは、オフサイト・リンクに対処することのみです。Search Results ページには、メーカーの Web サイトへのポップアップ・リンクがまだ残っています。前のセクションで jTip を使って置き換えたポップアップ・ウィンドウとは異なり、ポップアップ・リンクからアクセスする先は完全に機能する Web サイトなので、制御することはできません。このような Web サイトはツールチップとしてレンダリングするには大き過ぎます。また、モーダル・ダイアログに表示するにも残りのアプリケーションとあまりにもかけ離れています。そこで活躍するのが、GreyBox です。
多目的に使える ThickBox では iframe ウィンドウ、Ajax データ、画像スライドショー、そしてその他にもさまざまなタイプのコンテンツを扱うことができますが、余分な機能を取り払った GreyBox の目的は 1 つしかありません。それは、Web サイトに半透明のオーバーレイを重ね、その上に別の Web サイトを開くことです。このライトボックス方式とモーダル・ダイアログとの違いは微妙なものですが、外観は驚くほど異なります。ポップアップ・リンクに ThickBox を使うこともできるとは言え、その場合には 2 つのサイトの違いはそれほど明確になりません。ここで必要なのは、ユーザーが目にしているのがまったく別のサイトであるとわかるようにすることです。
GreyBox を使ってリンクを有効にするプロセスは、今ではお馴染みになっていることでしょう。つまり、一連の属性をリンクに追加すればよいだけです。
-
title: GreyBox オーバーレイのキャプションを指定します。
-
rel: このあまり使用されることのない HTML 属性を追加し、値を「gb_page_fs[]」に設定します。これも同じく、オープンソースのライブラリーを有効にする特殊な属性です。
上記の属性をオフサイト・リンクに追加すると、それぞれのポップアップ・リンクはリスト 3 のようになります (ただし現実の世界では、Google がピザを製造することはないはずです)。
リスト 3. GreyBox リンクの HTML
<a target="_new" href="http://www.google.com" title="Let's Pretend Google Is
Our Product's Manufacturer" rel="gb_page_fs[]">manufacturer's website</a>
|
前と同じく、GreyBox の動作を確認するには Customize Me Now 2.0 の Search Results ページをブラウザーに表示し、メーカーの Web サイトへのリンクをクリックしてください。すると図 2 のような画面が表示されるはずです。
図 2. GreyBox の動作を表すスクリーンショット
これまでの成果
これで、すべての作業は完了しました。しかし、この Ajax による改良で Customize Me Now はどのように変わったのでしょうか。そしてどのようなメリットがあるのでしょう。
改善されたユーザー・エクスペリエンス
これまでの変更によってもたらされたメリットは、図 3 を一目見ればわかります。これは、元の 1.0 バージョンのサイト・マップです。
図 3. Customize Me Now 1.0 のサイト・マップ
今度は図 4 を見てください。2.0 バージョンに改良後のサイト・マップでは、検索から購入までのナビゲーション・パスが一直線になっています。これは従来からのメイン・ルートの模範であり、サイトの所有者が、ツールチップやライトボックスを利用することでプロセスをユーザーにわかりやすくしています。アクセスする情報はすべて同じですが、追加データはプロセス内でポップアップ表示されるようになっているため、ユーザーがコンテキストから外れることはありません。
図 4. Customize Me Now 2.0 のサイト・マップ
Progressive Enhancement (漸進的な機能拡張)
また、JavaScript 嫌いの場合でもアプリケーションが停止することなく動作するよう、機能強化に成功しました。それを確かめるには、ブラウザーで JavaScript の実行を無効にして 2.0 サイトを操作してください。サイトは Customize Me Now 1.0 とほとんど同じように動作するはずです。一部のリンクは多少違って表示されるものの、その点を抜かせば動作に変わりはありません。
その他にも可能な改善
Customize Me Now は 1.0 バージョンから 2.0 バージョンへの変更で大きな変身を遂げていますが、アプリケーションを改善するために実行できる作業はその他にもたくさんあります。
従来の Ajax 機能
お気付きかもしれませんが、ツールチップとモーダル・ダイアログは従来の Ajax 呼び出しというわけではありません。ここでは HTML 文書全体をロードしていますが、通常の Ajax 機能は XHTML、XML、または JSON (JavaScript Serialized Object Notation) の小さな塊をロードします。ThickBox と jTip は、このような一般的な Ajax の形にも対応しますが、文書全体をロードすることで、各ページの Ajax バージョンと Ajax 以外のバージョンの両方に同じ URL を使用することを可能にしています。斬新的な機能拡張 (Progressive Enhancement) という目標を考えると、この方法が一番の近道です。従来の Ajax では、サーバー・サイドのテンプレート・フレームワークを変更しなければならなくなります。さらに、サーバーがページ全体を返すことも、各ページのコンテンツのみを返すこともできるようにするためには、レンダリング・ロジックを URL に追加するためのカスタム JavaScript コードも作成しなければなりません。jQuery の威力のおかげで、このコードに多くの行が必要になることはありませんが、このクライアント・サイドのデモにはそのようなカスタム・コードは不要です。
セキュリティー対策
このデモではまったく対処していない Ajax 開発の側面が 1 つあります。それは、セキュリティーです。Web アプリケーションのセキュリティーはそれだけを取っても壮大な話題になるため、この記事では取り上げていません。ある意味、このサンプルはクライアント・サイドのコードにのみ重点を置くことでセキュリティーについてはごまかしています。多くのセキュリティー対策は、サーバーに実装する必要があります。そうは言っても、技術スタックの全レベルの開発者が、アプリケーション全体のセキュリティーに個人的責任を負わなければなりません。フロントエンドの開発者もその例外ではありません。多くの不正なハッキングは、JavaScript コード、CSS、そしてマークアップの脆弱性を利用して行われるからです。この話題に関する詳細は、「参考文献」セクションを参照してください。
ここから先の展開
カスタマイズのプロセスを紐解いた今、アプリケーション拡張の可能性はさらに広がっています。以下に、JavaScript および CSS を調整することによって、行うことができる機能強化のほんの数例を紹介します。
- jTip、ThickBox、および GreyBox ダイアログがサイトのルック・アンド・フィールに一層調和するように、カスタム CSS でスキンを設定します。
- jQuery とそのさまざまなエフェクトのプラグインを使用して、jTip および ThickBox への表示切り替えにビジュアル・エフェクトを加えます。ダイアログが起動されたり、閉じられたりするたびに行われる、ディゾルブ、テレスコープ、あるいは「ポップ」などのエフェクトが考えられます。
- Product Details のコンテンツを複数のコンポーネントに分け、ユーザー・レビューや画像ギャラリーなど、コンテンツのタイプごとに個別のリンクを提供します。
- 関連製品を販売するためのコンテンツを Confirmation ページに加えて改良します。現時点では、このページは注文詳細を表示するだけですが、この詳細すべてを ThickBox ウィンドウ内に隠し、画面の表示領域をより有用な内容に使用することができます。
最終的な考察: Ajax 機能は役立ちますが、乱用は禁物です
これまで Ajax をアプリケーションに追加するために行った作業を考えると、Ajax があらゆる問題に対するソリューションのように思えるかもしれませんが、それは違います。
Customize Me Now でモーダル・ダイアログとツールチップが当然のソリューションとなった理由は、そこにレンダリングされるコンテンツがサイズの点で管理可能であり、単純なスクロール・インターフェースを使用していたからです。モーダル・ダイアログに表示するには相応しくないページはたくさんあります。例えば、複合 DHTML (Dynamic HTML) タブや複雑な対話型 UI ウィジェットを使用しているページは、独立したページのままにしておくべきでしょう。ユーザー・エクスペリエンスを十分考慮せずに Ajax 機能を何層にも積み重ねていくことは避けなければなりません。
同様に、ThickBox はプロセス・ページではなく、情報ページ用に確保しておく必要があります。Customization ページを ThickBox ウィンドウに詰め込んで、そのウィンドウを Search Results ページにポップアップ表示させることも当然可能ですが、このようなインターフェースにユーザーがどう反応するか、そしてこのようなコードをどうやって作成するのかを考えてください。ユーザーが ThickBox ウィンドウのなかで製品をカスタマイズして Submit をクリックすると、ショッピング・カートが同じ ThickBox ウィンドウに表示されるようにするのか、その下にあるページを動的に更新するのか、さらに重要な点として、ユーザーがカスタマイズ・プロセスで自分がどの過程にいるのかわからなくなってしまう可能性はないのかを考えてください。
高度な Ajax アプリケーションでは 1 つの画面内で充実した対話性を実現できますが、そのようなアプリケーションは土台から構築するのが一般的です。それには慎重な計画、情報アーキテクチャー、そしてユーザー・エクスペリエンスの設計が必要となります。既存のアプリケーションを改良するときには、欲張らないほうが大抵は効果が上がります。この演習が目標としたのは従来の Web サイトに Ajax の魔法を少々加えることです。完全に Ajax をベースとしたインターフェースをお望みなら、おそらくゼロから始めることになっていたでしょう。
ダウンロード | 内容 | ファイル名 | サイズ | ダウンロード形式 |
|---|
| Source code for the original demo app | wa-aj-overhaul2OnePointZero.zip | 24KB | HTTP |
|---|
| Source code for the retrofitted demo app | wa-aj-overhaul2TwoPointZero.zip | 88KB | HTTP |
|---|
More downloads 注 - 著者の Web サイトで、このアプリケーションの動作を確認してください。
- 著者の Web サイトで、すべての変更を加えた後のアプリケーションの動作を確認してください。
参考文献 学ぶために
製品や技術を入手するために
- jQuery Web サイトで、jQuery と追加プラグインのすべてについて学んでください。この記事を書いている時点での最新バージョンは 1.2.1 です。
- jQuery プラグインの 1 つ、jTip を使うと、情報を表示するポップアップ・ウィンドウをブラウザーに依存しない単純なツールチップに置き換えられます。
-
ThickBox プラグインを使って、Product Details ページと Comparison ページをモーダル・ウィンドウにロードします。この記事のサンプル・アプリケーションで使用しているのはバージョン 3.1 です。
- この記事で使用したサンプル・アプリケーションの Comparison ページにはフォーム・パラメーターが必要なため、このページを ThickBox でレンダリングするには多少のカスタム JavaScript コードを作成しなければなりません。幸い、jQuery Forms ユーティリティー・ライブラリーがその作業の大部分を代わりに引き受けてくれます。
-
GreyBox も同じく jQuery のプラグインです。このプラグインによって、単純で見栄えのいいライトボックスでメーカーの Web サイトにリンクすることが可能になります。この記事のサンプル・アプリケーションで使用しているのはバージョン 5.53 です。
議論するために
著者について  | 
| | Web 開発者としての 12 年間、Brian J. Dillard は Orbitz Worldwide、Reflect True Custom Beauty、Archipelago LLC、United Airlines といったさまざまな会社のためにリッチなユーザー・インターフェースをビルドしてきました。現在、シカゴの Pathfinder Development で RIA の熱烈な支持者として活躍する彼は、多様なクライアントのためにリッチ・インターネット・アプリケーションをビルドする傍ら、オープンソース・プロジェクトに参加し、Agile Ajax ブログにも投稿しています。彼がプロジェクト・リーダーを務める Really Simple
History は、人気の高い Ajax の履歴およびブックマーク・ライブラリーです。 |
記事の評価
| 
