奇麗なデザインのタグによるフィルタリングライブラリ「Filtrify」 // MOONGIFT Archived

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

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

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

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

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

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

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

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

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

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

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

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

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

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

MOONGIFTはこう見る

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

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