運営サイトのCSSの変更を確認しようと、iphone4・5・Xと3種類の実機で表示を確認したところ変更が全く反映されませんでした。
いろいろ試して、上手く行った解決法と参考サイトを紹介します。
解決法は、読み込むCSSのパスにパラメータを付ける
スタイルシートを読み込むのにheadタグ区間に以下のような記述をしますよね。
<link rel="stylesheet" href="/styles.css" type="text/css" />
このlink要素内のhref属性で、読み込むCSSファイルのパスを記述するんですが、これにパラメータを付けます。
<link rel="stylesheet" href="/styles.css?190522-1809" type="text/css" />
こんな感じ。コード内のstyles.css?190522-1809がパラメータを付けた状態です。
?の後の値は半角英数字なら何でも良いです。
このように記述する事で、リロードする際にブラウザ側で新しいCSSファイルとしてキャッシュするので、変更内容がサイトに反映されます。
ただ、このやり方の場合、CSSを変更するたびに、パラメータの値を変えないといけないんですよねぇ。。。
その面倒な作業を自動化してくれるのが、今回見つけた参考サイトです。
自動化する前にいろいろ試しました
CSSの変更が上手く反映されないときって、ブラウザのキャッシュを削除すれば解決すると思ってました。
今回も、キャッシュを削除した後は、
- Chromeのデベロッパーツールでは変更が反映される。
- Androidの実機でもCSS変更が反映される。
- iPhoneだと反映されない。。。それも、4・5・Xと3機種とも。
別のところに原因があるかもしれないと思い、サーバーの管理画面にログインしてキャッシュの設定を見直したり、.htaccessの設定を見直したりしました。
さらには、一度スタイルシート自体削除してCSSを無効にするといったこともしたんですけど、iphone4・5・Xともに古いCSSを参照するという状況に。。。
この時点で、キャッシュが影響しているのは間違いないんですけど、削除できなかったんです。
で、検索して見つけた参考サイト
キャッシュの削除がどうにもならん、と検索してお世話になった参考サイトがこちら
この記事を拝見して、phpのdate関数でパラメータを付けたら、即時、スタイルシートの変更が反映されました。
実際に自分のサイトに記述したコードは以下のとおり
<link rel="stylesheet" href="/styles.css?<?php echo date('ymd-Hi'); ?>" type="text/css" />
date関数が1分ごとに更新されるので、CSSの編集ごとに変更が反映される状態です。
HTML上でPHPを動かす場合は、.htaccessの編集が必要になります。
今回の私の環境はエックスサーバーだったので、.htaccessに以下のコードを記述して対応しました。
AddHandler fcgid-script .html
phpのdate関数の書式はこちらでどうぞ。
CSSにパラメータを付けるのは読込速度に影響があるんじゃないかなって思ったんですけど、特に問題は無さそうです。
サイトのパフォーマンス計測はこちらで行いました
完璧ではありませんが、90点ってことで良しとしたいです。
キャッシュの削除ができない理由は分からないまま
ちなみにパラメータ付けてCSSの変更を確認した後、パラメータを外すとCSSの変更前に表示が戻ってしまいました。
自分の環境だけかもしれませんが、iphoneのSafariやChromeでキャッシュが削除できていないことは確かだと思います。
サイト表示に影響がないので、しばらくはCSSのパスにパラメータを付けておきたいと思います。
