PHPと連携して簡単に特定のJavaScriptのキャッシュを無効化する方法

みなさん、こんにちは！

ブリュの公式ブログ.netにお越しいただきまして、ありがとうございます。

このサイトでは、ITについて特化したサイトを運営しています。

今回は、JavaScriptでキャッシュを無効化する方法について紹介します。

普通のWordPressサイトを運営しているだけでは、キャッシュが悪さをする可能性は低いのですが、ウェブサービスなどにおいては、アクセスされたリアルタイムで情報を更新したいときがあります。

その時に、JavaScriptから呼び出すファイルも含めて無効化する方法を紹介します。

呼び出すファイル名にタイムスタンプを加える

一番簡単な方法として、タイムスタンプを加える方法があります。

JavaScriptのキャッシュを無効にする方法

HTMLやPHPにおけるJavaScriptの読み込みは、次のように行っているでしょう。

<script type="text/javascript" src="//brionac-yu-yake.com/sample.js?"></script>

1	<script type="text/javascript" src="//brionac-yu-yake.com/sample.js?"></script>

これを、PHPコードにおいて、次のように書き換えてください。

<script type="text/javascript" src="//brionac-yu-yake.com/sample.js?p=<?php echo time(); ?>"></script>

1	<script type="text/javascript" src="//brionac-yu-yake.com/sample.js?p=<?php echo time(); ?>"></script>

<?php echo time(); ?>の部分が、タイムスタンプを出力する関数になっています。

time();がPHPのタイムスタンプを出力する部分。

echoが画面への出力ですので、読み込むファイル名は、

//brionac-yu-yake.com/sample.js?p=タイムスタンプ

となります。

なお、現在拡張子がhtmlのファイルでブログを運営していて、PHPを利用できないという方は、.htaccessに1行書き加えるだけで、拡張子がhtmlのままPHPを利用できるようになります。

方法は後述していますので、そちらもご覧ください。

JavaScriptで呼び出すPHPのキャッシュを無効にする方法

JavaScriptで呼び出すPHPは、次のように書いています。

document.write('<script type="text/javascript" src="//brionac-yu-yake.com/sample.php"></script>');

1	document.write('<script type="text/javascript" src="//brionac-yu-yake.com/sample.php"></script>');

これを、次のように書き換えてください。

document.write('<script type="text/javascript" src="//brionac-yu-yake.com/sample.php?p=' + (new Date()).getTime() + '"></script>');

1	document.write('<script type="text/javascript" src="//brionac-yu-yake.com/sample.php?p=' + (new Date()).getTime() + '"></script>');

これも、先ほどと同様に、タイムスタンプを付け加えています。

JavaScriptの内部で読み込む場合には、JavaScriptのタイムスタンプを利用できるので、PHPは不要です。

JavaScriptにおいては、(new Date()).getTime()でタイムスタンプを出力します。

JavaScriptにおける文字列の結合は、+で行います。

‘<script type=”text/javascript” src=”//brionac-yu-yake.com/sample.php?p=’ + (new Date()).getTime() + ‘”></script>’

は、

‘<script type=”text/javascript” src=”//brionac-yu-yake.com/sample.php?p=’
(new Date()).getTime()
‘”></script>’

の結合なので、出力は、

となります。

※PHPにタイムスタンプを付加することは、サーバー側のキャッシュの無効化にも効果があるようです。

※JavaScriptが呼び出したPHPがレスポンスで200を返していても、サーバーがキャッシュデーターを返している可能性もあるので、PHPの絡んだプログラムの動作不良になった場合には、真っ先にこの方法でキャッシュを削除するのが良いと思います。

JavaScriptが参照する外部データーのキャッシュを無効にする方法

例えば、JavaScriptが参照する外部データーは、次のように書かれています。

req.open("get", "//brionac-yu-yake.com/sample.dat", true);

1	req.open("get", "//brionac-yu-yake.com/sample.dat", true);

これを、次のコードに書き換えます。

req.open("get", "//brionac-yu-yake.com/sample.dat" + "?p=" + (new Date()).getTime(), true);

1	req.open("get", "//brionac-yu-yake.com/sample.dat" + "?p=" + (new Date()).getTime(), true);

これも、タイムスタンプを書き加えている例です。

タイムスタンプを付け加えることが最重要ポイント！

これ以外にも様々な書き方があると思いますが、読み込むファイルの後ろに、?q=タイムスタンプという読込形式は同じです。

このことを意識して、プログラムコードを書き換えてみてください。

なんでキャッシュが無効化されるの？

タイムスタンプを付加することでキャッシュが無効化される理由は簡単で、タイムスタンプの付加によって、毎秒ファイル名化変化するからです。

タイムスタンプとは、1970年1月1日00:00:00からの経過時間を示しています。

すると、?=以降の数字に、<?php echo time(); ?>によってタイムスタンプを付け加えることで、JavaScriptのファイル名が1秒ごとに

sample.js?p=0001
sample.js?p=0002
sample.js?p=0003

というイメージで、毎秒ごとに更新されます。

※?p=以降の数字はイメージです。

キャッシュは、同じファイル名の時にのみ有効になるので、ファイル名が毎秒変化するということは、キャッシュが実質的に無効になっています。

よって、実際には毎回sample.jsにアクセスしているけど、コンピューター的に見ればファイル名が変化しているように見えるから、キャッシュが効かないということになります

JavaScriptが外部ファイルを参照するときにも同じです。

JavaScriptで(new Date()).getTime()を使ってタイムスタンプを出力し、ファイル名の上代に付け加えることで、

sample.dat?p=0001
sample.dat?p=0002
sample.dat?p=0003

となれば、毎回ファイル名が変化します。

毎回sample.datにアクセスしていても、キャッシュが効きません。

JavaScriptからPHPにアクセスするときにも同じです。

sample.php?p=0001
sample.php?p=0002
sample.php?p=0003

というように変化します。

PHPの時にはブラウザのキャッシュ以外にサーバーキャッシュの影響もあるのですが、この方法でサーバー側のキャッシュまで無効化できました。

LiteSpeed+LSAPIのサーバーは要注意

このキャッシュが問題となったのは、LiteSpeedのサーバーに移転したときです。

今まではApache+モジュール版PHPのヘテムルやロリポップ！を利用していたのですが、この度、LiteSpeed+LSAPIのカラフルボックスに移動しました。

その際に、メインサイトで使っているアクセスカウンターが正常に動作しなくなったのです。

いろいろ原因を探していると、どうもキャッシュが原因みたいで。

Google Chromeの開発者ツール（F12ボタン）を押して、カウンターのシステムに利用しているファイルのステータスを確認す津路、

カウントデータ：ステータスコードが304（キャッシュからの読み込み）
PHPやJavaScript200（リクエスト成功）

などと混在していました。

そこで、キャッシュが効いているカウントデータのみを、上記のタイムスタンプを利用してキャッシュを無効化しましたが、変化なし。

読み込むJavScriptやPHPのキャッシュを無効化すると、正常に動作しました。

サーバー移転の際に急に動作しなくなったら、キャッシュを疑ってください。

特に、LiteSpeedはキャッシュの効きが良いみたいなので、アクセスカウンターのようなリアルタイムで更新が必要なツールは、動作確認を念入りに行ってください。

参考：htmlファイルでPHPを動かす方法

なお、HTMLでブログを作成しており、PHPを利用していない方もいるかもしれません。

その際には、サーバーがPHPを利用できるのであれば、.htaccessに、

AddType application/x-httpd-php .php .html

1	AddType application/x-httpd-php .php .html

と書けば、拡張子が.htmlのままPHPの実行が可能になります。