TIPS

2016.03.15
vol.41
WEB

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

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

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

ナビゲーションの長所と短所

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

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

Webサイトやアプリケーションのターゲットや目的によって、ハンバーガーボタンを採用することが最適かどうかはまだ見定める必要があると思います。ハンバーガーボタンだけでなく、デジタル技術やWeb開発が進化する過程で、 Webサイトを制作する側の意識とそれを利用するユーザーの行動にズレがないのかを検証することが、ユーザーを間違いなく目的に導くための最適なUI/UXの設計につながると考えています。

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

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

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

いまでは、マウスアクションに手軽にちょっとした動きをつけられたり、
スライドやポップアップ、フェードなど簡単に実現できるJavaScriptはWebサイトで必ずといってもいいくらい使われている言語ですね。

ボタンのサンプルソース

今回のサンプルはボタンを押すと、ナビゲーションが順に表示されるハンバーガーボタンを実装してみます。
※ある程度のHTMLとCSSの基本的な知識があることを前提に説明します。
jQueryも使用しているためjQuery公式リファレンス（英語版）からソースをダウンロードしてください。

view demo

今回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);
	  });
	});
});

$(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>

</a>

<li><a href="">グローバルメニュー1</a></li>

<li><a href="">グローバルメニュー2</a></li>

<li><a href="">グローバルメニュー3</a></li>

</ul>

</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$('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の勉強は続けていきたいですね。