このページの本文へ

DESIGN こうめの“これから使える”jQueryプラグイン ― 第8回

要素をアニメーションでカッコよく並び替えるMixItUp

2014年03月25日 11時00分更新

大竹孔明/まぼろし

  • この記事をはてなブックマークに追加
本文印刷
今回紹介するプラグイン

MixItUp


 「MixItUp」 は、要素のレイアウトをアニメーション付きで並び替えたり、絞り込んで表示したりできるjQueryプラグインです。インラインブロックやfloat、flexboxなどのさまざまレイアウト方法に対応しており、HTMLやCSSをほとんど書き換える必要がないので、使いやすいプラグインです。

 カテゴリーによって並び替えたり、特定のカテゴリーだけを表示したり、タイル形式・リスト形式を切り替えたりできるので、ポートフォリオサイトやギャラリーサイト、ブログのトップページに向いています。

 Google ChromeやFirefoxなどのモダンブラウザーとInternet Explorer 10〜、iOS、Androidに対応しており、アニメーション機能を除けばIE8〜9からも利用できます。

step1 jQueryプラグインの読み込み

 jQuery本体をjQueryの公式サイトから、MixItUp を配布ページからダウンロードしましょう。MixItUpは左のメニューを開いて、下部の「.zip」からダウンロードできます。


 MixItUpプラグインのライセンスはCreative Commons CC-BY-NCです。商用利用の場合は別途商用ライセンス(開発者個人につき25ドル、または組織につき75ドル)が必要です。こちらのページから購入できます。

プラグイン配布ページの画像
プラグイン配布ページの画像

 MixItUp は GitHub でも公開されており、ページ右下の「Download ZIP」ボタンからダウンロードできます。

プラグイン配布ページの画像
プラグイン配布ページの画像

 「build」フォルダに入っている「jquery.mixitup.min.js」を利用します。jQuery本体と 「jquery.mixitup.min.js」 を、利用するWebページの body の閉じタグ直前に読み込みます。


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.mixitup.min"></script>
</body> 
//(中略) 

 これで準備はOKです。

step2 基本的な使い方

 実際にプラグインの使い方を説明します。

 jquery.mixitup.min を読み込んだ後、対象要素をjQueryのセレクターで指定してmixItUp()メソッドを実行します。たとえば、ID名「Container」の要素を並び替えの対象にしたい場合は、$('#Container')のように書きます。

HTML,JavaScript


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.mixitup.min.js"></script>
<script>
$(function(){
 $('#Container').mixItUp();
});
</script>
</body> 
//(中略)

 HTMLは、並び替えたい要素の親要素にID名「Container」を指定します。

HTML


//(中略)
<div id="Container">
<ul>
<li><img alt="" src="http://dummyimage.com/250x250/1abc9c/ffffff.png" class="th" /></li>
<li><img alt="" src="http://dummyimage.com/250x250/1abc9c/ffffff.png" class="th" /></li>
</ul>
<!-- /.#Container --></div>
//(中略)

 並び替えたい要素には、「mix」というclass名を付与します。

HTML


//(中略)
<div id="Container">
<ul>
<li class="mix"><img alt="" src="http://dummyimage.com/250x250/1abc9c/ffffff.png" class="th" /></li>
<li class="mix"><img alt="" src="http://dummyimage.com/250x250/1abc9c/ffffff.png" class="th" /></li>
</ul>
<!-- /.#Container --></div>
//(中略)

 CSSも準備が必要です。MixItUpは、jQueryで要素の表示/非表示を切り替えるため、並び替えたい要素にdisplay:noneを指定していったん非表示にしておきます。

CSS


//(中略)
<style>
#Container .mix{
    display: none;
}
<style>
//(中略)

 このため、JavaScriptが無効の環境では要素が一切表示されません。MixItUpはJaveScript有効時のみ使えると考え、JavaScript無効時をサポートする際は別の方法を検討する必要があります。

MixItUpはJaveScript有効時のみ使える
MixItUpはJaveScript有効時のみ使える

step3 カテゴリーによる絞り込み

 MixItUpプラグインは指定したカテゴリーで絞込めます。カテゴリー名の指定は非常に簡単で、カテゴリー名をclass属性として要素に追加するだけです。

HTML


//(中略)
<li class="mix category-1"><img alt="" src="http://dummyimage.com/250x250/1abc9c/ffffff.png" class="th" /></li>
<li class="mix category-2"><img alt="" src="http://dummyimage.com/250x250/1abc9c/ffffff.png" class="th" /></li>
<li class="mix category-3"><img alt="" src="http://dummyimage.com/250x250/1abc9c/ffffff.png" class="th" /></li>
//(中略)

 それぞれの要素に「category-1」「category-2」「category-3」というclass名を付与しています。「category-1 category-2」のように、複数のclass名も付与できます。

 カテゴリーを絞り込むためのボタンは、任意の要素でマークアップし、class名「filter」、カスタムdata属性「data-filter」を付与します。data-filter属性に「all」を指定すると、すべての要素が表示され、カテゴリー名を指定すると、一致するclass属性が付与された要素のみを表示します。

 以下の例ではボタンをdd要素でマークアップしていますが、要素は問いません。

HTML


//(中略)
<dl>
<dt>絞込み:</dt>
<dd class="filter" data-filter="all">全て</dd>
<dd class="filter" data-filter=".category-1">カテゴリー1</dd>
<dd class="filter" data-filter=".category-2">カテゴリー2</dd>
<dd class="filter" data-filter=".category-3">カテゴリー3</dd>
</dl>
//(中略)

 以下の動画のようになれば成功です。

Step4 並び替えの使い方

 要素の並び替えもとても簡単に設定できます。カスタムdata属性「data-myorder」に任意の数値を指定し、この数値の大小によって並び替えられます。

HTML


//(中略)
<li class="mix category-1" data-myorder="1"><img alt="" src="http://dummyimage.com/250x250/1abc9c/ffffff.png" class="th" /></li>
<li class="mix category-2" data-myorder="100"><img alt="" src="http://dummyimage.com/250x250/1abc9c/ffffff.png" class="th" /></li>
<li class="mix category-3" data-myorder="50"><img alt="" src="http://dummyimage.com/250x250/1abc9c/ffffff.png" class="th" /></li>
//(中略)

 並び替えのボタンには、class名「sort」、カスタムdata属性「data-sort」を付与します。 こちらも要素は問わないので、ケースバイケースで対応しましょう。

 data-sort属性には以下の値が指定できます。

カスタムdata属性 表示順
default 標準の表示順で表示されます
myorder:asc 昇順の表示順で表示されます
myorder:desc 降順の表示順で表示されます
random ランダムで表示されます

HTML


//(中略)
<dl>
<dt>並び替え:</dt>
<dd class="sort" data-sort="default">デフォルト</dd>
<dd class="sort" data-sort="myorder:asc">昇順</dd>
<dd class="sort" data-sort="myorder:desc">降順</dd>
<dd class="sort" data-sort="random">ランダム</dd>
</dl>
//(中略)

 以下の動画のようになれば成功です。

Step5 オプションによるカスタマイズ

 MixItUpプラグインにはアニメーション方法やレイアウト、読み込み方法、APIメソッドなど非常に多くのオプションが用意されています。

 標準の使い方でも十分有用ですが、他の動きに変更したい場合は公式サイトで確認しましょう。

MixItUp公式サイト
MixItUp公式サイト

 MixItUpプラグインの特徴は「既存のマークアップに組み込みやすい」という点です。絞り込みや並び替えは、用途がブログなどに限られますが、既存のブログテンプレートなどにも組み込みやすいでしょう。カテゴリー一覧ページに飛ばす代わりに、あるいはサイドバーやフッターになんとなく設置している「人気順」「カテゴリー」などの分類に、このような見せ方を取り入れてみてもおもしろいかもしれませんね。


著者:大竹 孔明

著者写真

1990年生まれ。2012年3月から2014年6月まで株式会社まぼろしでコーディングを中心にWebデザイン、CMS構築などを経験。2014年8月より株式会社ディー・エヌ・エー【DeNA】でフロントエンド業務に携わる。イベントでの登壇や執筆などの活動も行っており、ブログWeb ambではコーディングを中心にしたWeb制作にまつわる様々な情報を発信している。
個人でCSSを擬人化したリファレンスサイトのGCSSや、有料セミナーのWeb Developer Selectionの運営なども行う。 近著に「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」(共著、MdN刊)がある。

(タイトルイラスト:望月 水奈

Web Professionalトップへ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング