WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >作業効率化

Webサイトを制作・更新をした後に確認をしても、ブラウザのキャッシュが読み込まれてしまい、最新の状態が確認できないといったことがあります。
基本的には、F5キーを押したり、Ctrl + F5キーを同時に押してキャッシュごと更新するといった方法で確認できますが、閲覧者のブラウザ環境によっては古いページが表示され続けてしまいます。
そんな状況を防ぐため、CSSやJSファイルに更新日時を付与してキャッシュ対策する方法をご紹介します。

任意の文字をパラメーターとしてつける

キャッシュ対策としてよく紹介される方法は、CSSやJSファイルの後ろに、【?ver=1.2.5】とパラメーターを付与するという方法です。CSSやJSファイルを更新した時にこのパラメーターも一緒に変更することでブラウザ側ではキャッシュされているファイルと別のものだと認識して、最新のファイルを読み込むようになります。

<link rel="stylesheet" href="css/style.css?ver=1.2.5" />
<script type="text/javascript" src="js/common.js?ver=1.2.5"></script>

しかし、この方法だと複数のHTMLファイルで個別のCSSやJSファイルを読み込んでいる場合、更新をする度にパラメーターを変更しないといけないため、検索・置換を使ったとしても非効率です。
そうなると、自動的にパラメーター部分が変更できるのが一番便利ですね！

ファイル更新日時（タイムスタンプ）をパラメーターとして付与する

手動を自動化しよう！ということで、ファイル更新された時のみパラメーターが更新される記述方法の紹介です。

HTML／PHPファイルの場合

ファイルの更新日を取得するにはfilemtime関数を使用します。filemtimeは、相対パス or 絶対パスでファイルを指定しますが、絶対パスを使用する場合はサーバー側から見た絶対パス（/var/www/html など）を指定する必要があります。

相対パスで指定する場合

<link rel="stylesheet" href="./style.css?<?php echo date('YmdHis', filemtime('./style.css')); ?>" />
<script type="text/javascript" src="./common.js?<?php echo date('YmdHis', filemtime('./common.js')); ?>"></script>

絶対パスで指定する場合

<link rel="stylesheet" href="/common/css/style.css?<?php echo date('YmdHi', filemtime($_SERVER['DOCUMENT_ROOT'] . '/common/css/style.css')); ?>" />
<script type="text/javascript" src="/common/js/common.js?<?php echo date('YmdHi', filemtime($_SERVER['DOCUMENT_ROOT'] . '/common/js/common.js')); ?>"></script>

WordPressの場合

WordPress の場合は、パスを取得する独自の関数を使用します。

WordPress の各ファイルに直接記述する場合

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/common/css/style.css?<?php echo date('YmdHi', filemtime(get_template_directory() . '/common/css/style.css')); ?>" />
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/common/js/common.js?<?php echo date('YmdHi', filemtime(get_template_directory() . '/common/js/common.js')); ?>"></script>

WordPress で Function.php 内に記述する場合

wp_enqueue_style( 'mycss', get_stylesheet_directory_uri() . '/common/css/style.css', array(), date('YmdHi', filemtime(get_template_directory() . '/common/css/style.css')) );
wp_enqueue_script( 'myjs', get_stylesheet_directory_uri() . '/common/js/js.js', array(), date('YmdHi', filemtime(get_template_directory() . '/common/js/common.js')), true );

まとめ

自動化する場合は、PHPが使用できないと動かないため、まずはサーバーの設定をご確認ください。ランディングページなど少ないページであれば手動でパラメーターを付与する方法でも良いですが、中規模・大規模サイトになる場合には効率的に制作を進めるためにも自動化は必須ですね。キャッシュ対策をして、正しく最新の状態が見られるようにしておきましょう！