Concrete5.6 で新バージョンの jQuery を使う方法

この投稿を書いている時点では、日本語で 5.7 を使って制作するのも実用的になっているらしいのですが、5.6 からのアップグレードが簡単ではないため、過去に 5.6 で制作したサイトをアップグレードせずにリニューアルをするケースもまだまだあると思います。

Concrete5.6 での制作で問題になるのが、jQuery のバージョン問題です。
5.6 では、システムで jQuery 1.7 が読み込まれており、フロントエンドでも管理画面でも使用されています。
しかし、最近流行のものを取り入れようとすると、もっと新しいバージョンの jQuery を要求されることが多くなります。
例えば、Bootstrap3 を使うなら、jQuery 1.9 以上が無いとナビゲーションバーが動作しません。

だからといって、テーマの header.php で jQuery を読み込ませてしまうと、違うバージョンの jQuery が複数読み込まれることになり、あちこちで不具合が発生します。

Concrete5 で jQuery を差し替えるのはとても簡単・・・なのですが

実は、Concrete5 で jQuery を差し替えるのは、非常に簡単です。
Concrete5 をインストールしたディレクトリを見ると、ルートディレクトリ以下の構成と、concreteディレクトリ以下の構成がそっくりなのに気付きます。

concreteディレクトリ以下は「コア領域」と呼ばれ Concrete5 のプログラム本体があります。
ルートディレクトリ以下の concreteディレクトリと同じ構成のディレクトリは「ユーザー領域」と呼ばれますが、インストール直後はほとんど空です。
ここで、ユーザー領域に、コア領域にあるファイルと同名のファイルを置くと、ユーザー領域のファイルが優先して読み込まれます。
これが「オーバーライド」という仕組みです。

concrete5 のシステムで使用されている jQuery は、concrete/jsディレクトリにある、jQuery.js です。
（このファイルを開くと、jQuery 1.7 をリネームしたものであることがわかります）

ここで、ルート直下の jsディレクトリに、jQuery1.9 を jQuery.js にリネームして保存してやると、それだけで、concrete5 は、標準のものではなく jsディレクトリの jQuery.js を読み込み、jQuery 1.9 で動作します。

しかしながら、この方法で jQuery を差し替えると、非常に大きな問題が生じます。
管理画面のあちこちの動作がおかしくなるのです。
致命的なのは、ページ編集の際、ブロックが編集できなくなることです。

編集時だけ、違う jQuery を読み込ませるには？

WordPress にも似たような問題があり、テーマの functions.php に「管理画面以外の時は、標準の jQuery を読み込まずに任意の jQuery を読み込むコード」を追記することで、解決することができます。
しかし Concrete5 では、テーマに functions.php のようなファイルはありません。

Concrete5 では、jQuery を読み込んでいる「コア領域」のファイルをオーバーライドしてやります。

システムで jQuery を読み込んでいるのは、concrete/elements/header_required.php です。
このファイルを、ユーザー領域の elements/header_required.php に複製して、下記のように書き換えます。

（元のコード 96行付近）

$this->addHeaderItem($html->javascript('jquery.js'), 'CORE');

これを下記に置き換えます。

if ($cp->canViewToolbar()) {
     $this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
} else {
     ?><script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script><?php
}

（コードの途中を抜き出したので、<?php ・・・ ?> が変なところに入っています。ご了承ください）

canViewToolbar() は、上部にツールバーが見えていれば true になります。
（isEditMode() でも良さそうに思えますが、編集ボタンが押せなくなる可能性があるそうです）
srcの部分は、読み込ませたいバージョンの jQueryのファイルを指定してやります。
例では、jquery-1.11.3.min.js を jsディレクトリに保存し、それを読み込ませるようにしています。

困ったら、Concrete5 Japan のフォーラムを活用してみましょう

今回の件は、Concrete5 Japan のフォーラムに投稿したところ、すぐに解決することができました。

5.6で、編集時以外だけ jQueryをオーバーライドできますか？

コードまで示していただいた katz515さん、ありがとうございました。

ちなみに、5.7 では、基本的な考えは同じですが、やり方が少し変わっているようです。
こちらのページを参考にしてみてください。

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