あめのて

活字を垂れ流す

ページの一部に動きを付けたいと頼まれてから実装までの流れを詳しく解説する【jQuery】

スポンサーリンク

web制作ではデザイナーとエンジニアが共同で仕事をするのが一般的です。
僕はフロントエンジニアという立場ではないんだけど、たまにデザイナーの方からページの一部の実装を頼まれたりします。

今日は、ページの一部に動きを付けたいという注文だったので、jQueryを利用して注文通りの動きを実装しました。

今日の仕事を例に、デザイナーに注文を受けてから完成までの流れを解説したいと思います。
jQueryとかわからない人にも、出来るだけわかりやすいように頑張ってみます。

実装自体は、PC用ページの動きなのでスマホの人にはわかりづらいかもです……。


デザイナーからの注文

今日受けた注文は、サイドバーの一部をマウスに連動させて動くようにして欲しいということでした。
ページ自体はほぼ完成していたので、イメージもつかみやすかったです。

とりあえず、わかりやすいように完成状態をお見せしましょう。

マウスオーバーで、画像がついてくると思います。
こんな感じの動きをこれから実装していきます。


デザイナーへのお願いと許可申請

完成状態のイメージがつかめたら、次はデザイナーにデフォルトの実装をお願いしましょう。
プログラマーが触りやすいように、できるだけフラットな状態で注文されることが多いですが、ページ読み込み時の初期状態はデザイナーに実装してもらいましょう。
もちろん、プログラマーが触りやすいように自分でやったほうが楽なのですが、デザイナーは1px単位で表示をこだわるので、そのほうが注文通りのものを作れます。
また、デザイナーのコーディングの好みなども分かるので、あとからデザイナーが見てわかりやすいように作ることができます。
そうすることで、完成後にデザイナーから修正が入ることが少なくなるため、結果として効率が上がるのです。

デザイナーがコーディングした初期状態を確認したら、いよいよ実装に入ります。
編集するファイルを事前に伝えておきましょう。
今回は、デザイナーの方も少しjQueryのスキルがあったので、動きを実装しやすいhtmlになっていました。
htmlファイルは触る必要がなさそうなので、jsファイルとcssファイルを編集することを伝えておきましょう。

プログラミング

それからプログラミングをしていくことになります。
コードの解説は趣旨から外れるので流れだけ簡単に説明します。

とりあえず、htmlの構造は以下のようになっていました。

<div id="sidemenu">
  <ul id="menu_top">
    <li><a class="red" href="#">あああああ</a></li>
    <li><a href="#">いいいいい</a></li>
    <li><a href="#">ううううう</a></li>
    <li><a href="#">えええええ</a></li>
    <li><a href="#">おおおおお</a></li>
    <li id="sub_menu_bg"><img src="images/sub_menu_bg.png"></li>
  </ul>
</div>

最後のliを絶対配置にしてくれているので、マウスオーバーイベントでtopの値をアニメーションで動かせば良さそうです。

borderがマウスオーバーイベントの邪魔になるのでmarginをマイナスにして内側に入れて、マウスオーバーしたliタグのpositionを取得してデザイナー指定の位置にアニメート、redクラスを消して付けてボーダーとマージンも処理して……

とか何とかやって、以下のように実装しました。

//画像のli要素を変数に格納
var img = $("#menu_top #sub_menu_bg");

//最後の要素以外にマウスオーバーイベントを付与
$('#menu_top li').not(':last').hover(function(){
	//前のアニメーションがまだ終わってなかったらキャンセル
	//これがないとかくかく動くし遅れるしで全然ダメだから一番大事な行
	img.stop();
	
	var l = $(this);
	var p = l.position();
	
	//どれが元々画像のあった場所かわかんないからとりあえずループで全部回して処理
	//今回は行が少ないから問題ないけど、増えてくるとこれじゃおっそいので絶対ダメ、他のやり方を考えないと
	$('#menu_top li').not(':last').each(function(){
		$(this).css('margin-bottom','0');
		$(this).css('border-bottom','dotted #777 1px');
		$(this).find("a").removeClass("red");		
	});
	
	//そんでアニメーション
	img.animate({
		top:(p.top-7) //この位置がいいらしい 
	},600, //これはスピード。デザイナーに調節してもらう
	function(){
		//アニメーションが終わったあとの処理
		l.css('margin-bottom','1px');
		l.prev().css('margin-bottom','1px');
		l.css("border","none");
		l.prev().css("border","none");
		l.find("a").addClass("red");
	});
	
},function(){});

デザイナーに確認してもらう

できたものをデザイナーに確認してもらい、細かい調整を行います。
今回は、かなり分かりやすく書いた(つもり)なので、細かい調整は全部デザイナーにやってもらえました。

まとめ

そんな感じで完成です。
たまにこういう仕事をしています。

今日はデザイナーの方がこれでとても喜んでくれたので気分が良かったです。
デザイナーの注文通りに実装するというのは、プログラマーの大きなやりがいの一つだと思います。
僕は基本的にサーバーサイドエンジニアなんですけどね。

デザイナーとエンジニアがどういうふうに連携してweb制作を行っているか、少しでも分かっていただけましたでしょうか。



広告を非表示にする