こちらの記事の続きです。
ここで紹介するのは、あくまでアイディアの一例です。
なので、開発ツール・言語・フレームワークなどご自身の事情にあわせて適宜調整して下さい。
少しでもキャッシュで困っている方へのヒントになれば幸いです。
新たに見つけたり思いついたら、順次追記していきます。
HTML・CSS (手動)
まずは基本系として、プレーンなHTMLでの方法です。HTMLのキャッシュ更新を強制します。
例として、style.css の内容を変更したら手作業でクエリを書き換えてみます。
以下でご紹介する方法の出力例がこんな感じになりますね。
<link rel="stylesheet" href="style.css?ver=12345">CSSの中で使う場合はこんな感じ。
.img {
background-image: url(example.jpg?ver=12345);
}WordPress・PHP
スタイルシートを読み込む際に、PHPの関数を使って現在の時間を読み込んでみます。
<link rel='stylesheet' href='<?php bloginfo('stylesheet_url');?>?ver=<?php echo date("His") ?>'/>functions.phpから、テーマのバージョン番号を読み込むならこんな感じでしょうか。
function theme_enqueue_styles() {
wp_enqueue_style(
'mytheme-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);functions.phpから、子テーマに更新時刻を反映させる場合はこんな感じでしょうか。
function theme_enqueue_styles() {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style'),
date("ymdHis",filemtime( get_stylesheet_directory().'/style.css'))
);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');試しにカスタムフィールドでもやってみます。
<link rel='stylesheet' href='<?php bloginfo('stylesheet_url');?>?ver=<?php the_field('カスタムフィールド名'); ?>'/>PHP
date関数で現在の時間を読み込んでみます。
WordPressの１例目とほぼ同じです。
<link rel='stylesheet' href='style.css?ver=<?php echo date("His") ?>'/>filemtime関数でファイルの更新時刻を読み込んでみます。
<link rel="stylesheet" href="style.css?ver=<?php echo filemtime( 'style.css' ); ?>">JavaScript
色々と制約がある場合にはJavaScriptでも良いのかも。冗長に感じるのであまり好きでは無いですが…。
const now = new Date()
const y = "" + now.getFullYear();
const m = ("00" + (now.getMonth()+1)).slice(-2);
const d = ("00" + now.getDate()).slice(-2);
document.write(`'<link rel="stylesheet" href="style.css?${y+m+d}">`);【参考】
javascriptでcache-bustingを自動化する方法
https://ja.stackoverflow.com/questions/43918/javascriptでcache-bustingを自動化する方法
EC CUBE4 (twig)
管理画面で「キャッシュ削除」も忘れずに。
<link rel="stylesheet" href="style.css?{{ "now"|date("His") }}"> EC-CUBEのテンプレートタグについての記事を書きました。こちらも参照下さい。
インラインで書かれたコードへの対応アイディア
例えば、<head>内に直接記述したCSSなどの場合です。
あくまでアイディアベースですが、メモとして幾つか羅列してみます。
- コードを外部ファイルに移動させる。
※インラインにした理由があると思うので、正直どうかとは思う。 - .htaccessで、HTMLファイル自体のキャッシュを制御する(Cache-Controlヘッダー)。
※あまりこの方面に詳しくないので各自深掘りしてほしい。
<filesMatch ".(html|htm|js|css)$">
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</filesMatch>- ページを強制的にリロードするスクリプトを埋め込む。
※ブラウザキャッシュにどれだけ有効か少し不安。
<script>
document.addEventListener('DOMContentLoaded', function() {
// 現在のURLにフラグメント識別子（#）が含まれていない場合のみ処理を実行
if (document.URL.indexOf("#") === -1) {
// 現在のURLの最後に#を追加（この行は実際には何もしないので、実際の動作には影響しない）
let url = document.URL + "#";
// location変数に#を代入（この行は実際には何もしないので、実際の動作には影響しない）
let location = "#";
// 現在のページをリロード
window.location.href = window.location.href;
}
});
</script>SCSS(CSS内のパスにクエリを追加)
CSS内のリンクにクエリを追加してみても良いですね。
【参考】
Sass unique-id
https://sass-lang.com/documentation/modules/string#unique-id
1 thought on “Cache Busting(キャッシュバスティング)の具体例”