こんにちは！ASUE通信編集部です。

サイト制作や修正の過程で、修正完了の報告がきたのに「表示は以前のまま」「表示が崩れている…」なんてことありませんか？ 制作者側もこのやり取りを何度も往復した経験があると思います。 そんな時には「スーパーリロード」で再読み込みをしてみてください。 きっと最新の状態を確認できるかと思います。

更新方法をご紹介

Windowsの場合

ブラウザのショートカットキーを利用して再読み込みを行い、最新の状態を確認します。利用中のブラウザによって操作が変わるため、ご自身の環境に合わせて対応してください。

Macの場合

iPhone（Safari）のキャッシュクリア

スマホ表示の際のスーパーリロード（キャッシュクリア）は、PCのように簡単に行えないことが多いですが、iPhone（Safari）環境での対応方法を紹介します。こちらは特定のサイトのキャッシュクリアだけでなく、Cookieや閲覧履歴も削除されるため操作には注意してください。

［Safari］を選択した画面に［履歴とWebサイトデータを消去］がありますが、こちらはSafariのCookie、閲覧履歴、タブも削除されてしまいますので注意が必要です。

キャッシュは表示を早くする仕組み

修正作業中はキャッシュのせいで最新にならない〜とちょっと面倒な気持ちになるかもしれませんが、キャッシュは閲覧を快適にする仕組み。

キャッシュとはブラウザが表示したウェブページのデータを一時的にコンピューターに保存する機能で、次回アクセスした際にインターネット上のデータではなく保存されたデータを参照するため、すばやく表示することが可能となります。

スーパーリロードはキャッシュを無視して再読み込み

今回ご紹介した更新方法は、ブラウザのキャッシュを無視し、強制的にWebサーバーからファイルをダウンロードする方法です。

「スーパーリロード」「フルリロード」「強制再読み込み」「キャッシュクリア」など色々や呼び方をしますが、最新の状態にするというイメージで良いかと思います。キャッシュクリアは少し意味合いが違ってきますが、最新の状態にしたいという意味で使われることも多いです。

制作側で対応できないか

修正が頻繁にある場合にはキャッシュの問題で修正確認のやり取りが続くこともしばしば。 技術的な解決が可能な場合は対応しておくことで手間を減らすことができるかもしれません。

ファイルの後ろにクエリを追加：Ymd-Hi

• Y：年（4桁表記）
  • y：年（2桁表記）
• m：月（2桁表記）
  • n：月（先頭にゼロつけない）
• d：日（2桁表記）
• H：時間（24時間単位）
  • h：時間（12時間単位）
• i：分
• s：秒

CSSの後ろに日付や時間などのクエリを追加することで、ブラウザに違うファイルと認識させ都度読み込んでもらう形です。それほど修正しないファイルに設定する必要はありませんが、公開前の調整の際には結構役に立つ対応かと思います。phpが利用できる環境であれば、以下のように設定することが可能です。

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('Ymd-Hi'); ?>">

事前の情報共有が大事

スーパーリロード（キャッシュクリア）の方法をご紹介してきましたが、事前にクライアントの閲覧環境を確認しておくとスムーズです。ブラウザの更新方法もあらかじめ伝えておくことで不要のやり取りを減らせるかもしれません。お互いにストレスがなくて良い環境になりますよね。

また、制作者は目視で確認していることが前提だと多いと思いますので、クライアント側でキャッシュが残っているのでは？と思いがちですが、案外凡ミスで修正が反映されていなかったりします。（スマホだけ修正忘れてた！なんてこともあるはず…）公開前の修正作業はバタバタするものですので、今一度注意しておきましょう。