TokyoFacebookTwitterHatenaPocketFlexboxを使えば要素の並び替えはとても簡単。そこで、カスタムデータ属性をうまく使って、Flexboxの内容でソートできるjQueryプラグインを考えて作ってみました。この記事では、カスタムデータ属性の値をもとに要素をソートする簡単なjQueryプラグインの作成方法を順を追って説明していきます。どのようなプラグインかは、CodePenのデモを参照してください。pluginsとflexboxの基本的な知識を持った読者を想定しています。知識が十分でない場合は、リンク先を参照してください。アクセシビリティの問題プラグインを作成するのに、flexboxを利用します。デフォルトでは、flexアイテムはソースの順番に配置されていますが、orderプロパティで親要素のflexコンテナ内での順番を変更できます。orderの値が小さいアイテムが最初に表示されます。次の例を参照してください。order値が同じアイテムが複数ある場合、アイテムの順番はソースの順番で決定されます。orderプロパティを使えば、簡単に要素の並べ替えができますが、アクセシビリティに制限が生じます。ソースの順番と表示の順番が対応しなくなります。Order(ソースの順番vs表示の順番)」のセクション)。これからプラグインの作成方法を説明していきますが、アクセシビリティに問題が生じることは覚えておいてください。マークアップ最初に、12個のリスト項目からなる番号なしリストを定義します。--></ul>リスト項目に.details要素があることに注意してください。.details要素は、リスト項目に関する情報を示しています。あとで分かりますが、この情報を保持するためにカスタムHTML属性を追加します。注:.details要素は絶対に必要なわけではありません。記事では、目的の要素がどのようにソートされるかを分かりやすくするために利用しています。次に、ソートの基準となる属性を決めます。例ではpriceとlength属性に決めます。これらの名前をリスト項目にカスタム属性(data-priceとdata-length)を適用するのに使用します。属性の値は.details要素の一部である.lengthと.price要素のテキスト値(数値に限ります)に一致させます。1番目のリスト項目の属性は次のようになります。</a></li>ここで、リスト項目をソートするために用いる要素として<select>要素を指定します。Descending</option></select>コードから分かるように、すべての<option>要素はdata-sort属性を持ちます(最初の要素以外)。この属性の値を記述するには、次の書式を用います。data-sort="price:asc">すなわち、ソートに用いる属性を値とし、値のあとにコロンを付け、「asc」または「desc」という識別子をつけます。CSSスタイルマークアップの準備ができたので、作成中のページに基本スタイルを加えます。具体的には、順序なしリストをflexコンテナとして定義し、リスト項目の幅をwidth:25%とします。CSSルールは次のようになります。25%;}プラグインの作成これから作成するプラグインをnumericFlexboxSortingと呼ぶことにします。プラグインの初期化プラグイン作成の手順を示す前に、プラグインの目的に応じた初期化の方法を説明します。通常、プラグインは次の方法で初期化します。$("your-select-tag").numericFlexboxSorting();今回の場合は次のようにします。liクラスで要素をソートしますが、elToSort構成プロパティの値を変更するとオーバーライドできます。"the-elements-you-want-to-sort"});ステップの詳細いよいよ開発手順について説明します。最初に、jQueryのプロトタイプ($.fn)オブジェクトをnumericFlexboxSortingに加えて拡張します。};このメソッドでは、キーワードthisが<select>要素を参照します。プラグインを作成すると同時に、この要素を返さなければ、メソッドチェーンが切れてしまうからです。例として、次のコードについて考えてみます。"red");ここで、ターゲット要素を返さなければ、cssメソッドはなにもしないことになります。liクラスで要素をソートしますが、必要があればこの動作をオーバーライドできなければなりません。そのため、jQueryのextendメソッドを利用します。here};プラグインは昇順または降順で数字をソートします。それを念頭に、あとで用いることになりますが、これに対応する変数を定義します。here};ドロップダウンリストからユーザーがオプションを選んだら(1番目は除く)、値を求め評価します。そのためにはchangeイベントを用います。here};イベントハンドラーの内部では、2つのことが実行されています。選択されたオプションのdata-sort属性の値(たとえば、price:asc)を求めるsortColumns関数を呼び出すsortColumns関数は2つのパラメータをとります。関数の中は次のようになっています。}中でなにが起こっているのか説明します。attributeの値を求め、配列に格納する。ターゲット要素のソート方法に従って、昇順または降順に配列をソートする配列の中を調べて、関連する要素を見つけ出しorderプロパティの値(正または負の値)をアサインする。attributeの値によって決定される。ユーザーがprice:ascオプションを選んだ場合data-price:315である要素はorder:315を受け取る。ユーザーがprice:descオプションを選んだ場合order:-315を受け取る最後に$変数を使うほかのライブラリーと矛盾が生じないようにするため、即時関数でコードをラップします。};})(jQuery);これでプラグインの用意ができました。Codepenでデモが見られます。プラグインの制限事項プラグインに1つ大きな制限があることを思い出してください。アクセシブルでないことです。その証拠に、ドロップダウンリストからオプションを選択し、キーボードを使ってリンクをナビゲートしてください(ペンをクリックしてTabキーを押す)。要素がフォーカスされるのは、CSSの順番ではなく、DOMの順となります。1つ気をつけなければならないのは、このプラグインでできることはごく基本的なことであり、動作条件が限られていることです。属性の文字変数は数値でなければなりません。ターゲット要素として、数値が入ることを前提としているorderを使っているからです。ソートやフィルタの目的では、より信頼性が高く、強力なライブラリーがあります。IsotopeMixItUpとくにMixItUpについては、SitePointの記事(日本語訳)で基礎を説明しています。ブラウザーのサポートこのプラグインはflexboxを使うので、プラグインのサポートはflexboxのブラウザーサポートで決まります。最近では、多くのブラウザーがflexboxをサポートするようになりました。flexbox?を参照してください。次のステップこのプラグインの機能を拡張する場合、次のようなことが考えられるでしょう。ランダムソーティングの機能を加えるソート制御が<select>要素、<button>要素、あるいはほかのタイプを選べるようにする。}});最後にこの記事では、jQueryプラグインの作成手順について紹介しました。このプラグインでは、カスタムデータ属性に基づいてソートができるというflexboxの機能を利用しました。MartsoukosフリーランスWeb開発者です。SitePointやTuts+など、Web構築系の大手マガジンに執筆するWebオタクでもあります。Webに関することなら、なんでもこい!とばかりに、中毒者のごとく、最新テクノロジーについて毎日学び続けています。