スマホキャッシュ対策のためのcssパラメータ付与を自動化する

概要

用途

• コーディング中にcssの更新を行なったがスマートフォン実機の場合だけ反映されない事象への対応方法。
• iPhone等の「履歴を削除」よりも実機での修正反映を確認する時間を短縮できる。

内容

• css等のファイル参照パスの末尾にタイムスタンプ（timestamp）をパラメータ付与することでキャッシュ対策とする。
• JS版とPHP版を2パターンを用意。
• JS版の場合はtimestampパラメータを付与したいファイル参照パスの最後に「?timestamp=」を予め記述しておくこと。
• 静的にパラメータを付与してもキャッシュ対策となるが、修正の都度パラメータを変更する必要が生じるため、自動でパラメータが付与される処理を用意
  ※JS版はcssを読み直すことになるため挙動が重くなるため、手間でなければ静的なパラメータの記述を推奨します。

注意事項

• ファイルの更新日時のタイムスタンプではないことに注意。
• JS版の場合は「?timestamp=」から始まるパラメータが既に付与されているcssが存在する場合に注意。
• サイトを本番公開するタイミングで除去することを推奨（cssの更新頻度が少なくなることが想定されるため）。
• 特にJS版は表示が遅くなる可能性が高いため、注意が必要。

検証ブラウザ

• Google Chrome(最新)
• Safari(最新)
• Firefox(最新)
• Microsoft Edge(最新)
• IE11

実装方法