【baserCMS】キャッシュを有効にし「css・js」の変更をすぐに反映させる方法

こんにちは、ぱのん(@panonbox)です。

Webサイトの管理をしてるとcssやjsファイルを変更を行うことがありますよね？

そんなとき、サーバーやブラウザのキャッシュが影響して、スタイルシートが正しく反映されないなんて事は良くありますよね？

【baserCMS】を使っている方に、キャッシュを有効にしたまま「css・js」ファイルを変更した時はすぐに反映させる方法をご紹介します。

CSSやjavaScriptの更新が反映しない理由

Webサイトを制作していると「CSSやjavaScript」を微調整することはよくありますよね

そんな時、CSSファイルを変更しているのに、ブラウザに反映されないことがあります。

理由は２つ

まず「baserCMSの機能でサーバー内でキャッシュ」については、更新を行ったタイミングでキャッシュを削除すれば解決します。

次にブラウザのキャッシュですが、管理者（ファイルを更新した人）であれば、ブラウザの「スーパーリロード」する事で、更新を反映させデザインの調整は出来ますが、新しいファイルをリリースしても訪問者には古いキャッシュが反映され以前のレイアウトが表示される場合があります。

また、iPhoneのSafariには「スーパーリロード」の機能が無いため、変更内容を確認するためには一度キャッシュを削除するしか方法がありません。

ですので、次でその対策方法を紹介します。

cssのファイル名にクエリというパラメーターを設定することが出来ます。

”ファイル名　◯◯◯.css?abc=12345678”

このようなソースを見たことは無いでしょうか？
この『?』の後ろに続く『abc=12345678』がクエリのパラメーターです。

実はcssやJavaScriptのリンクに、クエリを記述してもプログラム的には何も変化がなく意味が無いものですが、ブラウザのキャッシュはクエリに変更があれば別のファイルと判断して、新しくファイルを読込みそれを反映させます。

この機能を利用し、クエリを変更すれば意図的に新しいファイルを読み込ませる事ができます。

例えば

<link rel="stylesheet" type="text/css" href="/css/style.css?2019070100"/>

このように「？」の後ろに更新した日付などを書き込めば、新しいファイルとして読み込まれる様になります。

「cssやJavaScript」ファイルを更新した時は、クエリを書き換えることによって、ブラウザに新しいファイルを反映させる事が可能です。

baserCMSでは「CSS・js」のファイル更新時に自動でクエリを追加することが、簡単にできます。

そもそも「baserCMS」は「CakePHP」を元に作られているCMSです。なので「CakePHP」の機能を使うことができます。さらに、自動でクエリを追加できるシステムがあるので、そのまま使うことが可能です。

CakePHPの「Asset.timestamp」という機能ですが、実はこの機能「baserCMS」ではデフォルトでコメントアウトされています。なので、この機能を有効にするだけで自動的にクエリパラメータを追加してくれるようになります。

app > Config > core.php

「core.php」ファイルの265行目あたりに

//Configure::write('Asset.timestamp', true);

とコメントアウトされたプログラムがあると思います。

このコメントアウトを削除して有効にしてあげると機能するようになります。但し第二引数が「true」では「debug」レベルが0より大きい場合にしか機能しないので「force」を設定するようにしましょう。

そうする事により常に機能が有効になり、ヘルパーで作成された「cssやjs」の読み込み時に自動的に最終更新日をクエリとして追加してくれるようになります。

Configure::write('Asset.timestamp', 'force');

ファイルを更新すればこのようにクエリを追加してhtmlファイルを出力してくれますね。

<link rel="stylesheet" type="text/css" href="/css/style.css?1557377764"/>