[JS] ガイド表示アプリ

タグ :

これまでの基礎知識を結集して簡易アプリを作成するシリーズです。
今回はページ内の項目の説明等を表示するガイドのアプリについてです。

ヘッダメニュー、メイン部、サイドバーにマウスオーバーしてちょっと待つと、ガイド表示がスッと現れます。それぞれの項目に対しての異なる文言が表示されます。

アプリ概要

以下のような仕様とします。

マウスオーバーで表示
 - マウスオーバーでのみガイドを表示する
 - 項目の右下へ表示する
 - マウスオーバー後、ちょっと経ってから表示する
 - 初期状態ではサイズは 0 でページの邪魔にならない位置に置く
マウスアウトで非表示
 - マウスアウトでのみガイドを非表示にする
 - 項目から項目のマウス移動では非表示させない
 - 非表示後、サイズは 0 で初期位置へ移動させる

必要となる処理は以下になります。

  • マウスオーバー・アウト
  • アニメーション
  • タイマセット・クリア
  • 要素の座標位置取得
  • 要素の座標指定
  • 要素のテキスト変更

作成したサンプル

処理の流れとコードは以下になります。

[ 動作フロー ]
js_guide_flow
[ コード ]
$(function() {
	var mover,mout;
	var booyan = $('.guide');
	var cls;
	$('.header ul li, .main, .side').hover(
		function() {
			var obj = $(this);
			cls = obj.attr('class');
			obj.css('background','#eee');
			booyan.stop().animate({
				'top' : obj.offset().top + obj.height() + parseInt(obj.css('padding-top'))
			}, 400);
			mover = setTimeout(function(){
				booyan.stop().animate({
					'left' : obj.offset().left + obj.width()/2,
					'opacity' : 1
				}, 400);
				$('p',booyan).text(obj.text() + ' です');
			}, 500);
		},
		function() {
			var color = '#ccc';
			if(cls == 'main') {
				color = '#faa';
			} else if(cls == 'side') {
				color = '#afa';
			}
			$(this).css('background',color);
			clearTimeout(mover);
		}
	);
	$('body div').hover(
		function() {
			clearTimeout(mout);
		},
		function() {
			booyan.stop().animate({
				'opacity' : 0
			}, 400);
			mout = setTimeout(function(){
				booyan.css({
					'left' : 0,
					'top' : 0
				});
				$('p',booyan).text('');
			}, 500);
		}
	);
});
<h4>ガイド</h4>
<div class="guide"><p></p></div>
<div class="header">
	<ul>
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
		<li>メニュー4</li>
	</ul>
</div>
<div class="main">
	<p>メイン</p>
</div>
<div class="side">
	<p>サイドバー</p>
</div>
.header {
	 margin-left: 40px;
	width: 400px; height: 37px;
}
.header ul {
	list-style-type: none; padding-left: 0px;
}
.header ul li {
	float: left; padding-top: 7px; margin-left: 0px;
	width: 100px; height: 30px;
	text-align: center; background: #ccc; cursor: default;
}
.main {
	float: left; margin-left: 40px;
	width: 250px; height: 200px;
	background: #faa; text-align: center;
}
.side {
	float: left;
	width: 150px; height: 200px;
	background: #afa; text-align: center;
}
.guide {
	position: absolute; top: 0; left: 0;
	background: blue; cursor: move; opacity: 0;
}
.guide p {
	padding-left: 10px; padding-right: 10px;
}
.hover ul li {
	background: red !important;
}
詳しい説明は後述します。
マウス操作のみでガイドが表示・非表示されます。アニメーションを用いているので、ガイドの移動は自然な動きになります。項目から項目へマウスを移動させた場合には、まず縦軸が移動し、その後横軸が移動するので少し機械的な動きとなります。

コード解説

jQuery のコードの説明をします。

[ jQuery の説明 ]
[ 5行目 項目のマウス操作 ]
$('.header ul li, .main, .side').hover(

マウス操作による動作に hover() を用います。セレクターには、各項目の要素やクラス名を指定します。

[ 6行目〜20行目 項目のマウスオーバー処理 ]
obj.css('background','#eee');

項目要素の背景色を変更します。マウスオーバーになったことが分かり易くなるように変更させています。

booyan.stop().animate({
	'top' : obj.offset().top + obj.height() + parseInt(obj.css('padding-top'))
}, 400);

まず最初にガイド要素を縦方向に移動させます。非表示状態ではパッと移動させればいいのですが、項目間での移動時にはこの移動動作が見えてしまうので、アニメーションを用います。オプションの「top」で縦座標位置の指定を行います。アニメーション秒数は「0.4秒」で、デフォルトなので省略しても構いません。
縦座標位置は「項目要素の縦座標値」、「項目要素の高さ」、「項目要素の padding 値」を足した位置、つまり項目要素の下部になるようにしています。

mover = setTimeout(function(){
	booyan.stop().animate({
		'left' : obj.offset().left + obj.width()/2,
		'opacity' : 1
	}, 400);
	$('p',booyan).text(obj.text() + ' です');
}, 500);

ガイド要素を横方向に移動させながら、徐々に表示させます。オプションの「left」にて横座標位置の指定を、「opacity」にて透明度の指定をしています。横座標位置は「項目要素の横座標位置」、「項目要素の幅の半分」を足した位置としています。透明度は表示させるので、「1」を指定します。
また、この処理はタイマを用いてちょっと経ってから動作するようにしています。前処理のアニメーションでは 0.4秒かけて動作させているので、それ以上の時間待ってから動作するようにします。前処理の秒数より短いと、縦位置が移動しきらない状態でこの処理を実行してしまうので、位置がズレてしまいます。0.4秒以上で、より自然な動きになる時間として、「0.5秒」に設定しました。
さらにテキストの変更も行います。テキストは項目要素のテキストを用いて記述するようにしています。

[ 21行目〜30行目 項目のマウスアウト処理 ]
var color = '#ccc';
if(cls == 'main') {
	color = '#faa';
} else if(cls == 'side') {
	color = '#afa';
}
$(this).css('background',color);

項目要素の背景色を初期色に戻します。マウスアウトになったことが分かるように変更させています。各要素の初期色が異なるので、分岐処理にて色の指定をする必要があります。この部分はもっと簡単にできるようになるかもしれません。。。

clearTimeout(mover);

セットしたタイマをクリアします。マウスオーバー時にセットしたタイマをそのままにしておくと、マウスアウトしていてもタイマが有効となってしまうので、クリアが必要です。

[ 32行目 領域のマウス操作 ]
$('body div').hover(

マウス操作による動作に hover() を用います。セレクターには、各項目を含む領域の要素を指定します。

[ 33行目〜35行目 領域のマウスオーバー処理 ]
clearTimeout(mout);

セットしたタイマをクリアします。マウスアウト時にセットしたタイマをそのままにしておくと、マウスオーバーしていてもタイマが有効となってしまうので、クリアが必要です。

[ 36行目〜47行目 領域のマウスアウト処理 ]
booyan.stop().animate({
	'opacity' : 0
}, 400);

まずは、ガイド要素を非表示にします。アニメーションオプションの「opacity」で 0 を指定し、秒数に「0.4秒」を設定すれば、徐々に消えていく動作となります。

mout = setTimeout(function(){
	booyan.css({
		'left' : 0,
		'top' : 0
	});
	$('p',booyan).text('');
}, 500);

ガイド要素を初期位置へ移動させます。初期位置はどこでもいいのですが、邪魔にならない場所として「0,0」の位置にしています。
この動作もタイマを用いて前処理が終わった後で実行するようにしています。前処理が非表示にする処理なので、非表示になった後で移動するということになります。なのでこの処理は目には見えません。
さらにテキストもクリアしておきます。

まとめ

使いどころはあまり無いかもしれませんが、ガイドがあればユーザーにとっては優しいページになるのではないでしょうか。。。

アニメーションを用いることで動的な表現が可能となります。さらにタイマを組み合わせることで、時間的な動作が可能となり「x」「y」「時間」を駆使した色々な表現が生まれるようになります。
複雑な動作をすればする程コードも複雑になりますが、完成したときの達成感はハンパないでしょう。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed