レベル: 初級 Jack Herrington (jherr@pobox.com), Editor-in-Chief, Code Generation Network
2007年 9月 25日 あらゆるものがユーザーを驚嘆させ、気を散らすことを目的としている世界では、そう簡単にユーザーの関心を引くことはできません。ライトボックス、ポップアップ、ウィンドウ、そしてフェードするメッセージなど、Ajax を使った新しい手法を学んでユーザーの目を皆さんのコンテンツに向けさせてください。
これは都市伝説だとは思いますが、何年か前にユーザーとの対話に関する実験の話を聞いたことがあります。この実験では、コンピューターでデスクトップ・アプリケーションを使っているユーザーの椅子の裏に 100 米ドル紙幣をテープで貼り付けます。アプリケーションのステータス・バーには「椅子の下に 100 ドルが貼られています」というメッセージが表示されていたにもかかわらず、紙幣を見つけたり、あるいは要求した被験者は誰一人としていなかったそうです。この話からわかるように、ステータス・バーでは情報が伝わりにくく、人々の関心を引くのは至難の業であるというのが現状です。
この記事では、PHP、DHTML (Dynamic HTML)、そして Ajax (Asynchronous JavaScript™ + XML) の組み合わせを使い、ユーザーの関心を確実に捕らえられるように、その視線のさなかにコンテンツを表示する手法をいくつか紹介します。
ツールチップ
ブラウザーにステータス・バーを設定するのは簡単ですが、ツールチップをポップアップ表示するなどの効果的な機能を加えるとなると、そう簡単には行きません。こういった効果的な機能を簡単に加えられるようにするために、以下のサンプルでは、Web から自由に入手でき、Prototype.js という優れた JavaScript ライブラリーをベースにビルドされたツールチップ・ライブラリーを使用しています。リスト 1 に、このツールチップのコードを記載します。
リスト 1. index.html
<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<script src="tooltip.js" type="text/javascript"></script>
<style>
body { font-family: arial,verdana; }
.popup { padding:10px; border:1px solid #ccc;
background:#eee; width:250px; font-size: small; }
</style>
</head>
<body>
<div id="book1">Code Generation In Action</div>
<div id="popup1" class="popup">
</div>
</body>
<script type="text/javascript">
new Ajax.Updater( 'popup1', 'text.php' );
new Tooltip('book1', 'popup1')
</script>
</html>
|
このページはまず Ajax 呼び出しを使用し、Prototype.js ライブラリーの Ajax.Updater クラスを使ってツールチップのコンテンツを更新します。次に、ツールチップ・ライブラリーが提供する Tooltip クラスでツールチップを book1 <div> タグに割り当てます。
このツールチップのコンテンツのためのコードは、リスト 2 のとおりです。
リスト 2. text.php
An excellent book on code generation and generative programming
by Jack Herrington.
|
図 1 は、ブラウザーにこのページを表示したときの状態です。
図 1. マウスを重ねる前のテキスト
テキストにマウスを重ねると、図 2 のように小さなポップアップ・ウィンドウが表示されます。
図 2. ポップアップ・ウィンドウ
ツールチップは、ページを簡潔にまとめ、ユーザーの要求に応じてコンテンツを表示する手軽な手段となります。ユーザーはもっと詳しく知りたいと思ったら、該当する箇所にマウスを重ねるだけで詳細を表示することができます。さらに、詳細には画像、表、フォーマット設定を意のままに組み込んで複雑なものにすることもできます。
ライトボックス
ライトボックスは、ページ上の特定の要素に読者の関心を引き付ける最新かつ最も革新的な方法です。以下に紹介するサンプルでは、ページ上には画像のサムネールが表示され、ユーザーがこのサムネールをクリックすると「ライトボックス」にその画像の拡大バージョンが表示されます。
この効果をもたらすために使用しているのは、同じく Prototype.js フレームワークをベースにビルドされた見事な Lightbox JS 2.0 ライブラリーです。リスト 3 にサンプル・コードを記載します。
リスト 3. index.html
<html>
<head>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<a href="images/megan1_400_320.jpg" rel="lightbox">
<img src="images/megan1_400_320.jpg" width="100" height="80"
alt="Megan" border="0" /></a>
</body>
</html>
|
このページにナビゲートすると、サムネールだけが表示されます (図 3 を参照)。
図 3. クリックする前の画像
このサムネールをクリックすると、画像はフルサイズに切り替わり、見事にウィンドウの中央に表示されます (図 4 を参照)。
図 4. フルサイズの画像を表示するライトボックス
さらに効果的なことに、背景にあるすべての要素は暗い表示になるので、ディスプレイ中央のコンテンツに目が惹きつけられることになります。
ライトボックスという用語に馴染みがなくても問題ありません。これは写真の世界で使用される専門用語だからです。フィルムを使って写真撮影が行われていた頃に使われていたライトボックスと呼ばれる装置は、高さ約 6 インチ、縦横の長さは数インチという文字通りのボックスで、その上面は透明な白いプラスチック製になっています。この面をボックス中央にあるライトが均等に照らすため、スライドやネガをライトボックスに載せると、ルーペ (意匠を凝らした単なる拡大鏡) を使って画像を 1 つひとつを調べられます。図 4 に示したライトボックスは、いわばライトボックスでルーペを通して見ている写真のようなものです。これが、この用語の由来です。
一方、画像ではなくテキストを強調表示したい場合はどうでしょうか。
テキストのライトボックス表示
Particle Tree というサイトには、着想を変えたライトボックスのバリエーションが実装されています。このライトボックスのバリエーションの利点は、Ajax を使用してサーバーからフェッチした任意の HTML コードを表示できることです。以下のサンプルでは、このライトボックスを利用して追加テキストをユーザーに表示します。
メイン・ページのコードはリスト 4 のとおりです。
リスト 4. index.html
<html>
<head>
<title>
Lightbox Text Test
</title>
<link rel="stylesheet" href="css/default.css" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" media="screen,projection"
type="text/css" />
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
</head>
<body>
<a href="text.php" class="lbOn">More About This Article</a>
</body>
</html>
|
リスト 5 は、Ajax がフェッチして表示する HTML コードです。
リスト 5. text.php
<p>This article covers the basics of AJAX Lightbox that
shows text blocks instead of images</p>
<p><a href="#" class="lbAction" rel="deactivate">
Return to article list</a></p>
|
上記のコードは、ブラウザーでは図 5 のように表示されます。
図 5. クリックすると詳細情報が表示されるテキスト
このテキストをクリックすると、ライトボックスにページのコンテンツが表示されます (図 6 を参照)。
図 6. 動作中のテキスト・ライトボックス
ページに記載された製品や記事に関する補足情報を提供する方法としてテキスト・ライトボックスが優れている理由は、ユーザーを他のページに移動させることなく、間接的に、提供したい追加コンテンツにユーザーの関心を集められるためです。また、あらゆる HTML コードの場合と同じく、テキスト・ライトボックスにはテキスト・コンテンツ、画像、さらには登録、コメント、ログインなどのフォームも追加することができます。
ウィンドウ
前のサンプルで、ライトボックスはフォームにも適用できると言いましたが、これはユーザーが期待するフォームの表示形式であるとは言えません。ユーザーが実際に期待するのはウィンドウです。ありがたいことに、Prototype ライブラリーには、ルック・アンド・フィールを好きなように選べる多種多様なスキンを備えた卓越したウィンドウ実装があります。
ウィンドウのコードも、ウィンドウ枠に表示するコンテンツを取得するために Prototype を介して Ajax を使用します。まず取り掛かるのは、リスト 6 です。このページにウィンドウを収容します。
リスト 6. index.html
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>
<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
<a href="javascript:void showWindow();">Show Window</a>
<script>
function showWindow()
{
win = new Window( { className: 'spread', url: 'test.html',
title: 'Simple Window', width:400,
height:300, destroyOnClose: true, recenterAuto:false } );
win.showCenter();
}
</script>
</body>
</html>
|
上記の JavaScript コードは Show window ボタンのクリックに応答して、指定された幅、高さ、タイトル、そして特定の URL で指定されるコンテンツを使って新規ウィンドウを作成します。このウィンドウを表示するために使用する showCenter() メソッドは、ウィンドウをブラウザー・ウィンドウの中央にポップアップ表示するためのものです。
リスト 7 に、このウィンドウのコンテンツを記載します。
リスト 7. test.html
<h1>Registration</h1>
<p>You need to first register the product before...</p>
|
ブラウザーで最初のページにナビゲートすると、図 7 のようなページが表示されます。
図 7. ウィンドウのリンク
このページは何の変哲もないものですが、リンクをクリックすると一変して、図 8 のウィンドウが表示されます。
図 8. ポップアップ表示されたウィンドウ
このウィンドウは多少派手ですが、間違いなくユーザーの関心を引くはずです。もちろん、このライムグリーンの四角を使用する必要はありません。スキンにはさまざまな選択肢が用意されています。
しかし、実際に必要としていたのはフォームです。具体的には、メイン・ページ上にログイン・フォームを設定して、Login ボタンをクリックするとログイン・フォームがポップアップ表示されるようにしなければなりません。リスト 8 に、メイン・ページのコードを記載します。
リスト 8. form.php
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>
<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
<div id="myloginform" style="display:none;overflow:clip;padding:10px;">
<form id="loginfrm">
<table>
<tr><td>Login</td><td><input type="text" name="name" /></td></tr>
<tr><td>Password</td><td><input type="password" name="password" /></td></tr>
</table>
</form>
<button onclick="login()">Login</button>
</div>
<a href="javascript:void showWindow();">Login</a>
<script>
var g_loginWindow = null;
function login()
{
new Ajax.Request( 'login.php', {
parameters: $('loginfrm').serialize(),
method: 'post',
onSuccess: function( transport ) {
g_loginWindow.close();
}
} );
}
function showWindow()
{
g_loginWindow = new Window( { className: 'spread', title: "Login",
destroyOnClose: true,
onClose:function() { $('myloginform').style.display = 'none'; } } );
g_loginWindow.setContent( 'myloginform', true, true );
g_loginWindow.showCenter();
}
</script>
</body>
</html>
|
このコードにはページ自体にウィンドウのコンテンツがありますが、ユーザーがフォームの Login ボタンをクリックすると Ajax.Request オブジェクトを使ってサーバーへのログインを要求します。リスト 9 に記載するのは単純なログイン・スクリプトです。実際のスクリプトは、これよりはるかに複雑になります。
リスト 9. login.php
これで、このページを表示すると今度はログインのリンクが表示されるようになります (図 9 を参照)。
図 9. ログインのリンク
上記のリンクをクリックすると、とても洗練された Web 2.0 スタイルのログイン・ウィンドウが表示されます (図 10 を参照)。
図 10. ログイン・ウィンドウ
Login をクリックすると、ユーザー名とパスワードがサーバーに送信されます。サーバーは、クレデンシャルを検証し、セッション・クッキーを設定すると同時にホーム・ページへの接続を示すレスポンスを返します。
まさにこのような機能がアプリケーションにポップな感覚をもたらし、ユーザーには Web 上で何かをしているというより、デスクトップ・アプリケーションの類を使用しているという感覚を与えることができます。
フェーダー・メッセージ
ユーザーと通信するための新しい手法には、フェーダー・メッセージもあります。このメッセージは、重要なイベントが発生したことをユーザーに伝えるために画面の規定の部分、ただし目に付きやすい場所にポップアップ表示されます。以下のサンプルでは、同じく Prototype.jsをベースにビルドされた Scriptaculous というエフェクト・ライブラリーを使用してフェーダー・メッセージを実装します。
まずはリスト 10 のページから取り掛かります。
リスト 10. index.html
<html><head>
<style>
.alert {
opacity: 0.0;
border:2px dashed black;
padding:5px;
background:#eee;
font-family: arial, verdana;
font-weight: bold; }
</style>
<script src="lib/prototype.js"></script>
<script src="src/effects.js"></script>
<script>
function submit()
{
new Ajax.Updater( 'result', 'alert.html', {
method: 'get',
onSuccess: function() {
new Effect.Opacity('result',
{ duration: 2.0, from: 0.0, to: 1.0 } );
new Effect.Opacity('result',
{ delay: 10.0, duration: 2.0, from: 1.0, to: 0.0 } );
} }
);
}
</script>
</head><body>
<div id="result" class="alert"></div><br/><br/>
<button onclick="submit()">Submit</button>
</body></html>
|
このページは観念としては、Submit ボタンを持つ一種のフォームです。ユーザーがこの Submit ボタンをクリックするとサーバーにフォーム・データが送信され、それを受け取ったサーバーがレスポンスのメッセージを返します。このメッセージが表示されるのは、フェードイン・フェードアウトしてメッセージを表示するエリアです。このサンプルではフォームの要素を含めていないため、Submit ボタンだけが表示されます。
Submit ボタンは Ajax リクエストを alert.html ページに送信します。すると、このページの結果が result <div> タグに入れられ、Scriptaculous のエフェクト・クラスによってフェードイン・フェードアウトします。
このアラート・ページのコードは、リスト 11 のとおりです。
リスト 11. alert.html
A new record has been added.
|
このページは、ブラウザーでは図 11 のように表示されます。
図 11. フォームの Submit ボタン
このサンプルの場合も大した特徴はありませんが、Submit ボタンの上にはデータが入力された一連のフォーム・フィールドが並んでいると想像してください。
Submit をクリックすると、アラートがフェードインします (図 12 を参照)。
図 12. メッセージが追加されたことを通知するフェードイン・メッセージ
このメッセージは数秒経つとフェードアウトします。
ユーザーとこのように通信する方法は、単純でありながら非常に効果的です。使い過ぎない限り、フェーダーは現れては消えるオブジェクトに注目してしまうという感覚に直接訴えかけます。この行動は人間に植え付けられた生存本能であるため、フェーダーは注意の対象となるわけです。有効に使いさえすれば、素早くユーザーの注意を引く強力な手段となります。
まとめ
これで、革新的な方法でユーザーと対話し、注意を促すためのまったく新しい一連のツールを紹介できたと思います。これらのツールはいずれ使い古され、ステータス・バーと同じように効果がなくなってしまうでしょう。しかし当分の間は、面白みのある効果的な Web 2.0 スタイルでユーザーの関心を引く方法となるはずです。
ダウンロード | 内容 | ファイル名 | サイズ | ダウンロード形式 |
|---|
| Sample code | x-ajaxxml6-lightbox.zip | 1573KB | HTTP |
|---|
参考文献 学ぶために
議論するために
著者について  | | | Jack D. Herringtonは、20年以上の経験を持つシニア・ソフトウェア・エンジニアです。著者には、「Code Generation in Action」、「Podcasting Hacks」、そして近々刊行予定の「PHP Hacks」の3冊があります。彼は30本以上の技術記事も執筆しています。 |
記事の評価
| 
ツールチップ
