2019年11月04日

サイトのキャッシュを自動的に更新する方法

お世話になっております。佐藤です。

今回はサイトのキャッシュに関する記事を書いていこうと思います。サイト制作者であれば誰しも経験あるかと思いますが、クライアント様やお客様から「修正が反映されていません。」と連絡受けた経験があるのではないでしょうか?
特に携帯などの端末で確認した際に発生しやすい事象だと思います。

これにはキャッシュが原因です。キャッシュとは簡単に説明すると「一度見たホームページのデータをパソコンの中に一時保存して、速く表示できるようにする機能」のことですが、普段はこの機能があるおかげでサイトの速度が速くなるなどの恩恵を受けていますが、変更を反映したい時には不便です。

制作側に詳しい人間でない限り、キャッシュを削除してくださいと言ってもわかりませんと言われることも多いですし、いちいち削除してくださいというのはどうかなと思います。その時に使える技術が「クエリを付け加える」というやり方です。(参考記事

<!-- CSS -->
<link rel="stylesheet" href="css/style.css?201901011200">
<!-- JavaScript -->
<script src="js/main.js?201901011200"></script>

静的サイトであれば上記のように、任意のクエリを付け加えることで自動的に更新することが可能です。<link rel=”stylesheet” href=”css/style.css”>と<link rel=”stylesheet” href=”css/style.css?201901011200″>は別物としてブラウザは認識するからですね。クエリの文字はなんでも良いのですが、参考サイトやその他のサイトでも紹介のある通り、日付が一番管理しやすく分かりやすいのではないかと思います。

PHPなどの動的サイトでは以下のようにdate関数などを使用することで自動的にクエリを吐き出すことが出来ます。

<!-- CSS -->
<link rel="stylesheet" href="css/style.css?<?=date('YmdHi');?>">
<!-- JavaScript -->
<script src="js/main.js?<?=date('YmdHi');?>"></script>

date関数の詳しい詳細に関してはPHPの公式ドキュメントを確認して頂きたいのですが、date関数で使用した引数の説明は以下の通りです。状況によっては引数を変更することで条件を変更することも可能です。

Y年。4 桁の数字。例: 1999または2003
m月。数字。先頭にゼロをつける。01 から 12
d日。二桁の数字(先頭にゼロがつく場合も)01 から 31
H時。数字。24 時間単位。00 から 23
i分。先頭にゼロをつける。00 から 59

以上、サイト更新の際にキャッシュ管理を自動化する方法です。