Asset Injector

テーマを変更することなく、設定可能なルールに基づいてCSSやJavaScriptをページ出力に注入することを管理者に可能にします。

asset_injector

39,394 sites

106

drupal.org

gui api utility

css JavaScript asset management theming development Configuration code injection frontend conditions multisite

Drupal 9 Drupal 10 Drupal 11

インストール

Drupal 11, 10 v8.x-2.21

composer require 'drupal/asset_injector:8.x-2.21'

Drupal 9 v8.x-2.20

composer require 'drupal/asset_injector:8.x-2.20'

概要

Asset Injectorは、CSS InjectorとJS Injectorの機能を単一のモジュールに統合し、サイト管理者が本格的なテーマ開発に踏み込むことなく、DrupalサイトにカスタムCSSやJavaScriptスニペットを素早く簡単に追加する方法を提供します。

すべての設定はConfig Entityとしてデータベースに保存されるため、Features、Drush config export、またはYAMLファイルを使用したカスタムモジュールインストールを通じて完全にエクスポート可能です。このアーキテクチャは、各サイトがサイトごとの設定で管理するのが最も簡単な軽微な違いを持つ可能性があるマルチサイトインストールで特に有用です。

このモジュールはDrupalのCondition Plugin APIを活用し、柔軟でコンテキストを認識したアセット注入を提供します。アセットはURLパス、コンテンツタイプ、ユーザーロール、テーマ、言語、その他の登録されたCondition Pluginに基づいて条件付きで表示できます。モジュールは最適なパフォーマンスのためにCSS/JSの前処理と集約もサポートしています。

Features

メディアタイプ（all、print、screen）とCSS前処理/集約をサポートしたCSS注入
オプションのjQuery依存関係、ヘッダー/フッター読み込みオプション、JS前処理/集約を備えたJavaScript注入
DrupalのCondition Pluginシステム（パス、コンテンツタイプ、テーマ、言語、ユーザーロール）を使用した条件付きアセット表示
テーマごとのリージョンマッピングを備えたJavaScriptインジェクター用のnoscriptフォールバックサポート
CSSとJavaScriptのシンタックスハイライト機能を備えたACEコードエディター統合
Drush、Features、またはYAMLファイルによるエクスポート/インポートを可能にするConfig Entityベースのストレージ
WYSIWYGエディター内でスタイルを適用するためのCSSアセット用CKEditor統合
既存のインジェクターのバリエーションを素早く作成するためのアセット複製機能
アセットを削除せずに有効化/無効化できる機能
柔軟なルール組み合わせを可能にするAND/OR条件ロジック
アセットの作成、更新、削除時の自動キャッシュ無効化
ドメイン/言語固有のアセットバリエーションのためのDrupalのconfig overrideシステムのサポート

Use Cases

特定ページ向けの素早いCSS修正

テーマファイルを変更せずに特定ページ向けの的を絞ったCSS修正を追加。例えば、パス条件'/node/*/edit'を持つCSS Injectorを作成してノード編集ページでサイドバー要素をフロートさせる。

サードパーティトラッキングスクリプト

テーマテンプレートを変更せずに、特定のページやコンテンツタイプにサードパーティのトラッキングスクリプト（アナリティクス、マーケティングピクセル）を注入。条件を使用してスクリプトを本番環境や特定のセクションに制限。

A/Bテストスタイル

異なるスタイリングアプローチを持つ複数のCSS Injectorを作成し、有効化/無効化して視覚的な変更をデプロイなしで素早くテスト。複製機能を使用してバリエーションを作成。

マルチサイトカスタマイズ

マルチサイト構成で、共通のコードベースとテーマを共有しながら、Asset Injectorを使用してサイト固有のCSS/JS調整をサイトごとに管理。

カスタムモジュールなしのJavaScript機能強化

カスタムモジュールを作成せずに小さなJavaScript機能強化（スクロール動作、フォームバリデーション、UI調整）を追加。素早い機能追加が必要なサイトビルダーに便利。

印刷用スタイルシート

メディアタイプセレクターを使用して印刷専用CSSを追加し、特定のコンテンツタイプやセクションのページ印刷を最適化。

ロールベースのスタイリング

ユーザーロール条件を使用して、認証済みユーザー、管理者、または特定のロールに異なるスタイリングを適用。

言語固有の調整

多言語サイトで、言語固有のCSSまたはJavaScriptを注入してRTLレイアウト、フォント調整、ロケール固有の動作を処理。

テーマ固有のオーバーライド

特定のテーマがアクティブな場合にのみCSS/JSを適用。サブテーマを作成せずにcontribテーマを調整するのに便利。

noscriptフォールバックコンテンツ

JavaScriptが無効なユーザー向けに代替コンテンツを提供（動的要素の静的バージョンや情報メッセージなど）。

Tips

CSS/JSコードの反復作業時に「保存して編集を続ける」ボタンを使用すると、編集フォームに繰り返し戻る手間を省けます。
複製機能を活用して、既存のインジェクターを少し変更したバリエーションを作成できます。
「すべての条件を要求」設定を戦略的に使用してください - チェックを外すとORロジックが可能になり、複雑なターゲティングシナリオを簡素化できます。
パフォーマンスのため、デバッグ目的で特定のアセットを個別に読み込む必要がない限り、「前処理」を有効にしておいてください。
ページ読み込みパフォーマンスを向上させるため、ヘッダーではなくフッター（デフォルト）でJavaScriptを読み込んでください。
Drush（drush config:export）経由でインジェクター設定をエクスポートし、バージョン管理で変更を追跡してください。
/admin/*のようなパスワイルドカードを使用して、サイトのセクション全体をターゲットにできます。
デバッグ時は、特定のインジェクターの問題を切り分けるため、他のCSS/JS集約を一時的に無効にしてください。

Related Projects

CKEditor

CSS Injectorアセットは自動的にCKEditorインスタンスに追加され、注入されたCSSがWYSIWYGエディター内のコンテンツにスタイルを適用できます。

Features

Asset Injector設定はConfig Entityとして保存されているため、Featuresモジュール経由でエクスポートできます。

Config Management

Drupalの設定管理システムを完全サポートし、drush config:export/importによるインジェクター設定のエクスポート/インポートが可能です。

Technical Details

Asset Injector /admin/config/development/asset-injector

CSS InjectorとJS Injector管理ページへのリンクを提供するAsset Injectorモジュールのメインランディングページ。

CSS Injector /admin/config/development/asset-injector/css

すべてのCSS Injector設定を条件とステータスとともに一覧表示します。各CSS Injectorの編集、削除、有効化、無効化、複製の操作を提供します。

CSS Injectorを追加 /admin/config/development/asset-injector/css/add

コード、条件、詳細オプションを含む新しいCSS Injector設定を作成するフォーム。

CSS Injectorを編集 /admin/config/development/asset-injector/css/{asset_injector_css}

既存のCSS Injector設定を編集するフォーム。追加フォームと同じフィールドですが、マシン名は無効化されています。

JS Injector /admin/config/development/asset-injector/js

すべてのJavaScript Injector設定を条件とステータスとともに一覧表示します。各JS Injectorの編集、削除、有効化、無効化、複製の操作を提供します。

JS Injectorを追加 /admin/config/development/asset-injector/js/add

コード、条件、noscriptフォールバック、詳細オプションを含む新しいJavaScript Injector設定を作成するフォーム。

JS Injectorを編集 /admin/config/development/asset-injector/js/{asset_injector_js}

既存のJS Injector設定を編集するフォーム。追加フォームと同じフィールドですが、マシン名は無効化されています。

CSS Assetsの管理

希望するページにCSSを追加します。この権限はアクセスが制限されており、信頼されたロールにのみ付与する必要があります。

JS Assetsの管理

希望するページにJSを追加します。この権限はアクセスが制限されており、任意のJavaScriptの実行を許可するため、高度に信頼されたロールにのみ付与する必要があります。

hook_asset_injector_library_info_build_alter

他のモジュールがAsset Injectorによって生成された動的ライブラリ配列を、Drupalに含めるために返される前に変更することを可能にします。

アセットがページに表示されない

インジェクターが有効（ステータス: 有効）であることを確認し、条件が正しく設定されていることを確認して、すべてのキャッシュをクリアしてください。また、ユーザーがコンテンツを表示する適切な権限を持っていることも確認してください。

インストールまたはキャッシュクリア中のファイル権限エラー

public://asset_injectorディレクトリが存在し、Webサーバーから書き込み可能であることを確認してください。管理 > レポート > ステータスレポートでファイルシステム権限を確認してください。

CSSがCKEditorに表示されない

CKEditor統合にはCSS Injectorが有効で、読み込みを妨げる条件がないことが必要です。インジェクターのステータスと条件を確認してください。

インジェクター有効化後のJavaScriptエラー

ブラウザコンソールでJavaScriptエラーを確認してください。コードに<script>ラッパータグが含まれていないことを確認してください。コードがjQueryを必要とする場合は、「jQueryが必要」チェックボックスを有効にしてください。

保存後に変更が表示されない

Asset Injectorは保存時に自動的にキャッシュを無効化しますが、外部キャッシュ（Varnish、CDN）を使用している場合は、手動でそれらのキャッシュをパージする必要があるかもしれません。

テーマ条件で複数テーマに関する警告が表示される

Drupal 9.5+でテーマ条件が単一テーマのみをサポートするように変更されました。テーマ条件設定を確認し、アセットごとに1つのテーマのみを選択してください。

「JS Assetsの管理」権限は任意のJavaScriptの注入を許可するため、XSS攻撃に使用される可能性があり、高度に信頼された管理者にのみ付与すべきです。
「CSS Assetsの管理」権限は危険性は低いですが、ページの外観を悪意を持って変更したり、CSSベースの攻撃を注入するために使用される可能性があります。
両方の権限には'restrict access: true'が設定されており、慎重に管理する必要があることを示しています。
アセットコードはサニタイズされません - 管理者は注入されたコードが安全であることを確認する責任があります。
注入されたスクリプト攻撃に対する追加保護を提供するため、Content Security Policy (CSP)ヘッダーの使用を検討してください。
特に複数の管理者がいるサイトでは、すべてのインジェクター設定を定期的に確認してください。
生成されたアセットファイルは公開アクセス可能なディレクトリに保存されます - 注入されたコードに機密情報を含めないでください。