レスポンシブサイトで必要になるレイアウト変化に関わるJSの処理

レスポンシブサイトの案件が最近多く、作っている中で「ブラウザ幅によってレイアウトが切り替わる」という特性からほぼ毎回必要になってくるJSの処理が固まってきました。

そこで今回、僕自身がレスポンシブサイトを作成する際にどのようなJSを準備として毎回書いているかご紹介したいと思います。

現在のレイアウトの状況を判別する関数の作成

レスポンシブサイトを作成していると、「スマホレイアウトの時だけこの処理をしたい」といったような、現在のレイアウトの状況を取得したい場面が頻繁に登場します。

そのため、以下のようなコードをいつも記述しています。

CSS

#MqMark {
  display: none;
}

@media (min-width: 1016px){
  #MqMark {
    font-family: 'pc';
  }
}
@media (min-width: 768px) and (max-width: 1015px) {
  #MqMark {
    font-family: 'tb';
  }
}
@media (max-width: 767px) {
  #MqMark {
    font-family: 'sp';
  }
}

javascript

var MYAPP = {};

(function($, win) {
  var $win = $(window);

  MYAPP.getLayout = function() {
    var $mqMark = $('#MqMark');
    var layout  = $mqMark.css('font-family').replace(/"/g, '');

    return layout;
  };
})(jQuery, window);

解説

このコードでは、「<div id=”MqMark”></div>」といったメディアクエリ判定用（display: none;を使用して見栄えに影響がないようにしている）の要素をHTMLに記述しておき、その要素の状態を取得することにより現在のレイアウトを判別しています。

前述のようなコードを準備しておくと

if (MYAPP.getLayout() === 'sp') {
  // スマホレイアウトの時だけこの中に入る
}

といったような条件分岐が可能になります。

特徴的なのは、現在のレイアウトの取得を、「#MqMark」のfont-familyによって行っている点です。（こちらの記事を参考にさせていただきました。）

実装が気持ち悪いことは気持ち悪いのですが、CSS側との連携等考えると一番スマートなやり方だと感じ自分は使わせて頂いています。

レイアウト切り替わり時にイベントを発生させる。

他にも、「レイアウトが切り替わった瞬間に特定の処理をさせたい」等といった場面も頻繁に遭遇します。

自身がよく遭遇する場面としては、「PCレイアウトで３列で並べているパネル型のアイテムがあり、それをtile.jsで高さを揃えている」状況でかつ「スマホレイアウトだと３列から２列に切り替わる」といったような場面によく遭遇します。こういう場合に切り替わりのタイミングに合わせて処理を実行する必要が出てきます。

このために、以下のコードを前述のコードに加えて準備しています。

javascript

(function($, win) {
  var $win = $(window);

  MYAPP.EVENT_LAYOUTCHANGE = 'layoutchange';

  $(function() {
    // layout trigger
    (function() {
      var oldLayout = false;
      $win.on('resize load', function() {
        var currentLayout = MYAPP.getLayout();

        if (currentLayout !== oldLayout) {
          var event = $.Event(MYAPP.EVENT_LAYOUTCHANGE);

          event.newLayout = currentLayout;
          event.oldLayout = oldLayout;

          $win.trigger(event);

          oldLayout = currentLayout;
        }
      });
    })();
  });
})(jQuery, window);

解説

やってることはシンプルで、resizeイベント発生時に現在のレイアウトを取得して、レイアウトが変わっていれば「layoutchange」イベントをトリガーしています。

このコードを準備しておくと、

var $win = $(window);

$win.on(MYAPP.EVENT_LAYOUTCHANGE, function(event) {
  switch(event.newLayout) {
    case 'pc':
      console.log('layout to pc');
      break;
    case 'tb':
      console.log('layout to tb');
      break;
    case 'sp':
      console.log('layout to sp');
      break;
  }
});

このような方法で、レイアウト切り替わり時に特定の処理を実行することが出来ます。

以上

レスポンシブサイトはHTML/CSSだけでなく、javascriptもレイアウト切り替わりという挙動があることから必然的に複雑になってしまいます。

下手に書いてしまうと普通のサイトより顕著にコードがどんどんカオスになってしまうので、出来るだけよくあるパターンに関してはまとめておいて綺麗に書けるようにしておきたいですね。

以上、たにっぱでした〜