TIPS

03.15.2016
vol.41

ハンバーガーボタン実装で学ぶ
JSの基礎

vol.41 ハンバーガーボタン実装で学ぶJSの基礎

こんにちは。デザイナーの寺田です。
Webサイトでよくみる三本線「三」のメニューボタン。
海外でハンバーガーに見えると言われ 「ハンバーガーメニュー」「ハンバーガーボタン」という名称で呼ばれています。
「ハンバーガーボタン 実装」で検索するとソースコードを公開しているサイトはヒットしますが、
ソースの中身を理解していないと実装しても不具合が出たり、そもそも動きが実現できないことも。

今回は、Webサイトのメニューとしてよく使われる
ハンバーガーボタンをもとにJS、JavaScriptの基礎をご紹介します。


デザイン上で長所と短所

◎長所
メニューの内容をWebサイト上に表示させなくとも、コンテンツリンクを実装できるハンバーガーボタンは、画面の表示領域を広くもつことができます。
そのため、ゆったりとしたデザインや大胆なレイアウトをスマートフォンでもできることが魅力です。

◎短所
コンテンツリンクを押すためにひとつ動作増えたことから、ユーザーエンゲージメント、つまりユーザーがサイトのゴールに対し、どのくらい深くまで接しているかが半減したという記事もあります。
そのことは、Webサイトのユーザー離脱へとつながる可能性が高まります。
(ユーザーエンゲージメントとは、実際にアクションが取られたかどうかの指標。)
日頃、WebサイトやWebアプリケーションに慣れ親しんでいるユーザーはハンバーガーボタンとして認識していますが、 ユーザーの慣れ、学習を必要とします。使い方がわかれば新鮮で快適なユーザビリティを提供することができますが、 使用頻度の低いユーザーにとってはメニューを押すのに 一つ動作が増えることは無意識的にストレスを感じているのかもしれません。

作るサイトのターゲットによって、ハンバーガーボタンを使用することが最適かは考える必要があると思います。 ハンバーガーボタンだけでなく、デジタルの技術やWebの開発の進化が進んでいった際に、 サイトをつくる側の考えとつかう側の考えにすれ違いがないのか考えることが 最適なUIになると考えています。

苦労した下積み時代から、JS全盛期へ

JavaScriptの誕生は「1995年」。
意外と昔からある技術です。
1996年にマイクロソフトのInternet Explorer 3.0に搭載され、普及しました。
ですが、当初はプログラミングの知識がなくても手軽に始められる言語ということから、 素人が使うものとして扱われました。
また、無駄な動きを入れてページの読み込みを遅くするものとして敬遠されていたそうです。

Googleが2005年にGoogle MapでAjaxを使用。
ページの再読み込みをすることなく、Webサイト上で自分の位置が リアルタイムに移動する機能は多くの人が驚きました。
Ajaxを通してJavaScriptが注目され始めました。

現在、手軽にちょっとした動きをつけられたり、
簡単に面白いことができるJSはWebサイトで必ず使用されている言語ですね。


まずソースを見てみよう

今回はボタンを押したら、メニューが順に表示されるハンバーガーボタンを実装します。
※HTMLとCSSの基本的な知識があることを前提に説明を進めます。
jQueryも使用しているためこちら(jQueryサイト)からソースのダウンロードしてください。

今回JavaScriptで記述する内容はこれだけです。


$(document).ready(function() {
	$(".menu-trigger").click(function () {
	  $(this).toggleClass("active");
	  $(this).next().toggleClass("onanimation");
	  $('ul li').hide();
	  $('ul li').each(function(i) {
	 	 $(this).delay(80 * i).fadeIn(500);
	  });
	});
});

htmlの内容はこちら
※オレンジ色の文字は注釈のため記述しないでください。


<div class="gblnv_box">
<a class="menu-trigger" href="#"> ←ハンバーガーボタン
	<span></span>
	<span></span>
	<span></span>
</a>
<div class="gblnv_block">
	<ul class="gblnv_list"> ←ハンバーガーボタン内、グローバルメニュー
		<li><a href="">グローバルメニュー1</a></li>
		<li><a href="">グローバルメニュー2</a></li>
		<li><a href="">グローバルメニュー3</a></li>
	</ul>
</div>
</div>

JavaScriptの基本構造について、プログラムでは一つの処理ごとに「 ; 」で区切ります。
下記ソースの説明を進めます。


$(document).ready(function(){});

このソース内容は、WebページのDOMの準備ができたら内容を実行することができます。 JavaScriptはDOMを手軽に扱える言語で、Webぺージの要素をDOMとして読み取り WebぺージをDOMを通して書き換えることができます。

DOMは「Document Object Model」の略で、Webサイトの構造をツリー状のデータとして扱うことができます。


ソースを細かく見てみよう


$(".menu-trigger").click(function (){});

上記の記述は、ハンバーガーボタン「.menu-trigger」をクリックした時に処理を実行させるものです。 この中に実行したい内容を入れることにより、ハンバーガーボタン内のメニューを表示させます。


$(this).toggleClass("active");

「toggleClass」は指定したclassの追加と削除の切り替えをします。
これにより、ハンバーガーボタンのクリックに合わせてメニューの表示・非表示を行っています。


 $(this).next().toggleClass("onanimation");

「next()」は、「次」にあたる要素を選択します。
ここでは、「.menu-trigger」の次の要素
「.gblnv_block」にtoggleClassでクラスを追加しています。


 $('ul li').hide();
  $('ul li').each(function(i) {
  $(this).delay(80 * i).fadeIn(500);
});

上記記述は、ハンバーガーメニューリンクを表示をさせるときに、
各要素を遅延表示させるものです。
「hide()」は英語の意味通り、表示を隠します。
「fadeIn(500)」で要素を表示させています。
「fadeIn(500)」の500という数字は、 アニメーションが行われる秒数を表しています。
500の場合、0.5秒かけてアニメーションが行われます。

「each」は、繰り返し処理を行っています。
なぜ、繰り返し処理を行っているのかというと、各要素がそれぞれに遅延させるためです。
繰り返し処理を行わないと、全部のハンバーガーメニューリンクの表示が遅れてしまいます。

1番目のliが表示されたら2番目のliの表示処理の遅延を行っています。
「each(function(i){}」の「i」は、変数になります。
繰り返しの指定では「i」を用いることが多いです。
「delay(80 * i)」で各リストを80ミリ秒ずつ表示開始時間を遅延させ、
その後、「fadeIn(500)」で500ミリ秒かけてフェードイン(徐々に表示)させています。


ハンバーガーメニューボタンの動きについて

今回ハンバーガーメニューの参考としたサイトは下記です。
CSSで実装するハンバーガーメニュークリック時のエフェクト 10+
css3の「transform」と「@keyframes-animation」を使用して、ハンバーガーメニューの動きを入れています。
上下の線は、「transform:rotate()」を使用して、回転させています。
真ん中の線は、「@keyframes-animation」を使用して、移動とフェードアウトをさせています。

最後に

いかがですか?
Webは技術の進歩が早く、追いついていくので精一杯な分野かもしれません。
ですが、既存の技術の組み合わせ、そして今ある知識の発想次第で 新しいものを作れる可能性がたくさんある分野でもあると思います。
特にインタラクションが実現できるJavaScriptはhtmlをはじめとする他の言語との親和性が高い分、おもしろい動きやページが実現できます。
進歩と可能性に満ちたWebの勉強は続けていきたいですね。

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2015
December(2)
November(2)
October(1)
August(2)
July(3)
April(1)
March(7)
February(3)
January(8)

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。