hiraku.js でハマった話

オフキャンバスメニューを扱うスクリプトで、一番カンタンに実装できそうなので使うことにしたhiraku.jsでドツボにはまったのでメモ。多分、自分だけだと思うけど……。

ハマったのは、デスクトップのブラウザ(Chrome、Firefox等)では動作するのに、スマホ(iPhone)で動作しない、という問題。

自分が書いたソースはこう。

<!-- ページトップに固定するメニュー -->
<header id="header" class="js-fixed-header">
	<div class="js-offcanvas-btn" >
		<span class="hiraku-open-btn-line"></span>
	</div>
	<a href="#">Title</a>
</header>

<!-- メインコンテンツ -->
<main id="contents">
	<p>Lorem ipsum dolor sit amet?</p>
</main>

<!-- 横からスライドしてくるメニュー -->
<nav id="sidemenu" class="js-offcanvas">
	<ul>
		<li>Lorem ipsum dolor.</li>
		<li>Lorem ipsum dolor.</li>
	</ul>
</nav>
$(".js-offcanvas").hiraku({ //スライドしてくるメニューのクラス
    btn: ".js-offcanvas-btn", // メニューを開閉するボタンのクラス
    fixedHeader: ".js-fixed-header", //固定するヘッダがある場合はクラスを指定
    direction: "right" //メニューが開く方向
});

他のスクリプトと衝突しているのか、それともiPhone固有の問題なのか……といろいろ試したが、結局、メニュー開閉のためのボタンをbuttonで作らないといけない、というのが原因だった。自分はdivで作ってたので動かなかった。

なので正しいソースはこう。

<!-- ページトップに固定するメニュー -->
<header id="header" class="js-fixed-header">
	<button type="button" class="js-offcanvas-btn" >
		<span class="hiraku-open-btn-line"></span>
	</button>
	<a href="#">Title</a>
</header>

<!-- メインコンテンツ -->
<main>
	<p>Lorem ipsum dolor sit amet?</p>
</main>

<!-- 横からスライドしてくるメニュー -->
<nav id="sidemenu" class="js-offcanvas">
	<ul>
		<li>Lorem ipsum dolor.</li>
		<li>Lorem ipsum dolor.</li>
	</ul>
</nav>

JS部分に変更はありません。

配布サイトのサンプルは確かにbuttonで書かれているのだが、指定のID、クラスさえついていれば、どんな要素でもいいのかと思って書き換えてしまっていた。 いや、だってjQueryのスクリプトって大概そうだし(言い訳)

hiraku.jsは他の同機能をスクリプトより以下の点で優れていると思うのでおすすめ。

  • 読み込むファイルが少ない(jquery + hiraku.js + hiraku.css)
    他のライブラリや、複数のCSSを必要とするスクリプトは結構ある
  • メニュー部分のHTMLをどこに配置してもいい。
    本文中の先頭でも末尾でも、指定のIDやクラスがついた要素があればいい。
  • ヘッダが固定できる
    ページの上部に固定したメニューを設置してもちゃんと動作する。
    これができないスクリプトは結構ある。

余談

この横からシュッと出てくるメニューっていろんな呼び方があって、検索するときに苦労する。今まで見た中だと下の3つかな…。

  • ドロワーメニュー(drawer menu)
  • スライドメニュー(slide menu)
  • オフキャンバスメニュー(offcanvas menu)

それぞれをGoogleにぶち込むと、当然だが検索結果がまるで違う。それで見つかるスクリプトはどれもほぼ同等の機能を実現するものなので、それぞれのスクリプトを比較検討したいときにめんどくさい。

自分はずっと「ドロワーメニュー」で検索してて、思うようなスクリプトが見つからずにいたのだが、「オフキャンバスメニュー」という呼称を知ってこれで検索したら一発でこのhiraku.jsが出てきたっていう……。