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

大量の商品があったとしても、ユーザがカテゴリ、色、サイズなどから自由にフィルタリングができる機能があればスムーズに商品選択ができるでしょう。さらに条件に沿ったソートがあると便利です。

そんな機能を実装するためのライブラリがIsotopeです。フィルタリング時のスムーズなアニメーションがウリのライブラリです。

Isotopeの使い方

こちらが最初の表示です。フィルタを押してみます。
こちらが最初の表示です。フィルタを押してみます。

項目がフィルタリングされました。アニメーション付きで分かりやすいです。
項目がフィルタリングされました。アニメーション付きで分かりやすいです。

正規表現を使ったフィルタリングもできます。
正規表現を使ったフィルタリングもできます。

並び替えも可能です。
並び替えも可能です。

実装例。商品やPinterest風UIで使われているようです。
実装例。商品やPinterest風UIで使われているようです。

あまりに多い情報を見せられると、どれが最適なのか分からなくなってしまいます。そこでフィルタリングする条件を提示することで、ユーザにとって使いやすいUIを提供できます。サーバサイドに都度問い合わせても良いですが、Isotopeならば大量のデータをユーザ自身がリアルタイムにフィルタリングできるのでよりスムーズに処理できそうです。

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

Isotope

metafizzy/isotope

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2