堅実な Ajax アプリケーション: 第 1 回: フロントエンドを作成する

ページオプション JavaScript を要するドキュメントオプションは表示されません サンプルコード 原文はこちら

レベル: 中級

Brett D. McLaughlin, Sr. (brett@newInstance.com), Author and Editor, O'Reilly Media, Inc.

2007年 10月 16日

Ajax が新しい業界用語として依然話題を集めているなか、Ajax 技術を使用したアプリケーションが次々と作られています。しかし優れたアプリケーションとなると、そう簡単に作れるわけではありません。この記事では、直観的で使いやすい Ajax 駆動型アプリケーションを作成する方法に焦点を当てます。

Ajax は技術に関することではありません。ほとんどの開発者が Ajax を技術と考え、XML や JavaScript などの言語を持ち出して自分たちの見解が正しいと説得しようとしますが、その考えは非常に限られた視点によるものです。それにも増して、誰が開発に係る請求書の支払いをするのかという点を無視しています。お金を出すのはカスタマーです。それがコンサルティング・クライアントであろうとボスであろうと、カスタマーであることに変わりはありません (ボスの場合、あなたがユーザーを満足させるものを作らない限り報酬はありません)。

カスタマーにとって技術はどうでもいいことです。カスタマーが気に掛けるのはアプリケーションを使った際の感覚、つまりマウスとキーボードにアプリケーションがどう反応するかです。世界中のあらゆる技術を採り入れてもアプリケーションが失敗することはあります。逆に、単純な HTML アプリケーションが素晴らしい成果を上げることもあります。目標は技術と使いやすさを結合させることです。これは Ajax アプリケーションの場合には特に当てはまります。

developerWorks の Ajax リソース・センター Ajax Resource Center にアクセスしてください。ここには記事、チュートリアル、ディスカッション・フォーラム、ブログ、ウィキ、イベント、そしてニュースなど、Ajax プログラミング・モデルに関する情報が豊富に用意されており、ワンストップ・ショップになっています。新しい情報もここに記載されます。

Ajax の見所

Ajax によって何がもたらされるかを理解することは、開発者とユーザーの双方にとって重要なことです。アプリケーションを Ajax と呼ぶか否かには関わらず、Web アプリケーションには新しいレベルの期待が存在するため、カスタマーに満足感を与えたいのなら、何が新しく期待されているのかを理解していなければなりません。

使いやすさ

第一に、Ajax の目的は使いやすさにあります。Ajax は非常に素早い応答時間、ウィジェットやビジュアル・ツール、そして他にもあらゆる類の派手な GUI 要素を連想させるので、この使いやすさという目的は一部の開発者にとって予想外のことかもしれません。上述の要素も確かに Ajax のエクスペリエンスの一部ですが、大多数のユーザー (開発者ではなく) が Ajax アプリケーションから受ける単純な印象は使いやすさです。Ajax アプリケーションはユーザーの期待通りに応答し、フィールド、ボタン、画像などのアプリケーションの要素もユーザーが期待する場所に配置されます。

Ajax は、快適に使用できるアプリケーションをもたらします。Ajax アプリケーションでは、郵便番号のフィールドはどこにあるのか、マップでズームインするにはどうすればいいかなど、いろいろと探し回る必要はありません。Ajax アプリケーションを設計しているのなら (実はそのつもりがないとしても)、このレベルの使いやすさを追求しなければなりません。最良の指針となるのは、ユーザー・テストと一般的な感覚です。この記事では後で、アプリケーションを確実に使いやすく直観的なものにする簡単な方法をいくつか取り上げます。

応答性

使いやすさに対処したら、次は Ajax アプリケーションの応答性という面に取り組まなければなりません。単純に考えると、応答性とはスピードの問題のように思えます。Ajax アプリケーションは事あるごとにサーバー・サイド・プログラムにサブミットしてページを更新する必要がないため、(少なくとも理論上は) 待機時間が短縮されます。しかし、Ajax のこの部分での見所は多少怪しいところがあります。DSL の世界では、待ち時間は大してありません。みなさんのお母さんやおばあさんの世代ではダイヤルアップではなくケーブル・モデムが使われていたでしょうが、みなさんがこの記事を職場で読んでいるとしたら、それにはおそらく T1 または T3 が使用されているはずです (訳注: もちろん著者が居住している国 (おそらく米国) での一般的な話です)。Ajax アプリケーションのほうが本質的に速いという考えを論証するには無理があります (たとえそうだとしても、その差はせいぜい 10 ミリ秒や 100 ミリ秒程度のものでしょう。これがどれだけわずかな差かご存知ですか)。

しかしながら、Ajax アプリケーションの応答性は従来のアプリケーションよりも優れているはずです。ここで言う優れた応答性には、スピードだけでなく、アプリケーションを使った際の感覚も関わってきます (その一部は使いやすさとインターフェースに含まれているのでお間違えなく)。例えば、ユーザーが名前を入力してお気に入りの crocs (訳注: crocs は米国に本社を置く靴製造メーカーのブランドです) の色を選択し始めると、ユーザーがそうした作業をしている間、プログラムには何らかの処理を進められるだけの時間が十分あります。そこで、その間にユーザーのアドレスや保存されたクレジット・カード情報、それに友達としてマークを付けた人たちがそのストアにアクセスしたときに購入した商品などを探して取得しておくといったアプリケーションが考えられます。このような情報を取得するには時間がかかるものですが、ユーザーが他の作業に追われているときに情報が準備万端に表示されれば、応答性の高いアプリケーションという印象を受けることになります。

このような応答性を生み出すことは、手の込んだ事態になってきた場合 (詳細は後で説明します) に必要になってきます。フィールドを特定の順序でアプリケーションに配置すると、ユーザーの作業の流れがわかるので、その流れを生かして Ajax による対話動作を記述することができます。この考えを基準に応用を利かせください。これについては後で、特定の例を使って説明します。

デスクトップ・アプリケーションか否か Ajax を使ってすべての Web アプリケーションをデスクトップ・アプリケーションに変えようという動きがあります。とても素晴らしいことのように聞こえますが、実際にはあまり上手くいきません。私が使っている知名度の高い人気の Web/個人向け生産性スイートは Web をベースにしている一方、Microsoft® Office を模倣しようという試みから予定のアラート・メッセージがポップアップ表示されるようになっていて、とても便利です。まるで Outlook や iCal などのデスクトップ・アプリケーションのようだと思うかもしれませんが、この生産性スイートはあくまでもデスクトップ・アプリケーションではありません。そのため、この機能はブラウザーに限定されてしまいます。 その結果どうなるかというと、ポップアップが重宝するのは画面の最前面に Web ブラウザーが表示されている場合のみで、Firefox を最小化したり、InDesign や別のアプリケーションの後ろに追いやられるとポップアップにはまったく気付きません。ポップアップはそのまま消えてしまいます。結局のところ、このスイートの試みは失敗でした。デスクトップ・アプリケーションのように振る舞おうとしたものの、それ自体は Web アプリケーションであることを忘れていたからです。これと同じ過ちは犯さないでください。

デスクトップのような独特のインターフェース

Ajax アプリケーションで最も目立っていると同時に最も区別しにくいのがこの特徴です。Ajax アプリケーションがデスクトップ・アプリケーションのように感じられる (そのような「フィール」を持っている) ことは確かですが、それは多くの場合、デスクトップ・アプリケーションのような外観である (そのような「ルック」を持つ) ことを意味します。私の会社で使用している Zimbra メール・スイートは、Microsoft Outlook に似せてモデル化されています。これは、(私の考えでは) デスクトップ・アプリケーションのように見せることが、デスクトップ・アプリケーションのような感覚を与えることになるという考えからです。

この点については多くの論議があるため少し寄り道して説明すると、Web の目的は新たなデスクトップになることだという声が一部にあります。つまり、今使っているものと同じ (あるいは類似する) アプリケーションを使いますが、オンラインのアプリケーションであるという点が違っており、それ以外の点ではルック・アンド・フィールを変えないということです。一方、Web は独特の分野であり、デスクトップ・アプリケーションより優れている点もあれば、劣っている点もあると考える人々もいます (私としてはこちらの陣営寄りです)。Web は Web 独自の媒体であるため、Web 上のアプリケーションはデスクトップ・アプリケーションの複製として設計するのではなく、デスクトップ・アプリケーションから離れて設計すべきであるという意見です。

いずれにしても、Ajax アプリケーションの外観は、大きなグレーのフォーム送信ボタンと不格好な「border=1」で装飾された 1997年の HTML フォーム以上のものにすることができるのは明らかです。つまり、よりリッチなエクスペリエンスを実現する方法にほとんどの人が反対したとしても、Ajax のパラダイムにはよりリッチなエクスペリエンスを要求する部分が含まれるのです。

サンプル・アプリケーション

手法と理論はこれで十分として、ここからはサンプル・アプリケーションを使って、実際の作業に取り掛かることにしましょう。スムーズに作業を開始できるよう、Nathan Smith の Hoverbox を出発点として選びました (「参考文献」のリンクを参照)。Hoverbox は単純な CSS ベースの Web レイアウトで、マウスをギャラリー内の画像に重ねると、その画像が拡大表示されます。図 1 に、デフォルトの Hoverbox のデモを記載します。

サンプル・アプリケーションでは、まず使いやすさを目的として大きな変更を加えます。それからクールな Ajax 的振る舞いを追加して、画像にマウスを重ねたり、クリックするとその画像についての簡単な情報が表示されるようにします。

Lightbox を使うとさらにクールになります 出回っているウィジェットとしては、Lightbox というさらにクールなウィジェットもあります (「参考文献」セクションを参照)。Lightboxのほうが面白みがあり、見栄えも抜群だと思いますが、必要となるコードがかなり増えることからサンプル・アプリケーションには使用していません。この記事を理解したら、今度はぜひ Lightbox を使ってサンプル・アプリケーションを実装してみてください。

Hoverbox CSS に手を加える

JavaScript に取り掛かる前に、このサンプル・アプリケーションで目指している内容について簡単に説明しておきます。ここでは画像ギャラリーという発想で (Hoverbox CSS を使用)、画像を拡大してポップアップ表示するだけでなく、Ajax を使って該当する画像に関する一連のコメントを表示します。したがって、まず始めに必要となる作業はページにコメント用のスペースを用意することです。

この記事のサンプル・ファイルをダウンロードして、hoverbox.css を見つけてください。これが、画像ギャラリー用の CSS です。このファイルには重要な変更を加えます。リスト 1 と同じになるように編集してください (CSS の内容全体をリスト 1 に置き換えるのでも構いません)。

                

*
{
	border: 0;
	margin: 0;
	padding: 0;
}

/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/

a
{
	text-decoration: none;
}

body
{
	background: #fff;
	color: #777;
	padding: 50px;
}

#page {
  position: relative;
}

#images {
  float: left;
  width: 400px;
}

#details {
  color: #000;
}

h1
{
	background: inherit;
	border-bottom: 1px dashed #ccc;
	color: #933;
	font: 17px Georgia, serif;
	margin: 0 0 10px;
	padding: 0 0 5px;
	text-align: center;
}

p#footer
{
	clear: both;
	font: 10px Verdana, sans-serif;
	padding: 10px 0;
	text-align: center;
}

p a
{
	background: inherit;
	color: #777;
}

p a:hover
{
	background: inherit;
	color: #000;
}

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
        width: 375px;
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -45px;
	z-index: 1;
}

.hoverbox img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.hoverbox li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview
{
	border-color: #000;
	width: 200px;
	height: 150px;
}

/* Info details -----------------------------*/
.info-title {
  color: #933;
}

.info-date {
  font-size: 14px;
  color: #777;
}

.info-text {
  font: 10px Verdana, sans-serif;
  padding: 10px 0;
}

リスト 1 では div 要素のスタイルをいくつか追加しています。その目的は主に、画像ギャラリーを 1 つのユニットとして処理できるようにするためです。このリストでは、もう 1 つの主要な要素として画像 (この後すぐに追加します) の説明に関するスタイルも追加しています。残りの変更のほとんどは外観に関するもので、2 列のレイアウトをサポートします。

次に、HTML にも div 要素を追加します (リスト 2 を参照)。

                

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Hoverbox Image Gallery<title>
<link rel="stylesheet" href='css/hoverbox.css' type="text/css" 
      media="screen, projection" />


                

                

                

                

                

                

                

                
</head>
<body>
<h1>Hoverbox Image Gallery</h1>


<div id="page">

<div id="images">
<ul class="hoverbox">
<li>
<img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo02.jpg" alt="description" /><img src="img/photo02.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo03.jpg" alt="description" /><img src="img/photo03.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo04.jpg" alt="description" /><img src="img/photo04.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo05.jpg" alt="description" /><img src="img/photo05.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo06.jpg" alt="description" /><img src="img/photo06.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo07.jpg" alt="description" /><img src="img/photo07.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo08.jpg" alt="description" /><img src="img/photo08.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo09.jpg" alt="description" /><img src="img/photo09.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo10.jpg" alt="description" /><img src="img/photo10.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo11.jpg" alt="description" /><img src="img/photo11.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo12.jpg" alt="description" /><img src="img/photo12.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo13.jpg" alt="description" /><img src="img/photo13.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo14.jpg" alt="description" /><img src="img/photo14.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo15.jpg" alt="description" /><img src="img/photo15.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo16.jpg" alt="description" /><img src="img/photo16.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo17.jpg" alt="description" /><img src="img/photo17.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo18.jpg" alt="description" /><img src="img/photo18.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo19.jpg" alt="description" /><img src="img/photo19.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo20.jpg" alt="description" /><img src="img/photo20.jpg" 
                 alt="description" class="preview" />
</li>
</ul>
</div>

<p id="footer"> <a href="http://validator.w3.org/check/referer">XHTML</a> 
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> 
<a href="http://www.contentquality.com/mynewtester/cynthia.exe?
Url1=http://host.sonspring.com/hoverbox/">508</a>
 | Hoverbox by <a href="http://sonspring.com/">Nathan Smith</a>. | 
Read the <a href="http://sonspring.com/journal/hoverbox-image-gallery">Tutorial</a>
.</p>
</div>

</body>
</html>

ページを保存してからロードすると、図 2 のように表示されます。

注: この CSS の一部は、ハッキングされやすくなっています。しかし調整に何時間を費やす代わりに、できるだけ直接的な変更を行って作業の内容が明確にわかるようにしました。この CSS を整理して簡潔にしたい場合はご遠慮なくどうぞ。

上に戻る

ユーザー・インターフェースの基本: 左から右への読字方向

お気付きでないかもしれませんが、この変更では非常に重要な決定を行いました。その決定とは、ギャラリーはページの左側に残し、右側には各画像の詳細を追加するということです。選択肢としては以下のものがありました。

• 左側にギャラリーを配置し、右側に画像に関する情報を配置する (先ほど選択した方法です)。
• 右側にギャラリーを配置し、左側に画像に関する情報を配置する (選択した方法とは逆です)。
• 上記の 2 つの選択肢のいずれでもない賢い配置を新たに考え出す。

上記のうち、明らかに選択すべきでないのは 2 番目の選択肢です。なぜなら、欧米人は左から右の方向で読むからです (図 3 を参照)。これは赤ちゃんのときから頭にたたき込まれる方向で、例えば親や祖父母は左から右へと言葉を指し示しながら本を読んでくれます。このように、私たちの目は左から右への動きに慣れています (この記事では説明しませんが、Z トラッキング (z-tracking) と呼ばれる科学が大きく関わっています)。この流れに反することは、数十年も重ねてきた生活習慣に対抗するのと同じでことです。このギャラリーでは、左側に表示された画像をクリックしたり、マウスを画像に重ねた後、視線を右に移して画像の情報を読むことになります。これは極めて自然な感覚なので、ユーザーがインターネットに精通していないとしても、この操作にはすぐに慣れて快適に感じられるはずです。

このパラダイムを逆にすると、右から左への不自然な動作を作り出すことになります (図 4 を参照)。つまり、右側の画像を見てから頭を左方向に戻すように動かして画像に関する情報を読むという動きです。このようにしたとしても、大した問題にはなりそうにはありません。また、ユーザーが「頭を右から左に動かすのには嫌気が差した」と言うはずもありません。けれども研究では、時間が経つにつれ、不自然な流れによって微妙な不快感が生まれることが明らかになっています。したがって、ここでは本の感覚に合わせるのが賢明です。

3 番目の選択肢は、賢い配置を新しく考え出すというものです。例えば、ギャラリーの下に情報をポップアップ表示させたり、ページ上の画像をシャッフルしてギャラリーの中央に該当する画像の情報を挿入するなどの方法が考えられますが、この選択肢は危険です。コンピューターや次世代のアプリケーションに慣れているユーザーには問題にならないかもしれませんが、経験の浅いユーザーにとって (特に写真を見るだけのため、あるいは何の目的もなくログオンしたユーザーにとっては)、このような巧妙な演出は混乱を招いたり、わずらわしく感じられるだけです。慣れていないユーザーは、動き回ったり点滅したりするなどの予期しない動作を望みません。彼らが望むのは、本や新聞を読んでいるような単純でわかりやすいオンラインのエクスペリエンスです。したがって、ユーザー・インターフェースでは左から右への手法に従うことが功を奏します。

上に戻る

データのモックアップ

この時点で、ほとんどの開発者はページの JavaScript イベント・ハンドラーに取り掛かろうとするはずですが、少々お待ちください。その前に、ページ上の残りのデータをどのように表示するかを検討する必要があります。

悩みの種、「組み込み」HTML に対処する

この段階でモックアップ作業を行う最大の理由は、どんなに上手くいったとしても HTML の扱いは悩みの種だからです。HTML は気まぐれで不等号括弧に溢れていますが、私たちはその HTML を扱う方法を学びました。それが、HTML を JavaScript および DOM に組み込むとなると、p 要素や id 属性を間違った場所に配置する可能性はさらに大きくなります。このような苦労をせずに期待したように HTML が表示されるようにする手段が、デﾞータをモックアップすることなのです。

データが正しく表示されれば、後は必要なコードが何であろうと、そこにデータを配置するのはわけありません。また、DOM を操作するときにはデータを取り去って構造だけに焦点を絞ることが必要になりますが、この作業も簡単に行えるようになります。

大きなフォントから小さなフォントへ

ここで、ちょっとした HTML をページに追加します。この HTML は写真ごとにタイトル、日付、そしてジャーナル形式のエントリーをシミュレーションするものです。画像 div の後に追加する「details」という div はページ・フッターの直前に挿入してください。

                

<a href="#"><img src="img/photo20.jpg" alt="description" />
<img src="img/photo20.jpg" alt="description" class="preview" /></a>
</li>
</ul>
</div>

<div id="details">
<h2 class="info-title">Sunrise over the bay</h2>
<h3 class="info-date">27 October, 2006</h3>
<p class="info-text">Here is what I experienced when 
I took this photo.</p>
</div>

<p id="footer"><a href="http://validator.w3.org/check/referer">XHTML</a> 
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
<a href="http://www.contentquality.com/mynewtester/cynthia.exe?Url1=
http://host.sonspring.com/hoverbox/">508</a> | 
Hoverbox by <a href="http://sonspring.com/">Nathan Smith</a>. | 
Read the 
<a href="http://sonspring.com/journal/hoverbox-image-gallery">Tutorial</a>.</p>
</div>

</body>

上記のクラスに対応する CSS は、リスト 1 に記載されています。このページをブラウザーにロードして、正しく表示されることを確認します (図 5 を参照)。

このエントリーは単純に見えますが、ここにはいくつか重要な点があります。なかでもとりわけ重要なのは、ページの下のほうにいくほどテキストが小さくなることです。些細なことのように思えるかもしれませんが、左から右へと認知する Web ページでは大きな効果があります (記事の最初で説明した使いやすさについて思い出してください)。テキストは下に向かって図 6 のように展開するのが理想です。

これは些細なことで、それほど重大なことではないように思えるかもしれませんが、このようなテキストの展開はユーザーがアプリケーションから受ける印象に大きく影響します。実際に、ページ先頭にある画像ギャラリーの見出しをもう少し大きくして、ページにどんな影響があるかを確かめてみましょう。h1 の CSS を以下のように変更してください。

h1
{
	background: inherit;
	border-bottom: 1px dashed #ccc;
	color: #933;
	font: 32px Georgia, serif;
        font-weight: bold;
	margin: 0 0 10px;
	padding: 0 0 5px;
	text-align: center;
}

わずかな変更ですが、図 7 を見るとわかるようにページの外観がかなり変わってきます。

一貫性を持たせること

フォント･サイズを変更した後にページで最大の問題となるのは、フォントが一貫していないことです。見出しは Georgia ですが、写真の詳細、タイトル、日付には別のフォントが使用されています。フォントの違いはページを乱雑に見せるので、CSS の下の方でも簡単な変更を行ってこの問題に対処します。

/* Info details -----------------------------*/
.info-title {
  font: Georgia;
  color: #933;
}

.info-date {
  font: 14px Georgia;
  color: #777;
}

.info-text {
  font: 10px Verdana, sans-serif;
  padding: 10px 0;
}

このように、見出しフォントと一致するようにフォントを Georgia に変更しただけです (CSS でこの変更を行うにはもっと一般的な方法もありますが、ここでも同じく、最もわかりやすい手法を使っています)。

ただし、本文は例外です

お気付きかもしれませんが、本文 (写真に関するテキストの部分) のフォントは、ページの他の部分とは一致していません。その理由は、本文には一貫性のルールが適用されないからです。これは、見出しのフォントが serif の場合はなおさらのことです (例えば「y」の下端を見るとわかるように、serif フォントには小さな飾りが付いています)。

serif フォントは見栄えはいいのですが、大きなテキスト・ブロックではかなり目を疲れさせます。大半の本が sans-serif フォントで印刷されるのは (人気があるのは serif フォントの 1 つ、Times New Roman ですが)、このような理由からです。 実際、ほとんどの出版社が sans-serif フォントで作成した原稿を提出するよう求めています。したがって、サイズの小さな長いテキストには sans-serif フォントを使ってください。図 8 に、すべてのフォント変更を行った結果を示します。

多少のスペースを設ける

最後に残された問題は、先頭のタイトルが画像および詳細説明と近づき過ぎていることです。この問題は、見出しと画像の間のマージンを増やすだけで簡単に修正することができます。

h1
{
	background: inherit;
	border-bottom: 1px dashed #ccc;
	color: #933;
	font: 32px Georgia, serif;
        font-weight: bold;
	margin: 0 0 20px;
	padding: 0 0 15px;
	text-align: center;
}

上記の変更により、ページは図 9 のように表示されるようになります。

以上は些細な変更で、取るに足らない無駄な努力に思えるかもしれません。しかし、この記事の冒頭で説明した内容を肝に銘じてください。つまり、アプリケーションは生身の人間を対象にしているということです。アプリケーションは技術をひけらかすためのものではありません。フォントを調整し、すべてに一貫性を持たせ、そして程よいスペースを持たせることが、プロならではの使いやすいアプリケーションを作り出すことになるのです。

上に戻る

ところで Ajax の関わりは?

この記事を共有する Digg へ投稿 del.icio.us へ投稿 Slashdot へ投稿

読者のなかには必死で XMLHttpRequest オブジェクトや send() 呼び出しといった Ajax コードを探している方もいることでしょう。ご心配には及びません。Ajax コードは次回の記事で登場します。この記事では使いやすいフロントエンドのセットアップを行うことに焦点を絞ったため、JavaScript 以外の多くのことが関連しました。実のところ、大半の話題はフォント、ルック・アンド・フィール、そしてスペースについてでした。

美観に関する問題は退屈に思えるからこそ (特に、あなたが極めて分析好きである場合は)、取り組まなければならない問題です。この問題をおろそかにすると、技術的には優れていても、まるで醜く、使い勝手の悪いアプリケーションになってしまいます。実際、インターネットはその類のアプリケーションで溢れかえっています。

外観を整えることに少し時間を割き、ユーザーの視線が左から右へと移ることを念頭に、フォントに一貫性を持たせ、ページを読み進みにつれてフォントのサイズが小さくなるようにしてください。またスペースと簡潔な外観にも気を配ってください。これにより、ユーザーに感謝され、次回の記事での課題 (さらにプログラミングが関係してきます) に取り組む準備も整います。

上に戻る

ダウンロード

	ダウンロード形式について

参考文献

• この記事のサンプル・アプリケーションのベースとして使用した Hoverbox の資料を調べてください。
  
  
• Hoverbox のオンライン・デモで、このサンプル・アプリケーションの出発点を確認できます。
  
  
• この記事で説明した方法をさらに巧妙な JavaScript ツールキット、Lightbox に適用してください。
  
  
• ウィキペディアで Ajax についての資料を探してください。
  
  
• Web 2.0 開発のツールと情報が満載の developerWorks Web development ゾーンにアクセスしてください。
  
  
• developerWorks Ajax resource center には、Ajax 関連の記事が次々と追加されています。Ajax アプリケーションを今すぐ始めるのに役立つ資料もここから入手できます。
  
  

• 『Head Rush Ajax ― 学びながら読む Ajax 入門』(Brett McLaughlin 著、O'Reilly Media): ここに記載された Head First スタイルのアイデアを吸収してください。
  
  
• 『Java & XML 第 2 版』(Brett McLaughlin 著、O'Reilly Media, Inc.): XHTML および XML 変換についての著者の考察が記載されています。
  
  
• 『JavaScript』(David Flanagan 著、O'Reilly Media, Inc.): JavaScript と動的 Web ページの操作について広範に説明しています。次回の改版では、Ajax についての 2 つの章が追加されます。
  
  
• 『Head First デザインパターン ― 頭とからだで覚えるデザインパターンの基本』(Elizabeth Freeman、Eric Freeman 共著、O'Reilly Media, Inc.): 標準 HTML および XHTML と、CSS の HTML への適用方法について詳しく説明しています。
  
  

• developerWorks blogs: developerWorks コミュニティーに参加してください。
  
  
• ディスカッション・フォーラムに参加してください。

著者について

		Brett McLaughlin氏は、Logo (小さな三角形を覚えていますか?) の時代からコンピューターの仕事をしています。現在の専門は、JavaおよびJava関連のテクノロジーを使ったアプリケーション・インフラストラクチャーの構築です。ここ数年は、Nextel Communications and Allegiance Telecom, Inc. でこれらのインフラストラクチャーの実装に携わっています。Brett氏は、Javaサーブレットを使ってWebアプリケーション開発のための再利用可能なコンポーネント・アーキテクチャーを構築するJava ApacheプロジェクトTurbineの共同設立者の1人です。同氏はまた、オープン・ソースのEJBアプリケーション・サーバーであるEJBossプロジェクトと、オープン・ソースのXML Web公開エンジンであるCocoonにも貢献しています。Brettの連絡先は、brett@oreilly.com です。

記事の評価

サイト改善のため、ご意見をお寄せください。こちらのフォームからお願いいたします。 この情報はお客様が目的を達成するうえで役に立ちましたか？ はい いいえ わからない   お気軽にご意見・ご感想をお寄せください。   この記事は役に立ちましたか？ 1 2 3 4 5 不充分・不完全である 大変素晴らしい

上に戻る