こんにちは、はんぺらです。
スタイルシートを修正して、ブラウザを更新したのにサイトに反映されなくて困ってる人は居ますか？
僕も、ウェブ系の開発を始めたばかりの頃は、同じ問題で悩んだことあります。
何度も何度も保存してるのに、ちゃんと保存されてるはずなのに、反映されない。。。結構イライラしますよね。。。
でも、全然大丈夫です。この記事を読めば、あなたのスタイルシートはすぐに画面に反映されるようになりますよ。最初に手順を書いてるので、手順だけ知りたい方はそれだけ見て試して見て下さい。
Contents
更新できない時はスタイルシートの読み込みのURLにパラメータをつけよう
取り敢えず、更新を反映させる手順だけをまずは説明します。
下記のようなスタイルシートの読み込みがあったとします。
<link rel='stylesheet' href='https://eejanaica.com/style.css' type='text/css' />これのhrefの値に、下記のようにパラメータを付けるだけです。これで、最新版が読み込まれるようになります。
<link rel='stylesheet' href='https://eejanaica.com/style.css?v=2' type='text/css' />はい、これで終わりです。手順だけ知りたかった人は、これで修正を反映させちゃって下さい！
更新されない理由を知ろう
取り急ぎ更新の反映はできたけど、理由も気になると思います。
では、何故スタイルシートを修正して、ちゃんと保存したのにデザインは更新されなかったのでしょうか？
それは、ブラウザがしているキャッシュというものが影響しています。
ブラウザがしているキャッシュとは？
ブラウザがしているキャッシュというのは、あなたが快適にインターネットを見られるように、ブラウザが勝手に内部でやってくれていることです。
具体的に何をやってくれているのかと言うと、スタイルシート、javascript、画像など、HTML内にリンクとして埋め込んであるファイルを、ブラウザが自分がすぐ取り出せる場所に保存してあげているんです。
では、何故ブラウザはわざわざ、すぐ取り出せる場所に保存するのでしょうか？私達の為に役に立つことなんでしょうか？
実はこのキャッシュをすることで、私達は快適にインターネットを楽しむことができているんです。
ブラウザがすぐ取り出せる場所に保存することで、私達が同じウェブサイトを再訪問した時に高速にそのウェブサイトを表示させることができるんです。
なぜなら、ブラウザがスタイルシート、Javascript、画像ファイルをもう既にキャッシュとして自分で持っているので、わざわざインターネットを通してそれらのファイルを取ってくる必要が無くなるためです。
インターネットでウェブサイトを見る時に、一番時間がかかるのは通信の部分なのです。その通信の回数をなるべく少なくするために、ブラウザがキャッシュしてくれているのです。
なので、私達が快適にインターネットを楽しむ為にキャッシュは必要な技術なのです。
なぜ、URLにパラメータを追記したら更新が反映されたのか？
ブラウザがファイルをキャッシュしていると、HTML内のそのファイルのURLが変わるか、または、キャッシュの保持期限が過ぎない限りは、ブラウザがキャッシュしているファイルは再度インターネットから取得してくれません。
そこで、スタイルシートのURLにパラメータを付与することで、ブラウザに「スタイルシートが更新されましたよ、更新してください」って教えてあげてるんですね。
よって、パラメーターをつけると更新してくれるってことなんです。
ちなみに、パラメータのvとはversionのvです。このパラメータはvじゃなくてもいいんですが、もう既にvで一般化してしまっているので無理して変える必要は無いでしょう。
開発中はスーパーリロードを使用しよう
キャッシュされているファイルの更新方法は分かったと思いますが、ウェブサイト開発中は何度もスタイルシート等は修正すると思います。その都度パラメータの値を更新するのは、正直面倒くさいですよね。
なので、開発中は「スーパーリロード」を活用しましょう。
スーパーリロードとは「フルリロード」「強制再読み込み」とも呼ばれていて、これをやると、ブラウザはキャッシュを無視して強制的にインターネットから最新版を取得してくれます。
下記は、windowsとmacのブラウザ毎のスーパーリロードのショートカット一覧です。
| windows | IE | Ctrl ＋ F5 |
| windows | firefox | Ctrl + F5 |
| windows | chrome | Shift + F5 |
| mac | firefox | Cmd + Shift + R |
| mac | chrome | Cmd + Shift + R |
| mac | safari | Shift + 更新ボタン |
ただ、ブラウザによってはスーパーリロードをやっても、最新版を取得してくれない事もあります。
そんな時は、ブラウザを変えてみるか、もしくは、ブラウザキャッシュ自体の無効化をするという方法もあります。
ですが、ブラウザキャッシュの無効化を行うと、全てのサイトのブラウザキャッシュが無効化されてしまいます。よって、全てのサイトの読み込みスピードが遅くなってしまいます。ですので、ブラウザキャッシュ自体の無効化はあまりおすすめはしません。
その他の方法として、サーバーサイドで強制的にパラメーターに日時を指定することで、毎回更新させるという方法もあります。
自分はあんまり使わないですが、一応紹介しておきますね。
具体的には下記のような感じです。
<link rel="stylesheet" href="style.css?<?php echo date('Ymd-His'); ?>" type="text/css">phpのdate関数を使用して、毎回パラメータがユニークになるようにしています。
まとめ
いかがですか？これで少しは作業効率は上がるんじゃないでしょうか？
初めてだと、色々と壁にぶつかる事が多いと思いますが、一つ一つ目の前の問題を解決しながら前に進んで行きましょう。
私も皆さんに少しでも何かを共有できるようにネタ探し頑張ります！
