Tagify
エンティティ参照フィールドをTagifyライブラリを使用したタグコンポーネントに変換し、ユーザーフレンドリーなオートコンプリート入力を提供するモジュール。
tagify
インストール
composer require 'drupal/tagify:^1.2'
概要
TagifyモジュールはDrupalのエンティティ参照フィールドを、よりユーザーフレンドリーなタグ入力コンポーネントに変換します。yairEO/tagify JavaScriptライブラリを統合し、高性能で軽量なコードフットプリントを実現しています。
主な特徴として、タクソノミータームやユーザー、コンテンツなどのエンティティをタグとして選択でき、ドラッグ＆ドロップによる並べ替え、オートコンプリート検索、新規エンティティの自動作成などの機能を備えています。
モジュールはCDNからライブラリを読み込むデフォルト設定に加え、ローカルにライブラリをインストールするオプションも提供しています。GinテーマやClaroテーマとの統合スタイルも含まれており、Drupal管理画面での利用に最適化されています。
Better Exposed FiltersやFacetsモジュールとの連携も可能で、Viewsの絞り込みフィルターやFacets検索ウィジェットとしても利用できます。
Features
- エンティティ参照フィールドをTagifyタグ入力ウィジェットに変換
- オートコンプリート検索機能（「から始まる」「含む」の2種類のマッチング方式をサポート）
- ドラッグ＆ドロップによるタグの並べ替え（Sortableライブラリ統合）
- 新規エンティティの自動作成オプション（存在しないタームを自動的に作成）
- タグ内にエンティティIDや追加情報ラベルを表示する機能（トークン対応）
- ユーザーエンティティ用の特別なウィジェット（アバター画像表示対応）
- フィールドカーディナリティ（単一/複数）の自動処理
- Ginテーマ・Claroテーマとの統合スタイル（ダークモード対応）
- Better Exposed Filters連携によるViewsフィルターウィジェット
- Facetsモジュール連携による検索ファセットウィジェット
- CDNまたはローカルライブラリの自動検出
- モバイルレスポンシブ対応
Use Cases
タクソノミータームのタグ入力
記事コンテンツタイプの「タグ」フィールドにTagifyウィジェットを使用し、タグを視覚的なチップとして入力・表示できます。オートコンプリートで既存のタームを検索し、存在しない場合は自動作成も可能です。フォーム表示設定で「Tagify」ウィジェットを選択し、必要に応じてマッチ方法（部分一致/前方一致）や候補表示数を設定してください。
ユーザー選択フィールド（メンション/担当者割り当て）
コンテンツの作成者や担当者を選択するフィールドにTagify User Listウィジェットを使用します。ユーザーのアバター画像とメールアドレスがサジェストに表示され、視覚的に識別しやすくなります。tagify_user_listサブモジュールを有効化し、フォーム表示設定で「Tagify User List」ウィジェットを選択、アバター画像フィールドと画像スタイルを設定してください。
Viewsフィルターでのタグ選択
Better Exposed Filtersモジュールと組み合わせて、Viewsの公開フィルターをTagifyオートコンプリートとして表示します。コンテンツ一覧ページでカテゴリフィルターをタグ形式で入力できるようになり、ユーザビリティが向上します。BEF設定でフィルターウィジェットを「Tagify」に変更してください。
Search APIファセットフィルター
Facetsモジュールと連携し、検索結果のファセットフィルターをTagifyコンポーネントとして表示します。ユーザーはタグを追加/削除する感覚で検索絞り込みができます。tagify_facetsサブモジュールを有効化し、ファセット設定でウィジェットを「Tagify」に変更してください。
エンティティID・追加情報の表示
管理者向けに、タグ内にエンティティIDやバンドル名、作成日などの追加情報を表示できます。ウィジェット設定で「Include entity id」と「Include info label」を有効にし、情報ラベルにトークン（例: [node:type]）を設定します。編集者が正確にエンティティを識別できるようになります。
デフォルトウィジェットとしての設定
サイト全体でエンティティ参照フィールドのデフォルトウィジェットをTagifyに設定できます。/admin/config/tagify/settingsで「Set Tagify widget as default」を有効にすると、新規作成されるエンティティ参照フィールドは自動的にTagifyウィジェットを使用します。
Tips
- ライブラリをローカルにインストールする場合は、composer.jsonにyaireo/tagifyリポジトリ設定を追加し、libraries/tagifyにインストールされるように設定してください
- トークンモジュールをインストールすると、情報ラベル設定時にトークンブラウザが表示され、利用可能なトークンを簡単に確認できます
- フィールドカーディナリティが1の場合、Tagifyは単一選択モードで動作し、セレクトボックスのような操作感になります
- ドラッグ＆ドロップでタグの並び順を変更できます。複数値フィールドで値の順序が重要な場合に便利です
- hook_tagify_autocomplete_match_alterを使用して、特定の条件でエンティティをサジェストから除外したり、ラベルをカスタマイズできます
- Experience Builderとの統合スタイルが含まれているため、XB環境でも使用できます
Technical Details
Admin Pages 1
/admin/config/tagify/settings
Tagifyモジュールのグローバル設定を行います。エンティティ参照フィールドのデフォルトウィジェットをTagifyに設定するオプションがあります。
Hooks 5
hook_tagify_autocomplete_match_alter
Tagifyオートコンプリートの各マッチ結果を個別に変更できるフック。ラベルの変更、情報ラベルのカスタマイズ、特定のマッチの除外などに使用します。
hook_tagify_autocomplete_matches_alter
【非推奨】Tagifyオートコンプリートのマッチ結果配列全体を変更できるフック。hook_tagify_autocomplete_match_alterを代わりに使用してください。
hook_library_info_alter
Tagifyモジュールが使用するフック。ローカルにTagifyライブラリがインストールされている場合、CDNの代わりにローカルファイルを使用するように切り替えます。
hook_options_list_alter
Tagifyウィジェットでタクソノミータームの階層構造を示すダッシュを削除するために使用されます。
hook_field_info_alter
Tagifyをエンティティ参照フィールドのデフォルトウィジェットに設定する際に使用されます（設定が有効な場合）。
Troubleshooting 6
デフォルトではCDNからライブラリが読み込まれます。ファイアウォールやCSPでCDNがブロックされている場合は、ライブラリをローカルにインストールしてください。libraries/tagify/dist/にtagify.jsとtagify.cssを配置すると自動的にローカルファイルが使用されます。
ブラウザのデベロッパーツールでネットワークタブを確認し、/tagify_autocompleteエンドポイントへのリクエストが正常に返っているか確認してください。エンティティ参照フィールドのターゲットバンドル設定が正しいか、選択ハンドラの設定を確認してください。
フィールド設定で「参照されたエンティティが存在しない場合は作成する」オプションが有効になっているか確認してください。また、自動作成対象のバンドルが正しく設定されているか確認してください。
Tagifyモジュールは自動的に階層構造を示すダッシュを削除します。削除されない場合は、モジュールのキャッシュをクリアしてください。
Tagifyモジュールは自動的にGinテーマを検出して専用スタイルを適用します。問題がある場合はCSSキャッシュをクリアし、カスタムテーマがGinを正しく継承しているか確認してください。
マッチング方法を「Contains（部分一致）」から「Starts with（前方一致）」に変更してください。また、結果数の上限を適切に設定してください。数千件以上のエンティティがある場合、部分一致検索は負荷が高くなります。
Security Notes 3
- オートコンプリートエンドポイント(/tagify_autocomplete)はすべてのユーザーがアクセス可能ですが、エンティティ参照選択ハンドラのアクセスチェックが適用されます
- infoラベルに表示されるHTMLはXssフィルターで処理され、許可されたタグ（img、svg等）のみが表示されます
- ユーザー入力値はJSON形式でパースされ、エンティティストレージを通じてバリデーションされます