2014年5月5日月曜日

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


赤猫ですウェイ٩( 'ω' )وウェイ

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

社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」が読み込まれるのはこれが初めてなので)、
キャッシュによるレイアウト崩れは起こらない!?ということになります。

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

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

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



やったね!


まわりに影響の多い修正をした場合は、
こうやってパラメータをつけてリリースした方がいいかもしれないです。たぶん。

IPA

赤猫ですウェイ٩( 'ω' )وウェイ

先日の社内での会話。

赤「IPAがなんがなんのことだかよくわかっていません」

社「“IPA”を知らないのはこの業界にいる人間として許されないので、調べてウェイウェイしておいてください」

赤「」

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

【IPA】-独立行政法人 情報処理推進機構

Information-technology Promotion Agency,Japan


IT用語だと思っていたら、そうではなかったみたいです。
http://www.ipa.go.jp/

・IT社会がより便利なものになるように
・IT社会がより安全なものだと思ってもらえるようセキュリティに関して目を光らせ
・IT社会により素晴らしい人材を!
そんな活動を行っている団体です。

例えば、企業のサイトに対して「このページには脆弱性がありますよ」
という勧告をしてくれたりします。

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

因みに、IPAの活動内容を見てみたところ、
企業だけではなく子ども向けにもIT/セキュリティに関するイベントを実施しているみたいです。

確かに、今や小学生ですらスマホを持っている時代なので、
子どもにもセキュリティうんたらかんたらな話を理解してもらえないと
お互いにこわいですね・・