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

2022/02/23 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',」とします。
　

    // デフォルトの設定
    'Asset' => [
        //'timestamp' => true,
        // 'cacheTime' => '+1 year'
    ],

    // 強制的にリロードする設定
    'Asset' => [
        'timestamp' => 'force',
        //'timestamp' => true,
        // 'cacheTime' => '+1 year'
    ],

// デフォルトの設定

'Asset' => [

//'timestamp' => true,

// 'cacheTime' => '+1 year'

// 強制的にリロードする設定

'Asset' => [

'timestamp' => 'force',

//'timestamp' => true,

// 'cacheTime' => '+1 year'

表示される HTML

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

 <!-- デフォルトの表示 -->
 <link rel="stylesheet" href="/css/login.css"/>

 <!-- 強制的にリロードする際の表示 -->
 <link rel="stylesheet" href="/css/login.css?1645536142"/>

　
　
「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つあります。
　

    // デフォルトの設定
    'Asset' => [
        'timestamp' => 'force',
        //'timestamp' => true,
        //'timestamp' => false,
    ],

// デフォルトの設定

'Asset' => [

'timestamp' => 'force',

//'timestamp' => true,

//'timestamp' => false,

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

 <!-- デフォルトの表示 -->
 <link rel="stylesheet" href="/css/login.css"/>

1 2	<!-- デフォルトの表示 --> <link rel="stylesheet" href="/css/login.css"/>

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

 <!-- 強制的にリロードする際の表示 -->
 <link rel="stylesheet" href="/css/login.css?1645536142"/>

1 2	<!-- 強制的にリロードする際の表示 --> <link rel="stylesheet" href="/css/login.css?1645536142"/>

　
　
「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」を設定することもできます。
　

    'Asset' => [
         'cacheTime' => '+1 year'
    ],

'Asset' => [

'cacheTime' => '+1 year'

　
　
上記のように「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 5.x CakePHP3, CakePHP4

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

Message コメントをキャンセル

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

: CakePHP3で他のテーブルのマスタテーブルからセレクトボックス（プルダウンリスト）を作る

他のテーブルのマスタのレコードからプルダウンリストを作成し、選択できるようにするサンプルプログラムと解説。ORMの設定によりデータベースの値を取得し、配列を作成し optionsに与える。

: CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法

CakePHP3でデフォルトのソート条件を設定しつつ画面上でユーザがソート条件を選択したときもソート処理を実行させる方法を解説。ソート条件はページネーションの処理として実装。

: CakePHP4から外部のデータベースにアクセスする方法解説

CakePHP4のシステムから他のシステムのデータベースにアクセスをし、SQL文を実行する方法を解説。try-catchでエラーを取得する方法も解説。

: CakePHP4で「app_local.php」「.env」を利用して環境ごとの定数を振り分ける方法

CakePHP4で.env、app_local.phpに定数を定義してそれを呼び出す方法の解説。Gitでは管理せず本番環境と開発環境とで異なる定数を定義するためそれを利用する方法。

: CakePHP3のタイムゾーンを協定世界時UTCから日本標準時間JSTにずれを変更する方法

CakePHP3の標準設定のタイムゾーンは「UTC（協定世界時）」に設定されている。これを日本標準時に変更する方法（app.php、bootstrap.phpの変更方法）の解説。

: CakePHP4のFrozenDateで1ヵ月前、先月、今月1日、来月末の日付などを算出する方法

CakePHPには「FrozenDate」の日付を扱う関数が用意されている。これを利用して、1ヶ月後、月末日、月初日、5日後などを指定して日付を取得できる。それを解説。

: CakePHP 2.3　デバッグキット（DebugKit）超初心者向けフォロー講座

CakePHP初心者に向けてデバッグキット（DebugKit）のインストール方法、はまりポイントを解説。

: CakePHP3にWYSIWYGエディタのCKEditor4を設置、カスタマイズ方法を解説

WYSIWYGエディタであるCKEditor4をCDNを利用して簡単にCakePHP3に導入する方法とカスタマイズする方法を解説。CakePHP3にはページごとの振り分けを行うブロック化を利用する。