URLパラメーター(クエリ文字列)でCSSのキャッシュを自動更新させる
- 2018.11.25
- 2019.01.25
- Webスキル
よこのじ(@yokonoji_work)です。
今回は、ファイルバージョンをURLのクエリーで指定して、自動でキャッシュファイルを更新させる方法です。
cssファイルやjsファイルを修正したのに反映されていないときの原因は、ブラウザがキャッシュしている古いファイルでWebページを表示しているからですね。その古いファイルを最新版に更新する方法にスーパーリロードがあります。
しかし、この方法は手動作業が必要ですので、古いファイルで表示させ続ける人もいるかも知れません。そのため、みんなが最新の状態でWebページを見ることができるように作る側が配慮する必要があります。
URLパラメーター(クエリ文字列)
URLパラメーター(クエリ文字列)とは、Webサーバーに情報を伝えるための記述です。URLの末尾にクエスチョンマーク(?)を付けて、その後ろにパラメーターを指定します。
クエリ文字列とは、WebブラウザなどがWebサーバに送信するデータをURLの末尾に特定の形式で表記したもの。
Webアプリケーションなどでクライアントからサーバにパラメータを渡すのに使われる表記法で、URLの末尾に「?」マークを付け、続けて「名前=値」の形式で記述する。値が複数あるときは「&」で区切り、http://example.com/foo/var.php?name1=value1&name2=value2 のように記述する。
例えば、Googleで「URL クエリー」と検索すると、検索結果のURLに「https://www.google.co.jp/search?q=URL+クエリー~」と表示されます。これには、検索ワードや言語などの情報が含まれています。
なお、URLパラメーター(クエリ文字列)は、ページへのアクセスには影響を及ぼしません。例えば、次の2つのURLはどちらも同じページにアクセスします。今回はこの仕組を利用します。
CSSのキャッシュを自動更新させる
URLパラメーター(クエリ文字列)を付与しても、ページへのアクセスには影響しません。しかし、URL自体は異なります。これを利用すると、ブラウザに同じファイルを別のものと認識させることができます。
どういうことか、説明します。
次のコードはlinkタグでcssファイルを読み込む記述です。どちらもcontent.cssの読み込みですが、下側には「?20181124」を付与しています。
旧:<link rel="stylesheet" href="https://yokonoji.work/~~~/content.css"> 新:<link rel="stylesheet" href="https://yokonoji.work/~~~/content.css?20181124">
これにより、ブラウザは「https://yokonoji.work/~~~/content.css」と「https://yokonoji.work/~~~/content.css?20181124」を別のファイルだと認識します。
つまり、旧のcssファイルを更新したときにクエリ文字列として「?20181124」を付与していれば、ブラウザはキャッシュしたことがないファイルと認識して、content.cssを再キャッシュします。こうすれば、スーパーリロードをしなくても、最新のファイルでWebページを表示させることができますね。自動で。
クエリ文字列は「?ver=1.00」のように自分で管理しやすい任意の表記で問題ありません。上記の例では変更したときの年月日を指定しています。更新するたびに異なるパラメーターであれば、良いということです。
- 前の記事
CSSで文字列を自動で折り返し・改行して表示させる 2018.11.24
- 次の記事
開発を速くするCSSフレームワーク一覧 2018.11.25