モバイル表示のCSSキャッシュがかなりしつこかった件を修正 #解決 #モバイル #cssキャッシュ #反映

  • 作成日:2020-6-18

ウェブの仕事をしていると必ず出くわすのがcssを変更しても実際にデザインに反映されない件ですね。ほとんどはキャッシュのせいです。パラメータクエリーでキャッシュを無効化してしまう方法もありますが、根本のキャッシュがどこにあるのかを調べて解決することにしました。

今はキャッシュがあちこちにあって大変!

なぜ、キャッシュ自体をクリアするようにしたのか? パラメータクエリーでキャッシュ自体を無効すると常時キャッシュが効かない状態になり、何のためのキャッシュが意味がありません。一度このような体験をしておくと後々役に立ちますので、ぜひこれ以降を読んで見てください。

ブロガーの初心者などに非常に役立つと思います。

キャッシュはいったいどこにあるのでしょうか?

キャッシュは次の場所にあります。

  1. ブラウザキャッシュ
  2. wordpress
  3. クラウドフレア
  4. レンタルなどのサーバー本体

一番最初に思いつくのが、ブラウザキャッシュですね。これはインターネットに一番最初に導入されたキャッシュです。IE(今はMicrosoft Edge)、Chrome、Firefox、Safariなどのブラウザには必ず備わっています。ブラウザのキャッシュのクリアの方法はブラウザそれぞれで違うので自分で使用しているブラウザを調べてもらうことにしますが、もしパソコンでChromeであれば、Ctrl+Shift+Delのショートキーを同時に押すと以下のようなキャッシュを削除するかどうか聞いてきますので、OK!で消去します。

Chrome83で実行したところ

Chrome83で実行したところ

本書でいうキャッシュとは、CSSファイルなどのキャッシュされたファイルのみを指しますが、一般的にブラウザがキャッシュするのは、過去のサイトの閲覧履歴、Cookieやサイトに入力したパスワードなども合わせて保存します。なにも考えずのキャッシュをクリアするとこれらのキャッシュも消去されますので、注意してください。

次がwordpressのキャッシュです。たぶん本書を読まれる方はwordpressを使ってブログを書かれる方だと思いますので、wordpressはご存じだと思います。wordpress自体はキャッシュしませんが、W3 Total Cache等の高速化を目的としたキャッシュ専用のプラグインをインストールするとwordpressのキャッシュも消去しなければなりません。これはサーバーのディレクトリ-からFTPなどで接続してキャッシュファイル自体を消去します。どのファイルを削除するかはご使用のプラグインを調べてください。

3番目の項目がCloudFlare(クラウドフレアー)というネットワーク上にあるキャッシュイングサーバーにあるキャッシュ。CloudFlare自体はあまりご存じないかも知れません。うまく利用すればかなり高速化を期待することができますが、また弊害も多くあまり進められるものではありません。もしCloudFlareキャッシュをクリアしたい場合は、CloudFlareのサイトにいってボタンかリンクをクリックすることで簡単に消去できます。

さて、最後のレンタルなどのサーバー本体のキャッシュの場合です。

私が手こずったのがこれです!

私が利用しているのは、XSERVERというもので、値段は少々お高いですが安定度は抜群のレンタルサーバーです。このXSERVERにも、Xアクセレータというキャッシュがついています。これまでは上記の3つのキャッシュをクリアすればほとんど影響なかったのですが、今回に限っては、モバイル表示のCSSがいっこうに反映せず大変苦労しました。

サーバーパネルでXアクセレータを表示
サーバーパネルでXアクセレータを表示したところ

症状は以下のようなものでした。

  1. Chrome上のiPhoneエミュレータではCSSは反映する
  2. 上記を確かめた上で、実際にiPhone上で確かめると反映しない
  3. 念のため、もう一つの別のレンタルサーバー上で確認するとiPhoneでもCSSは反映した。

3項目の別のレンタルサーバー上で、CSS反映を確認できたところでようやく暗いトンネルを抜け出すことができました。

XSERVERのキャッシュをクリアする

原因がわかりましたが、ここでも一つ問題がありました。上記に示したサーバーパネルの高速化には3つの項目があります。Xアクセレータ、サーバーキャッシュ設定、ブラウザキャッシュ設定の3つです。設定時は、まずXアクセレータをオンにしてから、残りの2つをオンにするのですが、とりあえず、サーバーキャッシュ設定にはキャッシュ削除メニューがあったので、これを試したのですが、これだけではダメでした。結局サーバーキャッシュをオフ設定にしなければならないようです

キャッシュ削除を選択した
キャッシュ削除してもだめだった

キャッシュだけ削除してもだめなので、サーバーキャッシュタブメニューからオフに設定する

サーバーキャッシュをオフ
サーバーキャッシュをオフにする!

まとめ

いままでXアクセレータはうまく動作してなかったのかも知れませんね。ただ、レンタルサーバー側のメンテナンスによって思わず動作が変わってしまうこともあるようです。もし本書に気づきがあれば幸いです。お役に立てればうれしい限りです。

以上

コメントは利用できません。
スポンサーリンク

googleカスタム検索

ランキング

インデックス

※右側の記事と連動したインデックスです。見たいインデックスをクリックしてください。
ページ上部へ戻る