Select 2
Select2 JavaScriptライブラリをDrupalと統合し、リストフィールドとEntity Referenceフィールド用の強化されたセレクトフォーム要素とフィールドウィジェットを提供します。
select2
インストール
composer require 'drupal/select2:^2.0'
composer require 'drupal/select2:8.x-1.15'
composer require 'drupal/select2:8.x-1.13'
概要
Select2モジュールは、人気の高いSelect2 JavaScriptライブラリをDrupalと統合し、標準のHTML select要素に代わるモダンでユーザーフレンドリーな選択肢を提供します。検索可能なドロップダウン、オートコンプリート機能、ドラッグ＆ドロップによる並べ替えをサポートした複数値選択など、豊富な機能を備えています。
このモジュールは3つの主要コンポーネントを提供します：カスタムフォーム用のレンダー要素（#type => 'select2'）、リストフィールド（list_integer、list_float、list_string）用のフィールドウィジェット、そしてEntity Referenceフィールド用の高度なフィールドウィジェットです。Entity Referenceウィジェットは、大規模なデータセットに対応するAJAX駆動のオートコンプリートをサポートし、その場で新しいエンティティを作成できる機能（autocreate機能）も備えています。
さらに、このモジュールはViewsのExposed Filter用にBetter Exposed Filtersモジュールとの統合を含み、2つのサブモジュールを提供します：Search APIファセットウィジェット用のSelect2 Facetsと、参照エンティティの公開ステータスインジケーターを表示するSelect2 Publishです。Drupalのコアテーマ（Seven、Claro）および人気の管理テーマGinとのテーマ統合も含まれています。
Features
- 単一選択と複数選択、オプショングループ、カスタマイズ可能なSelect2 JavaScript設定をサポートするSelect2フォームレンダー要素（#type => 'select2'）を提供
- 設定可能なフィールド幅を持つリストフィールド（list_integer、list_float、list_string）用のSelect2フィールドウィジェット
- 大規模データセット向けのAJAXオートコンプリートをサポートするEntity Referenceフィールド用の高度なSelect2フィールドウィジェット
- 選択中にその場で新しいエンティティを作成できるEntity autocreate機能
- Sortableライブラリを使用した複数選択モードでの選択項目のドラッグ＆ドロップ並べ替え
- 自動言語検出とSelect2言語ファイルの読み込みによる国際化（i18n）サポート
- Seven、Claro、Gin管理テーマ用の自動CSSローディングによるテーマ統合
- ViewsのExposed FilterとソートオプションにSelect2ウィジェットを提供するBetter Exposed Filtersモジュールとの統合
- 安全な選択設定処理を備えたカスタムオートコンプリートエンドポイント（/select2_autocomplete）
- オートコンプリートの一致結果を変更するためのhook（hook_select2_autocomplete_matches_alter）を持つ拡張可能なアーキテクチャ
- フィールドカーディナリティ制限（maximumSelectionLength）とfield_config_cardinalityモジュールのサポート
Use Cases
コンテンツ編集者向けのEntity Reference選択の改善
標準のEntity ReferenceオートコンプリートまたはセレクトウィジェットをSelect2に置き換えて、より良いユーザー体験を提供します。編集者は即座にフィルタリングして大量のエンティティリストを検索でき、ドロップダウンオプションでより多くのコンテキストを確認でき、ドラッグ＆ドロップで複数の選択を並べ替えることができます。数千のオプションを持つEntity Referenceフィールドでは、ページ読み込みパフォーマンスを向上させるためにオートコンプリートモードを有効にしてください。
autocreate機能を使用したタクソノミーターム選択
autocreateを有効にしたタクソノミーターム参照フィールドにSelect2を使用します。編集者は検索可能なドロップダウンから既存のタームを選択するか、コンテンツの保存時に自動的に作成される新しいターム名を入力できます。カンマ区切りにより、複数の新しいタグを素早く入力できます。
強化されたViewsのExposed Filter
Better Exposed Filtersモジュール使用時に、ViewsのExposed Filterの標準セレクト要素をSelect2ウィジェットに置き換えます。これは多くのフィルターオプションを持つViews（例：タクソノミーターム、著者、コンテンツタイプでのフィルタリング）で特に有用で、検索可能なドロップダウンがユーザビリティを大幅に向上させます。
Search APIのファセット検索
Select2 Facetsサブモジュールを使用して、Search APIファセット用のSelect2ウィジェットを提供します。これは多数の可能な値を持つファセット検索インターフェースに最適で、ユーザーは必要なファセット値を素早く見つけて選択できます。数百または数千の値を持つファセットにはオートコンプリートモードを有効にしてください。
モジュール内のカスタムフォーム要素
開発者はカスタムフォームでSelect2レンダー要素（#type => 'select2'）を使用して、強化されたセレクト機能を提供できます。この要素は#select2プロパティを通じてすべての標準Select2設定オプションをサポートし、動作と外観の完全なカスタマイズが可能です。
公開ステータス可視化による編集ワークフロー
Select2 Publishサブモジュールを有効にして、Select2ドロップダウン内で参照エンティティが公開済みか未公開かを編集者に直接表示します。未公開のエンティティは赤色で表示され、エンティティ間の関係を作成する際に下書きコンテンツを簡単に識別できます。
Tips
- 50〜100以上のオプションを持つEntity Referenceフィールドでは、ページ読み込みパフォーマンスを向上させるためにオートコンプリートモードを有効にしてください
- 大規模データセットではオートコンプリートパフォーマンスを向上させるため、'CONTAINS'の代わりに'STARTS_WITH'マッチオペレーターを使用してください
- ユーザーを多すぎるオートコンプリート候補で圧倒しないよう、適切なmatch_limit（例：10〜20）を設定してください
- サイトのデザインに合わせるため、管理テーマにカスタムSelect2テーマCSSファイルを作成してください - select2.cssから'--default'を含むスタイルをコピーし、テーマのマシン名に置き換えます
- レンダー要素の#select2プロパティを使用して、任意のSelect2 JavaScript設定オプションをオーバーライドできます
- モジュールは初期化前に'select2-init' jQueryイベントを発行し、他のモジュールが設定を変更できるようにします
- 非常に大きなEntity Referenceフィールドでは、適切なフィルターを持つViewsベースの選択ハンドラーを使用して、利用可能なオプションを制限することを検討してください
- autocreateフィールドではカンマ区切りが自動的に有効になり、複数の新しいアイテムを素早く入力できます
Technical Details
Hooks 1
hook_select2_autocomplete_matches_alter
Select2オートコンプリートエンドポイントから返されるオートコンプリートの一致結果をモジュールが変更できるようにします。このhookはエンティティがマッチングされた後、結果がクライアントに返される前に呼び出されます。
Troubleshooting 6
https://github.com/select2/select2/releases からSelect2ライブラリをダウンロードし、librariesフォルダに配置してください（libraries/select2）。ライブラリにはdist/js/select2.min.jsとdist/css/select2.min.cssファイルが含まれている必要があります。または、asset-packagistを使用したComposerでライブラリを自動管理することもできます。
Select2 JavaScriptライブラリが正しくインストールされ、アクセス可能であることを確認してください。ブラウザコンソールでJavaScriptエラーを確認してください。jQueryとその他の依存関係が正しく読み込まれていることを確認してください。Drupalキャッシュとブラウザキャッシュをクリアしてください。
対象エンティティタイプとバンドル設定がフィールド設定で正しく設定されていることを確認してください。ユーザーが参照エンティティを表示する権限を持っていることを確認してください。選択ハンドラー設定（match_operator、match_limit）がユースケースに適切であることを確認してください。
フィールド設定（handler_settings）でautocreateが有効になっていることを確認してください。auto_create_bundleが有効なバンドルに設定されているか、対象バンドルが1つだけ設定されていることを確認してください。現在のユーザーが対象タイプのエンティティを作成する権限を持っていることを確認してください。
モジュールはSeven、Claro、Ginテーマ用のテーマ固有のCSSを自動的に読み込みます。カスタムテーマの場合は、テーマのlibraries.ymlファイルにカスタムCSSを含むselect2.themeライブラリを作成してください。カスタムSelect2テーマの作成手順についてはモジュールのREADMEを参照してください。
Sortableライブラリ（core/sortable）が正しく読み込まれていることを確認してください。これはデフォルトで利用可能なDrupalコアライブラリです。Sortable関連のJavaScriptエラーがブラウザコンソールにないか確認してください。
Security Notes 3
- モジュールはオートコンプリートエンドポイントパラメータの改ざんを防ぐため、安全なハッシュベースの選択設定キーを使用します
- オートコンプリート結果はエンティティアクセス権限を尊重します - ユーザーは表示権限を持つエンティティのみを見ることができます
- 選択設定はDrupalのkey/valueストアに保存され、サイトのハッシュソルトを使用したHMACで検証されます