vol.41 ハンバーガーボタン実装で学ぶJSの基礎
こんにちは。デザイナーの寺田です。
Webサイトでよくみる三本線のメニューボタン。
海外でハンバーガーに見えると言われ 「ハンバーガーボタン」という名前になっています。
「ハンバーガーボタン 実装」で検索すれば ソースを公開しているサイトはヒットしますが、
ソースの中身を理解していないと実装しても不具合が出たり、 そもそも動きが実現できないことも。
今回は、Webサイトのメニューとしてよく使われる
ハンバーガーボタンをもとにJSの基礎をご紹介します。
デザイン上で長所と短所
◎長所
メニューの内容をWebサイト上に表示させなくとも、コンテンツリンクを実装できるハンバーガーボタンは、画面の表示領域を広くもつことができます。
そのため、ゆったりとしたデザインや大胆なレイアウトをスマートフォンでもできることが魅力です。
◎短所
コンテンツリンクを押すために1動作増えたことから、ユーザーエンゲージメントが半減したという記事もあります。
そのことは、Webサイトのユーザー離脱へとつながる可能性が高まります。
（ユーザーエンゲージメントとは、実際にアクションが取られたかどうかの指標。）
日頃、サイトに慣れ親しんでいるユーザーはハンバーガーボタンを認識していますが、 使用頻度の低いユーザーにとってはメニューを押すのに 1回動作が増えることは無意識的にストレスを感じているのかもしれないです。
作るサイトのターゲットによって、ハンバーガーボタンを使用することが合っているのかは考える必要があると思います。 ハンバーガーボタンだけでなく、デジタルの技術やWebの開発の進化が進んでいった際に、 サイトをつくる側の考えとつかう側の考えにすれ違いがないのか考えることが 最適なUIになると考えています。
苦労した下積み時代から、JS全盛期へ
JavaScriptの誕生は「1995年」。
意外と昔からある技術です。
1996年にマイクロソフトのInternet Explorer 3.0に搭載され、普及しました。
ですが、当初はプログラミングの知識がなくても手軽に始められる言語ということから、 素人が使うものとして扱われました。
また、無駄な動きを入れてページの読み込みを遅くするものとして敬遠されていたそうです。
Googleが2005年にGoogle MapでAjaxを使用。
ページの再読み込みをすることなく、Webサイト上で自分の位置が リアルタイムに移動する機能は多くの人が驚きました。
Ajaxを通してJSが注目され始めました。
現在、手軽にちょっとした動きをつけられたり、
簡単に面白いことができるJSはWebサイトで必ず使用されている言語ですね。
まずソースを見てみよう
今回はボタンを押したら、メニューが順に表示されるハンバーガーボタンを実装します。
※HTMLとCSSの基本的な知識があることを前提に説明を進めます。
jQueryも使用しているためこちら（jQueryサイト）からソースのダウンロードをお願いします。
今回JSで記述する内容はこれだけです。
$(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>
JSの基本構造について、プログラムでは一つの処理ごとに「 ; 」で区切ります。
下記ソースの説明を進めます。
$(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は技術の進歩が早く、追いついていくので精一杯な分野かもしれません。
ですが、Webは今ある知識を発想次第で 新しいものを作れる可能性がたくさんある分野でもあると思います。
可能性が広い分、楽しいことがたくさんできる。
進歩と可能性に満ちたWebの勉強は続けていきたいですね。
