Better Search Block

標準のDrupal検索ブロックを、アニメーションアイコンエフェクト付きの美しい検索ボックスに変換する軽量モジュールです。

better_search

1,451 sites

drupal.org

gui theme

search theming UI animation css search block form styling user experience

Drupal 8 Drupal 9 Drupal 10

インストール

Drupal 10, 9, 8 v2.0.1

composer require 'drupal/better_search:^2.0'

概要

Better Search Blockは、Drupalのデフォルト検索ブロックの外観を向上させる軽量なテーマモジュールです。最小限の設定で、サイト管理者は標準の検索フォームを、虫眼鏡アイコンを備えたモダンでアニメーション付きの検索インターフェースに置き換えることができます。

このモジュールは、ホバーやフォーカス時に発動する4種類のアニメーションテーマを提供し、インタラクティブなユーザー体験を実現します。これらのアニメーションには、背景色のトランジション、検索フィールドの拡張、アイコンのスケーリング、スライドアイコンエフェクトが含まれます。すべてのスタイリングはJavaScript依存なしの純粋なCSSで実現されており、最適なパフォーマンスを保証します。

このモジュールは、リージョンに配置された検索ブロックと専用検索ページの検索フォームの両方でシームレスに動作します。Bootstrapテーマとの互換性があり、プレースホルダーテキスト、検索フィールドの幅、送信ボタンの表示をカスタマイズするオプションも提供しています。

Features

4種類のアニメーション検索ボックステーマ：Background Fade、Expand on Hover、Expand Icon on Hover、Slide Icon on Hover
検索入力フィールドに表示されるカスタマイズ可能なプレースホルダーテキスト
10〜30文字の範囲で11段階から選択できる検索ボックス幅の設定
検索ブロックに加えて検索ページ（/search）にもBetter Searchスタイリングを適用するオプション
visually-hiddenクラスを使用して送信ボタンを非表示にし、すっきりした外観を実現
JavaScript依存なしの純粋なCSSアニメーションによる最適なパフォーマンス
すべての画面解像度で鮮明に表示されるSVGベースの検索アイコン
自動検出と適切なスタイリングによるBootstrapテーマ互換性
古いブラウザ向けのベンダープレフィックスを含むクロスブラウザサポート
search_block_formとsearch_formの両方のフォームで動作

Use Cases

サイト検索の見た目を向上

サイト管理者がカスタムCSSを書かずにデフォルトのDrupal検索ブロックの外観を改善したい場合。Better Search Blockを有効にして「Expand on Hover」テーマを選択することで、検索フィールドがユーザーのホバー時に拡張するインタラクティブな要素となり、視覚的フィードバックとモダンな外観を提供します。

ミニマリストなヘッダー検索

デザイナーがクリック時に拡張するコンパクトな検索アイコンをヘッダーに配置したい場合。「Expand on Hover」テーマを小さいサイズ設定（例：10）と組み合わせることで、検索フィールドは最初はアイコンのみとして表示され、ユーザーが操作すると完全な入力フィールドが展開されます。

ページ間で一貫した検索スタイリング

サイトにサイドバーの検索ブロックと/searchページの検索フォームの両方がある場合。「検索ページでBetter Searchを有効にする」と「送信ボタンを非表示」を有効にすることで、両方の検索インターフェースが同じアニメーションスタイリングを受け、サイト全体で一貫したユーザー体験を提供します。

Bootstrapテーマとの統合

Bootstrapベースのテーマを使用しているサイトでアニメーション検索スタイリングが必要な場合。Better Search BlockはBootstrapとその子テーマを自動的に検出し、アニメーションエフェクトを維持しながら互換性を確保するための適切なクラス（Attributeオブジェクトの代わりに配列構文を使用）を適用します。

アクセシブルなアニメーション検索

組織がアクセシブルなインターフェースを必要としながらも視覚的な強化を望む場合。Better Searchは送信ボタンをvisually-hiddenクラスでDOMに保持し（スクリーンリーダーは引き続きアクセス可能）、ユーザーはEnterキーを押して検索を送信できるため、視覚的な洗練を提供しながらアクセシビリティ要件を満たします。

Tips

新しいCSSライブラリが正しく読み込まれるように、Better Search設定を変更した後はDrupalのキャッシュをクリアしてください。
検索アイコンはcss/images/search-icon.svgにあるSVGファイルで、CSSをオーバーライドすることでカスタムアイコンに置き換えることができます。
「Expand on Hover」テーマが正しく動作するには、テーマが検索フォームコンテナに固定幅を設定していないことを確認してください。
サイトのカラースキームで選択したテーマをテストしてください。デフォルトは暗い背景（#2b303b）を使用しており、デザインに合わせるためにCSSオーバーライドが必要な場合があります。
サイズ設定はHTMLのsize属性に影響します。実際の視覚的な幅はテーマのフォント設定によって異なる場合があります。
アニメーションが表示されない場合は、テーマや他のモジュールが検索フォーム用の競合するCSSを読み込んでいないか確認してください。

Technical Details

Better Search設定 /admin/config/search/better-search

Better Search拡張検索ブロックの外観と動作を設定します。このページでは、管理者がアニメーションテーマの選択、プレースホルダーテキストのカスタマイズ、検索ボックス幅の設定、検索ページへのスタイリング適用の制御を行えます。

Better Search設定の管理

/admin/config/search/better-searchのBetter Search設定ページにアクセスして変更することを許可します。この権限を持つユーザーは、アニメーションテーマ、プレースホルダーテキスト、検索ボックスサイズ、検索ページオプションを変更できます。

hook_help

hook_help()を実装してヘルプページにモジュールのドキュメントを提供します。モジュールの目的に関する情報とプロジェクトページへのリンクを表示します。

hook_form_alter

search_block_formとsearch_formフォームを変更し、検索アイコンを挿入、選択したテーマに基づいて適切なCSSライブラリをアタッチ、プレースホルダーテキストを設定、フィールドサイズを設定、オプションで送信ボタンを非表示にします。

モジュールは@placeholderパターンを使用したDrupalの翻訳システムでプレースホルダーテキストを適切にサニタイズし、XSSを防止しています。
設定変更には「administer Better Search settings」権限が必要で、不正な変更を防止します。
ユーザー送信データは保存も処理もされません。モジュールはプレゼンテーション層にのみ影響します。