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

みなさん、こんにちは!

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

となります。

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

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

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

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

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

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

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>’

の結合なので、出力は、

<script type=”text/javascript” src=”//brionac-yu-yake.com/sample.php?p=タイムスタンプ”></script>

となります。

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

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

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

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

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

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

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

これ以外にも様々な書き方があると思いますが、読み込むファイルの後ろに、?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に、

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

おすすめしない方法

なお、キャッシュの削除について、おすすめしない方法について紹介します。

metaタグでキャッシュを無効化

全ての様相に対してのキャッシュの無効化を行うのならいいのですが、ブログの一部のシステムなどのキャッシュを無効化したいために、ウェブページ全体のキャッシュを無効化するのは難ありです。

高速化のためのキャッシュなのに、すべてを無効にするのは速度面で不利です。

Ajaxの導入

Ajaxを導入すれば、キャッシュの無効化ができる様です。

しかし、現状でAjaxを導入していないのであれば、個人的にお勧めはできません。

Ajaxの一番の欠点は、jQueryの読み込みが必要なことです。

jQueryを読み込むのに時間がかかるので、キャッシュの為だけにAjaxを導入するのも、メリットが小さいでしょう。

タイムスタンプをつけるだけでキャッシュを無効化できるので、そちらの方が手軽です。

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

ここまで、PHPと連携して簡単に特定のJavaScriptのキャッシュを無効化する方法を紹介しました。

高速化のためのキャッシュですが、状況によっては意図せぬ動作をします。

PHPやJavaScriptの動作がおかしいと思ったら、

  • PHPのキャッシュ
  • JavaScriptのキャッシュ
  • 読み込むデーターのキャッシュ

に注意して、トラブルシューティングを行えば、解決も速いでしょう。

以上、PHPと連携して簡単に特定のJavaScriptのキャッシュを無効化する方法について、参考になれば幸いです。