ウェブサイトの表示速度を改善するためにキャッシュという機能が使われる。
一度読み込んだものを一定期間覚えておいて、次に同じサイトを訪れるときにそれを活用する。ブログのデザインの部分を記述しているCSSもそれに含まれるケースがある。
これはとてもありがたい一方で、ブログを作る側として困るときがある。
それはCSSでデザインを変更したとき。
僕はCSSの変更でブログのデザインをアップデートするときはMacBook ProのSafariでウェブ開発ツールを活用している。その場で変更後の状況を確認しながら編集を行うので、確実かつ効率的。ところが元々のCSSがキャッシュされていると、この変更が読み手にすぐに反映されない。
小さな変更ならいいのだが、大幅な変更をした場合は困る。早くデザインチェンジを反映したバージョンを表示させたい。
そこでの対応方法をしらべたら、以下のページにたどり着いた。ありがとうございます。
サイト更新時にCSSキャッシュを破棄して確実に反映させる方法
「キャッシュのせいだから再読込して」と毎回言わなくて済むようにする記述方法
これを参考にさせてもらって僕が対応した方法のメモを残しておきます。なお、これはWordPressでブログを作成しているケースです。
今回のミッション
CSSを更新したら、ブラウザのキャッシュ機能に負けずに、毎回新しいCSSファイルを読み込んでもらえるようにする。
実行した変更
header.phpにCSSを読み込むコードがある。これを変更する。
旧：
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
新：
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>">
これにより変更したCSSの内容がすぐに反映されるようになった。
各コードの意味とすぐに反映される理由
コードに記載されている各文字は何をしているのだろうか。旧バージョンと新バージョンで調べてみた。
旧バージョン
linkの中のrel=はrelation/relationshipを意味するそうでファイルとの関連性を示している。だからlink rel="stylesheet"はスタイルシートと関連していますよ、ということ。
続いてlinkの中にあるhref=。
これはhypertext referenceの略という説が有力らしい。このように書いたのは、語源をググってみたところ、明言しているサイトと明言していないサイトとあったから。こういうのを調べ始めると時間があっという間に過ぎてしまうのだが、なかなか面白い。
さて、link href=はそのファイルのある場所：urlを指定している。
続いて<?php echo get_stylesheet_uri(); ?>。
WordPress Codexによれば、これは現状のテーマのスタイルシートのURLを出力するコード。これらにより、スタイルシートのURLがリンクされるというわけだ。
最後にtype="text/css"。
これはタイプ属性をするもの。あらためて調べてみると、HTML5では不要とのこと。今はほとんどのブラウザで対応しているとのことだから、もう消しちゃってもいいいらしい。
新バージョン
新バージョンのコードはこちら：
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>">
まず全体的に何をやっているかというと、CSSファイルにタイムスタンプを加えていて、更新のたびにCSSファイルの名前が変わり、最新のCSSとして読み込まれるようになるとのこと。
最初のlink rel="stylesheet"に変更はない。このファイルはスタイルシートに関連していますよ、と記載。
続く<?php echo get_stylesheet_uri();も旧バージョンと同じ。スタイルシートのURLを出力している。
続くechoは文字列を出力する。したがって、?を出力させる。
続く. filemtime( get_stylesheet_directory() . '/style.css')はタイムスタンプと呼ばれるもの。
filemtime()はファイルの最終更新時を返す。ここではget_stylesheet_directory()でディレクトリのパスを指定し'/style.css'でPHPファイルのCSSをインクルードしていて、これでCSSファイルの最終更新日を取得しているものと思われる。
したがって、新しく設定したコードを出力すると、「cssのURL – ? – ファイル更新時の数字」というリンクになる。
CSSのURLの末尾の「?」は「クエリー（Query）」と呼ばれ、ページURLの後ろに?＋文字列が加わっても、内容には影響がない。しかし、ブラウザ側は？以降の文字列が違うと異なるURLだとみなし、キャッシュデータを読み込みにいかない。
なるほど！そういうことか。
このコード全体でやっていることはきっとこういうこと。
ブラウザに出力させるcssのurlはCSS変更のたびに新しくなる。これによって読み手側のブラウザは「むむ、新しいcssのurlっぽいな。キャッシュしたurlじゃなくて最新のcssのurlを読み込みにいくか」と考えている。
最終ファイル更新日に変更がなければ、タイムスタンプの文字列も変わらない。ブラウザ側は「ああ、同じcssのurlだな、前に使ったヤツを出力するか」と考え、保存しているキャッシュから引っ張ってくるのだろう。
「CSS自体のファイル名を変更することなく、ブラウザ側にCSSが更新されていることを伝え、最新のCSSファイルを読み込ませる」
これがこのコードが実行していることだと思われる（万が一間違いがあったら教えてください。）。
ああ、スッキリした。今度から新バージョンをブログのheaderに記述しておこうと思う。
まとめ
ミッション自体はシンプルだし、コードに記載する内容も簡潔なのだけど、その裏にある背景や手段は奥深いものであった。
こういうのはネットにたくさん情報が乗っていて、コピペで解決することが多いけど、じっくり勉強すると非常に面白いし勉強になる。
グッと集中して勉強するのは刺激もあってたまにはいいな、と思えた週末でした。
