TokyoFacebookTwitterHatenaPocketカード・タイル状の要素をアニメーション付きで見栄えよく表示する「MixItUp3」。ストックしておくと便利なライブラリーの紹介です。自分のWebサイトを見やすくするために、コンテンツにフィルターをかけて抽出したり整列したりするのは優れた手段です。自分の作品集、アルバム、ブログなどはカテゴリごとに分けたいものです。それを実現してくれるJavaScriptライブラリーが数多くあります。中でも人気があるのはMixItUpとIsotopeです。この記事ではMixItUp3(執筆時点での最新版)の基本機能を紹介するとともに、プロジェクトで活用できるように手順も説明します。ライブラリーの動作を示すために、記事では作成したデモを参照しています。MixItUp3とは?MixItUpは、ほかのライブラリーに依存することなく、CSSのアニメーション効果を使いながら、サイトの要素の抽出や整列ができるJavaScriptライブラリーです。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>これで、対象要素の基本構成は完成し、フィルターとソートをかける準備が整いました。フィルターを使う最初に、抽出に使う条件(カテゴリー)を決めます。例では学校に関するカテゴリーを作りました。graduate(大学院生)、phd(博士課程)です。各要素にそれぞれのクラス名を加えます。undergraduate、graduateのマークアップは以下のようになります。</li>次に、抽出した結果を表示させるためのクリックハンドラを定義します。ここでは<button>要素を使います。各ボタンにはクラス名filter-btn、data-filter属性を加えました。このdata-filter属性の値は、ボタンで抽出したい要素に付けたクラス名と一致するようにします。値にはall(すべて)やnone(無し)も指定できます。今回の2つのフィルターボタンは次のようになります。data-filter=".graduate">Graduate</button>初期値ではMixItUpが読み込まれると、対象となる全要素が表示されます。<button>のカスタム属性data-filter="all"(すべて表示)が有効になった状態です。言えば、ライブラリーはボタンにprograms-filter-btn-active(有効化されたボタン)というクラスを適用します。これを利用して、選択されたボタンにスタイルを適用できます。以下が今回のデモで使用したスタイルです。white;}ここまでは一度に1つのフィルターしか適用できませんでした。複数のフィルター条件で抽出したい、ということにしましょう。学部生向けの課目と大学院生向けの課目の両方を同時に抽出したい場合です。これは、各ボタンがトグル、つまり押すたびにオン・オフが切り替わる仕組みなのを利用すれば大丈夫です。トグル操作の実例はCodepenのデモを参照してください。続いて整列(ソート)です。要素を整列する最初にしなければならないことは、どの属性に従って整列するのかを決めることです。例ではorder属性とyear属性を使います。次の手順では、対象とする要素にこのカスタム属性(data-order、data-year)を追加します。属性の値は、整列させたい順番次第で決まります。2つの要素のHTMLは次のようになります。href="#">Pharmacology<span>(G)</span></a></li><button>要素をクリックハンドラとして定義し、それぞれにクラス名sort-btn、data-sort属性を加えます。属性の値は慣例に従って次のようにします(asc:昇順)。data-sort="order:asc">整列に使う属性ができたので、値として順序の指定、「asc(昇順)」または「desc(降順)」をコロンに続けて入力します。この属性にはdefault(初期値)またはrandom(ランダム)も指定できます。1つのポイントは、属性を複数同時に使っても良いことです。サンプルで使う2つのボタンは次のようになります。class="multi">(Multi)</span></button>MixItUpが読み込まれたとき、ボタンは属性data-sort="default:asc"(初期値:昇順)が有効になった状態です。要素はそれぞれDOMを通じて指定された通りに並んでいます。フィルターボタンの初期値と似ていて、このボタンにも有効になっていることを示すクラスを適用できます(programs-sort-btn-active)。以上で、このライブラリーの基本機能には目を通しました。次に、どのように初期化し開始するかを説明します。オプションによる動作の変更サンプルのMixItUp3の機能を有効にするため、ファクトリー関数mixitupを使用し、2つの引数を渡します。今回のコンテナを指定するためのセレクタMixItUpの動作を変更するための、各設定値を記載したオブジェクトコードは次のようになります。}});変更した内容を詳しく説明します。最後に、対象となる要素、フィルターボタン、整列ボタンにカスタムクラスを追加。したがってフィルターが有効になったときにはデフォルトのmixitup-control-activeクラスではなくprograms-filter-btn-activeクラスが付加される注:元からの初期値は、コード中のコメントに記載しています。ファクトリー関数mixitupが返してくるMixItUpのインスタンスは、APIメソッドを使って操作できます。このサンプルコードの動作の完全版デモは、こちらにもあります。最後にこの記事ではMixItUp3ライブラリーの基本だけを取り上げました。ほかにもMixItUpページ表示、MixItUpマルチフィルターのように、取り上げたいことがたくさんあります。少なくとも、このデモが次回プロジェクトの参考になればうれしく思います。※この記事はMixItUpバージョン3について記載するため、2017年2月に更新しました。MartsoukosフリーランスWeb開発者です。SitePointやTuts+など、Web構築系の大手マガジンに執筆するWebオタクでもあります。Webに関することなら、なんでもこい!とばかりに、中毒者のごとく、最新テクノロジーについて毎日学び続けています。