かっこよくて気持ちいい！ページ内の要素を整列・抽出する「MixItUp3」がいい感じ

2017年02月28日　04時00分更新

文●George Martsoukos

ツイートする

カード・タイル状の要素をアニメーション付きで見栄えよく表示する「MixItUp3」。ストックしておくと便利なライブラリーの紹介です。

自分のWebサイトを見やすくするために、コンテンツにフィルターをかけて抽出したり整列したりするのは優れた手段です。たとえば、自分の作品集、アルバム、ブログなどはカテゴリごとに分けたいものです。それを実現してくれるJavaScriptライブラリーが数多くあります。中でも人気があるのはMixItUpとIsotopeです。

この記事ではMixItUp3（執筆時点での最新版）の基本機能を紹介するとともに、プロジェクトで活用できるように手順も説明します。ライブラリーの動作を示すために、記事では作成したデモを参照しています。

MixItUp3とは？

MixItUpは、ほかのライブラリーに依存することなく、CSSのアニメーション効果を使いながら、サイトの要素の抽出や整列ができるJavaScriptライブラリーです。Patrick Kunkaによって製作され、さまざまなオプション機能と詳細ドキュメントが揃っています。既存ページのレイアウトはそのままで活用でき、対象となる要素を決めるだけで、面倒な仕事はライブラリーがやってくれます。

商用でなければ無料で使えます。しかし、商用利用する場合はライセンスが必要です。詳しくはこちらのページを参照してください。

MixItUpはすべてのモダンブラウザーで動作します（IEでも10以上なら完全に動作し、IE8以上ならアニメーション無し・機能限定で動作可能）。

MixItUpでなにができるか理解できたので、使うための手順を説明していきます。

MixItUp3の導入方法

MixItUp3を使うには、まずプロジェクトに取り込む必要があります。GitHubページからダウンロードするか、npmのようなパッケージマネジャーを使用してください。

今回のデモではGitHubからダウンロードします。必要なスクリプトは、</body>よりも前に書きます。

  ...
  /path/to/mixitup.min.js
</body>

では全体の構成から始めます。

コンテナクラスを作る

はじめに、フィルターや整列を適用したい要素をコンテナクラスでラップします。コンテナにラップされた各要素は、共通のクラス名を持つようにします。デモではmix-targetというクラス名にしています。コンテナが対象とする要素を特定するのに、このクラス名を使います。さらにコンテナには一意のID（ここではmix-wrapper）を付与します。後ほどMixItUpのインスタンスを初期化する際にこのIDを指定します。

以下が、ここで説明した内容のHTMLです。

<ul class="courses" id="mix-wrapper">
   <li class="mix-target">
      <a href="#">Economics<span>(U)</span></a>
   </li>
  <li class="mix-target">
     <a href="#">Pharmacology<span>(G)</span></a>
  </li>

  <!-- more list items here -->
</ul>

これで、対象要素の基本構成は完成し、フィルターとソートをかける準備が整いました。

フィルターを使う

最初に、抽出に使う条件（カテゴリー）を決めます。例では学校に関するカテゴリーを作りました。undergraduate（学部生）、 graduate（大学院生）、phd（博士課程）です。各要素にそれぞれのクラス名を加えます。

undergraduate、graduateのマークアップは以下のようになります。

  <li class="mix-target undergraduate">
    <a href="#">Economics<span>(U)</span></a>
  </li>
  <li class="mix-target graduate">
    <a href="#">Pharmacology<span>(G)</span></a>
  </li>

次に、抽出した結果を表示させるためのクリックハンドラを定義します。ここでは<button>要素を使います。各ボタンにはクラス名filter-btn、data-filter属性を加えました。このdata-filter属性の値は、ボタンで抽出したい要素に付けたクラス名と一致するようにします。値にはall（すべて）やnone（無し）も指定できます。

今回の2つのフィルターボタンは次のようになります。

<button class="filter-btn" data-filter=".undergraduate">Undergraduate</button>
<button class="filter-btn" data-filter=".graduate">Graduate</button>

初期値ではMixItUpが読み込まれると、対象となる全要素が表示されます。つまり、<button>のカスタム属性data-filter="all"（すべて表示）が有効になった状態です。さらに言えば、ライブラリーはボタンにprograms-filter-btn-active（有効化されたボタン）というクラスを適用します。これを利用して、選択されたボタンにスタイルを適用できます。

以下が今回のデモで使用したスタイルです。

.programs button.programs-filter-btn-active,
.programs button.programs-sort-btn-active {
   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset, 0px 0px 1px transparent;
   background: #3a9fbf;
   color: white;
}

ここまでは一度に1つのフィルターしか適用できませんでした。しかし、複数のフィルター条件で抽出したい、ということにしましょう。たとえば、学部生向けの課目と大学院生向けの課目の両方を同時に抽出したい場合です。幸いこれは、各ボタンがトグル、つまり押すたびにオン・オフが切り替わる仕組みなのを利用すれば大丈夫です。トグル操作の実例はCodepenのデモを参照してください。

続いて整列（ソート）です。

要素を整列する

最初にしなければならないことは、どの属性に従って整列するのかを決めることです。例ではorder属性とyear属性を使います。次の手順では、対象とする要素にこのカスタム属性（data-order、data-year）を追加します。属性の値は、整列させたい順番次第で決まります。

2つの要素のHTMLは次のようになります。

<li class="mix-target undergraduate" data-order="5" data-year="4">
   <a href="#">Economics<span>(U)</span></a>
</li>
<li class="mix-target graduate" data-order="14" data-year="2">
   <a href="#">Pharmacology<span>(G)</span></a>
</li>

<button>要素をクリックハンドラとして定義し、それぞれにクラス名sort-btn、data-sort属性を加えます。属性の値は慣例に従って次のようにします（asc：昇順）。

<button data-sort="order:asc">

整列に使う属性ができたので、値として順序の指定、「asc（昇順）」または「desc（降順）」をコロンに続けて入力します。

この属性にはdefault（初期値）またはrandom（ランダム）も指定できます。もう1つのポイントは、属性を複数同時に使っても良いことです。

サンプルで使う2つのボタンは次のようになります。

<button class="sort-btn" data-sort="order:asc">Ascending</button>
<button class="sort-btn" data-sort="year:desc order:desc">Descending <span class="multi">(Multi)</span></button>

MixItUpが読み込まれたとき、ボタンは属性data-sort="default:asc"（初期値：昇順）が有効になった状態です。要素はそれぞれDOMを通じて指定された通りに並んでいます。フィルターボタンの初期値と似ていて、このボタンにも有効になっていることを示すクラスを適用できます（programs-sort-btn-active）。

以上で、このライブラリーの基本機能には目を通しました。次に、どのように初期化し開始するかを説明します。

オプションによる動作の変更

サンプルのMixItUp3の機能を有効にするため、ファクトリー関数mixitupを使用し、2つの引数を渡します。

今回のコンテナを指定するためのセレクタ
MixItUpの動作を変更するための、各設定値を記載したオブジェクト

コードは次のようになります。

mixitup('#mix-wrapper', {
  load: {
    sort: 'order:asc' /* default:asc */
  },
  animation: {
    effects: 'fade rotateZ(-180deg)', /* fade scale */
    duration: 700 /* 600 */
  },
  classNames: {
    block: 'programs', /* mixitup */
    elementFilter: 'filter-btn', /* control */
    elementSort: 'sort-btn' /* control */
  },
  selectors: {
    target: '.mix-target' /* .mix */
  }
});

変更した内容を詳しく説明します。

最初に、ライブラリ―が読み込まれたとき初期状態でactive（有効化）される整列ボタンを変更
次に、対象の要素に合わせて適用するアニメーション効果を選択
最後に、対象となる要素、フィルターボタン、整列ボタンにカスタムクラスを追加。したがってフィルターが有効になったときにはデフォルトのmixitup-control-activeクラスではなくprograms-filter-btn-activeクラスが付加される

注：元からの初期値は、コード中のコメントに記載しています。

それからもう1つ。ファクトリー関数mixitupが返してくるMixItUpのインスタンスは、APIメソッドを使って操作できます。

このサンプルコードの動作の完全版デモは、こちらにもあります。