ホームページ制作時のちょっとしたテクニック、
これまで社内でのみ共有のEVERNOTE等に書いていたのですが、
特に公開しても問題ないなーと思いましたので、BLOG等に書いていきたいと思います。
昨今いかに閲覧を早くするかへ主眼が置かれ、どの環境でもキャッシュファイルが残ることが多いです。
スーパーリロード（Ctrlキー＋F5キー）等をすれば解決しますが、確認時、毎回この離れたキーを押すのはとても大変。
設定その他をいじれば、少し便利に確認できます。
開発者ツール操作時にキャッシュを無視する
基本ブラウザで構築確認時には、開発者ツールを開いていると思います。
（右クリック→要素を調査or検証ででてくるアレ）
FirefoxでもChromeでも、開発者ツールを出した状態で、「F1」キーを押してください。
それぞれ下記のようなオプション設定画面が開きます。
この中に、それぞれキャッシュ無効化を設定する欄がありますので、チェックをいれてください。
これで開発者ツールを開いている間は、キャッシュが全て無視されます
もちろんブラウザそのものから、キャッシュを残さない方法もあります。ただ日常使いとしては少し不便です…
お客様に見せる際、cssや画像を再読込してもらう方法
こちらのPCは上記の方法も含め、どうにでもなるのですが、
困るのはお客様に確認していただく時です。
パソコンで見てもらえるなら、まだ「Ctrl+F5キー」等の方法もあるのですが、
スマートフォンやタブレットしかお持ちでないお客様の場合、キャッシュクリアの方法を案内するのはとても大変。
お客様の利便性も損ないます。
そこで裏技的な方法
画像やcssを読み込むタグに、パラメータをひっつけます。
例：<img src=”test.jpg?a>
例：<link rel=’stylesheet’ href=’style.css?a‘ type=’text/css’ media=’all’ />
これをつけると、今まで保存されたキャッシュとは別ファイル扱いになり、再読込が掛けられます。
つけた状態からさらに更新したい場合は?b等パラメータを変更してください。
……まあ更新した全てのファイルにつけるのは大変ですし、
Grunt等でタイムスタンプ付けたらいいじゃん……というのはごもっともなのですが、
ひとまずどの環境でもそれなりに使える方法のTipsでした。
お役立てください。
