エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


CakePHP4のCSS、JavaScript、画像のブラウザへのキャッシュをコントロールする

      2022/02/26

CakePHP4、CakePHP3のCSS、JavaScript、画像のブラウザへのキャッシュの設定方法

 

ブラウザが CSS、JavaScript、画像をキャッシュする仕組み

 
ブラウザは、表示している Webサイトで使われている CSSや JavaScript、画像をキャッシュして Webサイトの表示を高速化しようとします。
 
そのため、場合によってはサーバの CSSや JavaScript、画像が更新されていてもブラウザがキャッシュしている情報が使用されて、Webサイトが正しく表示、処理されない場合があります。
 
そんな時は、キャッシュをクリアして強制リロードするために「Ctrl+F5」などをするわけですが、Webサイトを利用しているすべてのユーザがキャッシュに対する理解があるわけではないため、CSSや JavaScript、画像が更新されたら、ブラウザのキャッシュも更新してほしいと思うでしょう。
 
 

CakePHP4にはブラウザのキャッシュを更新する仕組みが実装されている

 
そんなキャッシュを更新する機能が CakePHP4には実装されているのですが、デフォルトでは使用しない設定になっています。
ですが、個人的にはほとんどの場合は常に更新する設定にしておく方がいいだろうと思います。
 
 
ちなみに、記事では「CakePHP4」と記載していますが、「CakePHP3」でも全く同じ機能が実装されています。
「CakePHP4」のところを「CakePHP3」と読み替えても問題ありません。デフォルトの設定も同じです。
 
 

CakePHP4のブラウザのキャッシュを指定する設定方法

 

/config/app.php を編集

 
/config/app.php
の 90行目前後を、下記の通り「'timestamp' => 'force',」とします。
 

 
 

表示される HTML

 
この設定をすることで、例えば cssのリンク情報が下記のように変更されます。
 

 
 
「login.css」に続く「1645536142」は、「login.css」のファイルの更新日時(タイムスタンプ)の UnixTimeです。
 
ブラウザは「/css/login.css?1645536142」全体がファイル名として認識します。
「login.css」ファイルを更新すると「1645536142」の部分が変更されるため、ブラウザは「login.css?1645536142」ではなくなったと認識して再読み込みを実行する、という仕組みになっています。
 
 
この設定をしておかないと、「login.css」を変更してもブラウザが「login.css」を再読み込みしてくれるかどうかはブラウザ次第になってしまうため、サイトの運営者が望む状況になっていない場合も発生するわけです。
 
 

CakePHP4 の asset の設定による動作

 
というわけで、ほとんどの場合は「'timestamp' => 'force',」としておくべきだと思います。
 
'timestamp' => 'force',」としても、ページを表示するたびに毎回 CSSや JavaScript、画像を再読み込みするようになるわけではありません。ファイルが更新された日時を表示するため、更新日時が変わらない限り再読み込みはされません。その点は安心です。
ですが、ページを表示する際に、CSSや JavaScript、画像の更新日時を取得して、それを付与して HTMLを生成する、という処理になりますので、その処理の分だけ若干処理が増えてはいます。
 
 

CakePHP4で /config/app.phpの assetの設定の詳細

 
CSSや JavaScript、画像のキャッシュをする、しないの設定は下記の 3つあります。
 

 
 
「false」はデフォルトの設定です。
「timestamp」を指定しないときは「false」が設定されているものとして、下記のように何も付与しない状態で cssが読み込まれます。
 

 
 
「true」と「'force'」の場合は、下記のように読み込むファイル名に加えて、ファイルの更新日時の UnixTimeが編集されます。
 

 
 
「true」と「'force'」の違いは、「true」は「debug」モードが「true」の場合のみ付与します。
'force'」の場合は「debug」モードに関係なく常に付与します。
 
'force'」を指定するときの注意点としては、「force」は文字列ですので「'(シングルクォート)」「"(ダブルクォート)」のどちらかで囲む必要があります。(「true」「false」は「Boolean」ですので「'」などで囲む必要はありません。)
 
ちなみに、「force」を「'」などで囲まなくても「Notice」は出力されますが、タイムスタンプを編集する処理は正しく動作はします。
 
 
「debug」モードは、開発環境では「true」にして、本番環境では「false」にしていることが多いと思いますので、「'timestamp' => true,」は(変更する頻度が高い)開発環境では付与する、と言い換えてもいいでしょう。
 
 
でも、本番環境こそ Webサイトを使うユーザの行動を規定できないわけですので、サーバ側で強制的にキャッシュを書き換えるような設定にしておくべきだと思います。
 
 
CakePHP4 Cookbook 構成設定
https://book.cakephp.org/4/ja/development/configuration.html#general-configuration
 
CakePHP3 Cookbook 構成設定
https://book.cakephp.org/3/ja/development/configuration.html#id4
 
 

CakePHP4でキャッシュする時間を設定

 

キャッシュする時間「max-age」「Expire」を設定する方法

 
前項で紹介した「timestamp」では、ファイルの更新日時の UnixTimeを付与するか、しないかの設定でしたが、ブラウザにキャッシュする時間を設定する「cacheTime」を設定することもできます。
 

 
 
上記のように「cacheTime」をキーとしてキャッシュする時間を設定します。
デフォルトでは「+1 day(1日)」が設定されています。
 
上記の例では「+1 year」が設定されていますので、「1年」ということになります。
 
設定は、下記の PHPの strtotime関数の書式で設定します。
https://www.php.net/manual/ja/function.strtotime.php
 
 
また、HTTP ヘッダー Cache-Control の max-age と HTTP ヘッダーの Expire について確認したい場合は下記のページなどが参考になるかと思います。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Expires

 - CakePHP 3.x 4.x ,

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

Google Analytics APIを CakePHP3で動かしてレポートデータを取得する方法の解説
Google Analytics APIを CakePHP3で動かしてレポートデータを取得する方法の解説

CakePHP3で Google Analytics APIからレポートデータを取得する処理の解説。PHPのサンプルソースをCakePHP3で動くように改造。加えて、ディメンションやメトリックスを条件に設定する方法なども。

CakePHP3で画像・ファイルのアップロード処理を自作・解説付き・その2
CakePHP3で画像・ファイルのアップロード処理を自作・解説付き・その2

ファイルのアップロード機能の自作サンプルコードとその解説のその2。アップロード機能に関連するファイルの更新や削除の処理や画像、フォルダのパスの指定方法などを含めて解説。

CakePHP3のfriendsofcake/searchでブックマークチュートリアルのタグ検索を実装
CakePHP3のfriendsofcake/searchでブックマークチュートリアルのタグ検索を実装

CakePHP3のCookbookにあるブックマークチュートリアル。ここで紹介されているタグで検索する処理を検索プラグイン「friendsofcake/search」で実現する方法を解説しました。

CakePHP4で定数の設定と呼び出し方法の解説(defineとConfigure)
CakePHP4で定数の設定と呼び出し方法の解説(defineとConfigure)

CakePHP4で定数を設定、使用する方法を解説。定数定義はdefineとConfigureを使用する方法を解説。また、bootstrap.phpに直接記述する方法と別のファイルにする方法を解説。

CakePHP3のHtmlHelperのLink設定のまとめ。mailto、URL、Root/Homeのリンクなども
CakePHP3のHtmlHelperのLink設定のまとめ。mailto、URL、Root/Homeのリンクなども

CakePHP3でHtmlHelperを使ってリンクの設定をする方法のまとめ。基本形からURLを指定、class、id、targetを指定、mailtoのリンク、画像をアンカーに、JavaScriptのダイアログなどの解説。

CakePHP 2.3でファイルをアップロード・その2 ファイル名を乱数で設定

CakePHPのアップロードするファイル名を乱数で変更しセキュリティを高める方法を解説。

CakePHP3でレコードを追加、更新(Insert、Update)する複数の方法を紹介
CakePHP3でレコードを保存(追加、更新、Insert、Update)する複数の方法を紹介

CakePHP3でレコードを追加、更新(Insert、Update)する記述方法を解説。1件ずつ処理、全件をまとめて処理、条件に該当する複数件のレコードを処理方法をサンプルコードを用いて解説。

CakePHP3でassociatedを使って関連データをまとめて保存する方法(hasOne、hasMany、belongsTo)

CakePHP3で関連データをまとめて保存する方法。hasOne、hasMany、belongsTo等の関連データはassociatedを追加することでまとめて保存することができます。

CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングする方法
CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングする方法

CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングをする方法を解説。インストール方法、読み込み方法。および、具体的なスクレイピングを実行するサンプルソースも。

CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説

CakePHP3でOGPを設定する方法を解説。fetch、assignを使用しレイアウトファイルに編集した変数にテンプレートファイルから値を指定する。これを利用してOGPを編集する。