コアのJavascriptやCSSをテーマから上書きする

前のページで、テーマからコアのアセットを呼び出す方法を学びました。それでは、それらを上書きするにはどうしたらいいのでしょうか。それには、いくつかの方法がありますが、基本的にconcrete5に慣れた開発者のみ使用するようにしてください。concrete5のコアのライブラリーは理由があって呼び出されています。これらを違うバージョンに差し替えたりすることは、予期せぬ結果を引き起こすことがあります。

コアのJavascriptとCSSライブラリを上書きする

applicationディレクトリからのオーバーライド

concrete5はルートディレクトリでCSSとJavascriptをオーバーライドする方法を長く提供してきました。バージョン5.7から、この機能は application ディレクトリに移りましたが、基本的には同じ機能です。

  1. オーバーライドしたいファイルの位置を確認してください（例：concrete/js/jquery.js）。
  2. ［管理画面 > システムと設定 > 最適化 > キャッシュとスピード設定］からオーバーライドキャッシュをオフにしてください。
  3. 新しい jquery.js を application/js/jquery.js に設置してください。

これで新しいjquery.jsが使われるようになりました。

アセットシステムからのオーバーライド

パッケージを作成している場合は、applicationディレクトリを使う方法は使えません。幸い、アセットシステムはこのようなアセットの再アサインをサポートしています（繰り返しになりますが—この作業は注意して行なってください）。パッケージコントローラーから、シンプルに on_start() メソッドを使用して、コアアセットを再アサインすることができます。

public function on_start()
{
    $al = \AssetList::getInstance();
   $al->register('javascript', 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.0/jquery.min.js', array('local' => false, 'version' => '2.0'));
}

コアブロックのJavascriptとCSSライブラリを上書きする

コアブロックはブロックディレクトリ内にアセットを持っています（view.js や view.css など）。これらを application ディレクトリでオーバーライドすることもかんたんにできます。

  1. オーバーライドしたいファイルの位置を確認します（例：concrete/blocks/date_navigation/view.css）。
    1. ［管理画面 > システムと設定 > 最適化 > キャッシュとスピード設定］からオーバーライドキャッシュをオフにしてください。
  3. 新しい view.css を application/blocks/date_navigation/view.css に設置します。

テーマが提供するアセットを登録する

コアライブラリー

JavascriptやCSSをオーバーライドする必要はないが、テーマが特定のCSSやJavascriptをすでに読み込んでいるので、concrete5に、それらを読み込む必要はないということを伝えたい場合はどうすればよいでしょうか。これは、requireAssetを使用する方法とは異なり、テーマのHTMLタグでこれらのCSSやJavascriptを読み込む場合の手法です。例えば、テーマがBootstrapフレームワークでできていた場合、concrete5もBootstrapを使用していますので、concrete5自身がすでにbootstrap関係のアセットを複数登録しています。

Bootstrap JavaScript

  • bootstrap/dropdown
  • bootstrap/tooltip
  • bootstrap/popover
  • bootstrap/alert
  • bootstrap/button
  • bootstrap/transition

Bootstrap CSS

  • bootstrap/dropdown
  • bootstrap/tooltip
  • bootstrap/popover
  • bootstrap/alert
  • bootstrap/button
  • bootstrap/transition
  • bootstrap (this is generic bootstrap – the entire CSS library)

テーマがBootstrapでできていた場合、テーマで読み込んでいる bootstrap.min.js と bootstrap.css ファイルは、これらのJavascriptやCSSを含んでいるわけです。そのため、concrete5にこれらのbootstrapのアセットは読み込む必要がない—ということを伝える必要があるわけです。そのためこれらのアセットがテーマによって提供されているということをconcrete5に指示します。

これは PageTheme クラスのなかで指定することができます。Theme::requireAssetを使う代わりに、Theme::providesAssetを使用します。下記がbootstrapがテーマによって提供されていることをregisterAssetsメソッドで指定した例です。

public function registerAssets()
{
 $this->requireAsset('css', 'font-awesome');
 $this->requireAsset('javascript', 'jquery');
 $this->providesAsset('javascript', 'bootstrap/*');
 $this->providesAsset('css', 'bootstrap/*');
}

すべてのアセットハンドルを列挙する必要はありません。providesAssetではワイルドカードが使用できます。

やるべきことは以上です。これでconcrete5から、テーマがBootstrapのCSSやJavascriptを提供していることを知りましたので、concrete5自身が持っているBootstrapのCSSやJavascriptを読み込まなくなります。

ブロックアセット

concrete5では、特定のブロックアセットがテーマによって提供されていることを指定することもできます。この方法の事例は、concrete5に同梱されているElementalテーマで確認することができます。例えば、画像スライダーブロックはそれ自身のview.cssファイルとview.jsファイルを持っています。これらのアセットはページのヘッダーとフッターで自動的に読み込まれます。

多くのブロックはこのように独自のアセットを提供しています。しかし、Elementalテーマでも、これらのブロックのためのCSSを提供しています。例えば、concrete5のフォームブロックはBootstrap 3のフォームのスタイリングに準拠してマークアップされています。ElementalテーマもBootstrap 3が使われていますので、フォームブロックのview.cssを読み込む必要はないわけです。トピックリストと日付ナビゲーションブロックも、ElementalテーマのCSSでスタイルが定義されていますので、やはりそれらのview.cssを読み込む必要がありません。カスタムテンプレートについてはどうでしょうか？特色ブロックの "Hover Description" カスタムテンプレートも、ElementalテーマのCSSを使うことができますので、view.jsは必要ですが、view.cssは不要です。

幸い、アセットシステムとprovidesAssetはこれらのケースに対応できます。特定のコアブロックのアセットがテーマから提供済みであることを締めるには、次のように記述します。

$this->providesAsset('css', 'blocks/form');

上記のブロックすべてについて、テーマからアセットが提供済みであることの記述を追加した結果、registerAssetsメソッドは下記のようになりました。

public function registerAssets()
{
    $this->requireAsset('css', 'font-awesome');
    $this->requireAsset('javascript', 'jquery');
    $this->providesAsset('javascript', 'bootstrap/*');
    $this->providesAsset('css', 'bootstrap/*');
    $this->providesAsset('css', 'blocks/form');
    $this->providesAsset('css', 'blocks/date_navigation');
    $this->providesAsset('css', 'blocks/topic_list');
    $this->providesAsset('css', 'blocks/feature/templates/hover_description');
}

その他のコアCSS

中には、複数のブロックでインクルードされているCSSファイルがあります。例えば、concrete5のページ付けナビゲーションやエラーコードの出力です。これらのアセットはコアコードで次のように呼び出されています。

$this->requireAsset('css', 'core/frontend/errors');

このアセットは concrete/css/frontend/errors.css と対応していて、エラーの表現のためのスタイリングを提供しています。しかし、このエラー表示もまたBootstrap 3のエラー表示を使用していますので、Bootstrap 3を使用しているテーマではCSSでこの表示もサポートされているわけです。そのため、このアセットも同様にテーマから提供済みであることを指示することができます。ほかの例と同様に、providesAssetの行を追加するだけです。

$this->providesAsset('css', 'core/frontend/errors');

フロントエンドのCSSファイルはすべてBootstrap 3のマークアップに従っていますので、Bootstrap 3を使っているテーマであれば、それらすべてをサポートしていることになります。ですから、次のようにすべてテーマから提供済みであることを指示してしまって構いません。

$this->providesAsset('css', 'core/frontend/*');

アセットについて

アセットシステムについては、ここで説明しきれているわけではありませんが、concrete5 5.7でCSSやJavascriptがどのように管理されているかの理解や、テーマを柔軟に、また軽量にするための手助けにはなると思います。

原文：Overriding or Providing Core JavaScript or CSS in a Theme