\ プロフィール更新しました /

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

【baserCMS】キャッシュを有効にし「css・js」の変更をすぐに反映させる方法Blog
この記事は約4分で読めます。

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

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

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

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

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

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

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

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

理由は2つ

  • baserCMSの機能でサーバー内でキャッシュされている
  • ブラウザの機能でキャッシュデータが反映している

まず「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で「CSS・js」ファイル更新時に自動でクエリを追加

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"/>
この記事を書いた人
ぱのん

複数の会社を経営しています。
だけど、すべての労働所得を合わせても同年代のサラリーマン以下の年収です(笑)
株式投資や不動産投資を行い資産形成に力を入れつつ、一方で文章力強化のためにライティングの修行を行っています。
このような私の経験を元に、見て頂いてる方に役立つ情報を提供できれば良いなと思っています。

PANONをフォローする
Blog
PANONをフォローする
PANONBOX-ぱのんボックス-

コメント