CSSやJavaScriptをカスタムテンプレートから自動で読み込む

既存のブロックタイプの標準のビューテンプレートを、カスタムビューテンプレートを作成して置き換える方法をご紹介してきました。それでは、既存のビューテンプレートでは使われていないCSSやJavaScriptファイルをカスタムビューテンプレートに追加するにはどうすればよいでしょうか。カスタムテンプレートをテーマから分離したい場合、おそらくカスタムテンプレート用のCSSやJavaScriptをカスタムテンプレートに含める必要があるかと思います。

カスタムビューテンプレートシステムには、これをかんたんに実現する手段が用意されています。前のサンプルでは、カスタムテンプレートはこのような位置にありました。

application/blocks/autonav/templates/site_map_tree.php

このカスタムテンプレートをページに配置した時に、CSSやJavaScriptをヘッダーやフッターに自動的に読み込ませたい場合は、次のように変更します。

mkdir application/blocks/autonav/templates/site_map_tree
mv application/blocks/autonav/templates/site_map_tree.php application/blocks/autonav/templates/site_map_tree/view.php
touch application/blocks/autonav/templates/site_map_tree/view.js
touch application/blocks/autonav/templates/site_map_tree/view.css

まずカスタムテンプレートを一つのPHPファイルで作るのではなく、カスタムテンプレート用のディレクトリを作成しましょう。このディレクトリはview.phpファイルと、オプションでview.cssまたはview.jsファイルを含めることができます。これらのファイルは自動的にヘッダーやフッターに挿入され、管理画面からアセットキャッシュが有効になっている場合は、結合・圧縮も自動で行われます。これらのファイルには自由にJavaScriptやCSSを記載できます。

また、もしJavaScriptやCSSのファイル名を自由に決めたい場合は、カスタムテンプレートディレクトリに css または js という名前のディレクトリを作成してください。js/ ディレクトリ内のすべての *.js ファイルと css/ ディレクトリ内のすべての *.css ファイルは、そのファイル名に関わらず、ページが表示される際に自動的に読み込まれます。注意：もし画像スライダー用のライブラリやギャラリーのプラグインなどの、サイト内で共通で使用する可能性のあるJavaScriptライブラリは、ページに同じJavaScriptファイルを複数読み込むとコンフリクトを起こす可能性がありますので、concrete5のアセットシステムにライブラリを登録して使用するほうが良いでしょう。

view.js や view.css の読み込みをテーマレベルで無効にする

ブロックのビューやカスタムテンプレートは、自動的に view.js や view.css ファイルを読み込みますが、テーマ内の CSS や JavaScript でブロックの表示や動きを指定したい場合に、これらのデフォルトの CSS や JavaScript ファイルを読み込ませたくない場合がありますが、ページテーマクラスファイルの providesAsset() メソッドで読み込みさせないようにすることが可能です。

例えば、5.7 に付属している Elemental テーマは、concrete5 の多くのコアブロックの表示に対応した CSS を含んでいるため、ブロックのほうの view.js や view.css ファイルを読み込ませないようになっています。Elemental テーマのページテーマコントローラーで、これらのファイルの読み込みを制限しています。このコードスニペットは、Elemental テーマが registerAssets メソッドを使って特定のファイルの読み込みを制限している例です。

public function registerAssets() {
    $this->providesAsset('css', 'blocks/form');
    $this->providesAsset('css', 'blocks/social_links');
    $this->providesAsset('css', 'blocks/feature');
    $this->providesAsset('css', 'blocks/feature/templates/hover_description');
}

これらのコードによって、次のファイルは読み込まれなくなります。

  • concrete/blocks/form/view.css
  • concrete/blocks/social_links/view.css
  • concrete/blocks/feature/view.css
  • concrete/blocks/feature/templates/hover_description/view.css

逆に、これらのアセットをコードから登録する必要はありません。ブロックやカスタムテンプレートに view.js や view.css ファイルが含まれていれば、自動的に登録されます。

原文：Automatically including CSS and JavaScript in Custom Templates