キャッシュによるレイアウト崩れ対策

赤猫ですｳｪｲ٩( 'ω' )وｳｪｲ

社内でサイトのリリース作業を行っている時に

社A「あ、レイアウト崩れてる」
社B「あ、ほんとだ」
社C「崩れてますね」
赤「えっ！？」
社D「崩れてるねー」

ということが起こることがあります。
その際に、

社A「キャッシュだろうね」
社B「キャッシュかね？」
社C「キャッシュですかね」
赤「ど、どどどどこですか！？PCとスマホのCSS間違えましたか！？？」
社D「キャッシュでしょ」

赤「えっなにそれ知らない」

となることがあります。

--------------------------------------------------

キャッシュでレイアウトが崩れる・・？

というのは、たとえばcommon.cssを編集して本番環境に公開（リリース）した場合、
そのサイトを見ているユーザーがページをリロードしたり
キャッシュを削除してから読み込んでくれないと、
前のCSSのままでサイトが表示されることがあります。

こっち側（リリース後に内容を確認する弊社）は、
「あ、崩れてる」と思ったら、何度かリロードを試してみて「やっぱりねー」で解決するのですが、
ユーザーからしたら「あれ？突然レイアウト崩れた・・？」となり、印象が良くありません。

そこで！

CSS等のファイルを更新した場合（JSとかもね）、

それらのファイルを読み込む側（たとえばHTML）で、

読み込むファイルの名前のおしりに「?〜」という書き方で

“パラメータ”をつけてあげるといいのです。

たとえば、

<link rel="stylesheet" type="test/css" href="/css/common.css?20140505">

こんな感じ。

<link rel="stylesheet" type="test/css" href="/css/common.css?20140505">

?20140505

ここな。

“?”以降はなにを書いてもいいのですが、

弊社ではファイルを変更した日付けを入れることが多いです。

変なこと書いてもソースでバレてしまってあれなので・・＾＾

別に「common.css?akanekoweiwei」でもおkです。やらないけど。

こう記述することによって、「common.css」が新しく読み込まれるので

（「common.css?20140505」が読み込まれるのはこれが初めてなので）、

キャッシュによるレイアウト崩れは起こらない！？ということになります。

これを知っておけば、リリース後に

「あれ、崩れてる！！」と叫んで頭が真っ白になって変な汗をかくということがなくなりますし、

「これ修正箇所が多いのでパラメータ記述した方が良くないですかね？」という提案もできるようになります。

やったね！

まわりに影響の多い修正をした場合は、

こうやってパラメータをつけてリリースした方がいいかもしれないです。たぶん。