はじめに
タイトルの内容で記事を書いた理由は、「キャッシュクリアの為にファイル名の後ろに数字をつけるアレ」と曖昧な覚え方をしていたからです。
曖昧な覚え方だとググることすらもできなかったので、備忘録として記事にしました。
Cache Busting
Javascript、CSS、画像等のファイルの更新に合わせてクエリストリングを変更することで、ブラウザ側でキャッシュクリアをしなくてもいい状態にすることです。
ブラウザ側がサーバ側のファイルを読み込まずキャッシュを読み込むことでJavascript、CSS、画像の修正が反映されないことを防ぎます。
後ろにつけるアレの正式名称を覚えたい
クエリ
クエリストリング
クエリ文字
GETパラメータ
パラーメータ
特に固定された呼び方はないのでしょうか。
個人的にクエリストリングがしっくりきたのでクエリストリングと呼びつつ他にこういう言い回しもあるという程度に覚えておきます。
具体例
Javascript、CSS、画像ファイルの後ろに?クエリストリングと記述します。
CSSファイルの読み込みを例として、クエリストリングを書いてない場合は
<link rel="stylesheet" type="text/css" href="/css/default.css" />
クエリストリングを書いている場合は
<link rel="stylesheet" type="text/css" href="/css/default.css?20210909" />
と記述します。
CakePHPでヘルパーを利用してタグを作成した場合にクエリストリングを付与
環境
ソフトウェアのバージョン
PHP 7.3.15
CakePHP 2.10.20
HtmlHelper利用時にクエリストリング付与
パラメータ無しでクエリストリングを付与
パラメータの$urlにクエリストリングを付与したファイル名を記述します。
index.ctp
<?php $this->Html->css('test.css?20210909', array('inline' => false)); ?>
出力結果は以下の通りです。
<link rel="stylesheet" type="text/css" href="/css/test.css?20210909"/>
パラメータありでクエリストリングを付与
パラメータの$urlにクエリストリングを付与したファイル名を記述する際にパラメータを記述します。
index.ctp
<?php $this->Html->css('test.css?param=20210909', array('inline' => false)); ?>
出力結果は以下の通りです。
<link rel="stylesheet" type="text/css" href="/css/test.css?param=20210909"/>
Configureを利用してクエリストリングを付与
クエリストリングが複数ある場合に同時に修正したかったので、Configureを利用してみました。
Configディレクトリに設定用のファイルを作成し、設定したいクエリストリングを記述します。
testConfig.php
<?php
$config['reloadQuery'] = '20210909';
Configディレクトリのbootstrap.phpに設定ファイル読み込みの記述をします。
bootstrap.php
Configure::load("testConfig.php");
Controllerでクエリストリングを受け取り、テンプレートに渡します。
テンプレートが複数ある場合に共通化した処理になると考えたため、AppController.phpにbeforeFilter()を記述してクエリストリングを受け取っています。
AppController.php
class AppController extends Controller {
public function beforeFilter() {
$reloadQuery = Configure::read('reloadQuery');
$this->set(compact('reloadQuery'));
}
}
Controllerから受け取った$reloadQueryをテンプレートで使用します。
index.ctp
<?php $this->Html->css('test.css?' . $reloadQuery, array('inline' => false)); ?>
出力結果は以下の通りです。test.css?の後ろにtestConfig.phpで設定した値が表示されます。
<link rel="stylesheet" type="text/css" href="/css/test.css?20210909"/>
index.ctpよりも外側のテンプレート(例：default.ctp)があるとして、そこで直接タグを書いている場合は以下のように記述します。
default.ctp
<?php <link rel="stylesheet" type="text/css" href="/css/default.css?<?php echo $reloadQuery; ?>" /> ?>
出力結果は以下の通りです。
<link rel="stylesheet" type="text/css" href="/css/default.css?20210909" />
そもそもCakePHPだったらコメントアウトを外すだけ？
そもそもCakePHP2.xだとcore.phpに記述されている以下のコメントアウトを外すだけでキャッシュクリアを行ってくれるようでした。
core.php
Configure::write('Asset.timestamp', 'force');
コメントが英語だったのでしっかりと理解できていませんでしたが、おそらくブラウザを開くたびに毎回キャッシュクリアをする設定だと思います。
今回の目的はファイル更新後に1度だけキャッシュを読み直して欲しかったので上記の設定は使わなかったです。
参考にさせてもらったサイト
以上です。
↧