Views Exposed FilterのUIを改善するモジュール5選

こんにちは、スタジオ・ウミの池田です。8月よりディレクター1名・エンジニア1名の合計2名の方が入社されまして、最近はにぎやかな毎日です。新しいメンバーが増えると、ドキュメント・ツール・仕組みなどがより一層綺麗に整備されるきっかけになるので、組織を改善する良い機会だなと感じています。 さて、先日ViewsのExposed FilterのUIを改善するモジュールについていくつかまとめて調査したので、今回はその内容をご紹介したいと思います。

Views Exposed Filterとは

DrupalのViews機能において、フィルタリング機能をサイト閲覧者に提供するものです。キャプチャのように、タイトルで絞り込めるテキストフィールドを提供したり、カテゴリで絞り込めるプルダウンを提供したりすることができます。

使用するための設定方法は簡単で、Viewsのフィルタ設定で「このフィルターを訪問者へ表示し、変更できるようにする」にチェックを入れるだけです。

Better Exposed Filters

公式サイト: https://www.drupal.org/project/better_exposed_filters

タクソノミータームで絞り込むなど複数の選択肢から条件を選択するExposed Filterは、Drupalコアではプルダウン/マルチセレクトリストのUIが提供されます。しかし、このモジュールを導入すれば単数選択の場合はラジオボタン、複数選択可の場合はチェックボックスのUIに変更することができます。 このモジュールは、コントリビュートモジュールのViewsカテゴリの中で利用数トップ3に入るほど広く利用されている定番モジュールです。

単数選択

モジュール適用前

モジュール適用後

複数選択

モジュール適用前

モジュール適用後

Views Entity Reference Filter

公式サイト: https://www.drupal.org/project/verf

コンテンツやストレージなどを参照しているエンティティ参照フィールドのExposed Filterは、DrupalコアではテキストフィールドのUIが提供され、エンティティIDを手入力する必要があります。 サイト閲覧者はエンティティIDを知らないため、実質入力不可能です。しかし、このモジュールを導入すればプルダウンのUIに変更することができ、エンティティIDを知らなくてもフィルタ条件を指定できるようになります。

モジュール適用前

モジュール適用後

Views Autocomplete Filters

公式サイト: https://www.drupal.org/project/views_autocomplete_filters

タイトルなどテキストフィールドのExposed Filterは、Drupalコアでは標準的なテキストフィールドのUIが提供されますが、このモジュールを導入すれば入力したテキストに部分一致する候補が表示されるようになります。たとえば、タイトルが「記事1」「記事2」のコンテンツが存在したとして、テキストフィールドに「記事」と入力すると部分一致するそれらが候補に表示され、ユーザの入力を補助することができます。

モジュール適用前

モジュール適用後

Date Popup

公式サイト: https://www.drupal.org/project/date_popup

投稿日時など日付フィールドのExposed Filterは、DrupalコアではテキストフィールドのUIが提供され、日付を決まったフォーマットで手入力する必要があります。 例えば、「2023年9月7日」を指定したい場合「2023-09-07」といったフォーマットで指定する必要があり、ユーザフレンドリーではありません。しかし、このモジュールを導入すれば日付ピッカーのUIに変更することができ、入力が簡単になります。

モジュール適用前

モジュール適用後

Views year filter

公式サイト: https://www.drupal.org/project/views_year_filter

投稿日時など日付フィールドのExposed Filterは、Drupalコアでは年・月・日を指定する必要があります。しかし、このモジュールを導入すれば年だけを指定して、フィルタリングできるようになります。お知らせやブログなど、特定の年に投稿されたコンテンツを表示したいケースは多くありますので、その際に役立ちます。

モジュール適用前

モジュール適用後

まとめ

とても便利なViews Exposed Filterですが、今回ご紹介したようにDrupalコアの提供するUIでは実用に耐えないものもあります。しかし、モジュールを探してみるとそれらをすんなり解決してくれることも多いです。機能要件とコアが提供するUIが合致しない場合は、諦めずに一度モジュールを探してみることをオススメします。 以上、Views Exposed FilterのUIを改善するモジュールのご紹介でした。