ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Filtrifyはタグ情報をつけたアイテムをフィルタリングして表示するJavaScriptライブラリです。

データをタグで管理するケースはよくありますが、その見せ方は様々です。一例としてFiltrifyを紹介します。とてもエレガントにタグ付けされた情報を一覧化、フィルタリングできます。


全て表示されている場合です。


メニューを出してタグを指定します。カテゴリごとのアイテム数も出ています。


タグの指定は複数できます。


指定すればより絞り込まれていきます。


タグは複数のカテゴリで作成できます。


二つ目を指定すればより少なくなります。


消してしまうほか、ハイライトにすることもできます。


選択肢を表示しているデモです。


data-*を選択肢に利用するデモです。


ページネートも可能です。

一つのアイテムには複数のカテゴリ以下に複数のタグをつけられます。アパレルで言えば取り扱いサイズ、色、季節、対象性別といった情報をまとめられるイメージです。アイディア次第で色々な使い道が考えられそうです。

FiltrifyはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

データのメタ情報を管理する上で、タグを二階層で管理するというのは個人的には好きな方法です。一階層だけのタグでは大抵無理が生じます。一つタグをまとめるカテゴリがあれば、メタ情報の管理がとても簡単になるでしょう。

そうやって管理された情報をいかに見やすく、目的に合わせて取り出せるようにするかは常に問題になります。DB構造も合わせて検討が必要です。見せ方の一例としてFiltrifyのような形はPinterestのように今風で面白そうです。

Filtrify

デモ1:Filtrify - Single category

デモ2:Filtrify - Multiple categories

デモ3:Filtrify - Highlight matched items

デモ4:Filtrify - Adding a legend with the callback function

デモ5:Filtrify - Instantiate with a custom query

デモ6:Filtrify - Trigger a custom query

デモ7:Filtrify - Reset all filters

デモ8:Filtrify - Close after adding a tag

デモ9:Filtrify - Block "data" attributes

デモ10:Filtrify - Load images with Lazy Load

デモ11:Filtrify - Add pagination with jPages

luis-almeida/filtrify

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2