2019年11月14日

modalやハンバーガーメニュー を実装する際に起きそうなバグと対処方法

modalやハンバーガーメニュー を実装する際に起きそうなバグの対処方法

お世話になっております。佐藤です。
今回は以前ハンバーガーメニューやモーダルを実装する際にハマった点などについて書いていこうと思います。

ハンバーガーメニューやモーダルの基本理解

ハンバーガーメニューやモーダルとは以下のようなものです。最近のサイトでは形は様々ではありますがよく見かけるUIの1つではないでしょうか?

右上のボタンがハンバーガーメニューの一般例
ハンバーガーメニューを開いた後の例

modalやハンバーガーメニューの実装方法

筆者は大きく分けて以下の3つの方法にて実装することがほとんどです。

  • 生のJavaScriptで実装する
  • jQueryを用いて実装する
  • プラグインなどを使用して実装する

筆者は基本的に「生のJavaScript」で実装することが多いです。自分で実装した方がタイミングの調整やアニメーションの追加などのカスタマイズが行いやすいからです。

そこまでこだわりがなく、基本的なモーダルメニューで問題なければjQueryやプラグインなどを用いて実装することもあります。

modalやハンバーガーメニューを実装する際に起きそうなバグ

モーダルを実装する際に筆者が体験したバグで多いのが圧倒的に以下の3つでした。

  • アニメーションが上手く作動されない
  • モーダルがメインコンテンツの上に覆いかぶさっているためメインコンテンツがクリックできない
  • 端末によっては下のコンテンツが見えない

アニメーションが上手く作動されない

 以前、heightやwidthにautoを指定するとアニメーションが上手く作動しないという記事を書きましたが、それに関係します。

基本的にはモーダルが閉じているときは「display:none」を指定していることがベストだと思いますが「display:none」を指定している要素にアニメーションしようとしても上手くアニメーションしません。カクカクした実装になってしまします。そんなときはkeyframeを使用することで対処することができます。

@keyframes modal {
from {
    display: none;
    transform: scaleY(0);
  }
  1% {
    display: block;
    transform: scaleY(0);
  }
  to {
    display: block;
    transform: scaleY(1);
  }
}

1%でdisplay:blockを指定してあげることでdisplay:noneをしている要素にも問題なくアニメーションを実装することが可能です。

モーダルがメインコンテンツの上に覆いかぶさっているためメインコンテンツがクリックできない

先ほど「display:none」を指定することがベストだと書きましたがそれの大きな理由の1つはこれが原因です。以前下請けの仕事でコードを頂いた際にモーダル の実装を「opacity」と「z-index」だけで実装していたことがありました。自分の担当ではなかったのでモーダルメニューには気にしていなかったのですが、スマホの実機で下のコンテンツがクリックできないという自体が起きていて結構問題になりました。

状況としては以下の画像のような形なのですが、「opacity」と「z-index」で実装しているので見た目には問題ない気がするのですが下のコンテンツがクリックできないという状況になっていました。

opacity:0を指定してモーダルを実装している例
メインコンテンツの上にモーダル が被さっているためクリックできない

PCやエミュレーターでは気づかないこともありますが、特にiosのSafariではz-indexは気を付ける必要があります。

こんな状況にならないためにも必要がないときは「display:none」で対応することがベストだと考えています。(弊社のモーダル は採用していないですが)

端末によっては下のコンテンツが見えない

モーダル の高さを「hight:100vh」に指定した際によく起きる現象です。筆者は便利なのでよく「hight:100vh」を使用しますがその際は注意が必要です。

弊社サイトのモダール部分には「overflow:scroll」をしておりスクロールできるように実装しておりますが以下の画像のようにしたにある程度のpaddingをしてしております。これがないと下のバーによって一番下のプライバシーポリシーが隠れることがあります。その対策として下にpaddingを指定しています。これを指定することによって下のバー分余分にスクロールでき全てのコンテンツをクリックが可能になります。

バグを減らすためには「不要なものは削除すること」

せっかくユーザーが使いやすくように実装したはずのモーダルメニュやハンバーガーメニュー にバグがあると本末転倒ですよね?

バグが起こりそうな場所は、経験が多くなればだいたい分かってきます。その時に1番の有効な手段は「不要なものは削除すること」ことです。コーディングだけでなくプログラミングする際も必要のないデータ、ユーザーに触って欲しくないデータはそもそも排除しておくことが1番のバグ潰しになります。

今回の記事で言えばコンテンツに「display:none」をしてしておくことです。なかなか最初はハマってしますことも多いと思いますが、モーダルメニュやハンバーガーメニュー の実装の際に見て頂ければ幸いです。

以上、「modalやハンバーガーメニュー を実装する際に起きそうなバグと対処方法」でした。