makeshopで更新がなかなか反映されないのはキャッシュが原因の場合が多い

makeshopだけでなく、楽天やYahooショッピング、もちろんWordPressも含めて、サイトでバナーや文字情報などを反映されない殆どの原因はキャッシュです。このキャッシュを説明するには難しい用語や通信などの解説も含まれてしまいますので、出来る限り早く更新が反映されるようなヒントをご紹介します。

先に結論から申し上げますと、読み込まれるファイルにはバージョンを付ける事、ブラウザのキャッシュを消去する事が、最も早く更新を確認する方法です。

ファイル名の後にバージョンを付ける

バージョンというと、また難しく聞こえがちですが、１でも２でも何でも問題ありません。要はファイル名は同じだがバージョンが異なるので、キャッシュではなくそちらを読み込んで表示させる方法です。例えば次のような方法です。

<!-- 画像にバージョンを付けて読み込む -->
<img src="/images/image-1.jpg?v=1" alt="image">
<img src="/images/image-1.jpg?v=201906021726" alt="image">

<!-- jsにバージョンを付けて読み込む -->
<script src="/js/script.js?v=2"></script>
<script src="/js/script.js?v=0612"></script>

読み込む画像などのファイル名のうしろに「?v=」とつけて任意の数字を付けるだけで、新しいファイルが読み込まれます。更新してまた新しいファイルをとなった場合には、数字を都度変化させれば、新しいファイルが読み込まれます。

今回は?vとしましたが、？が付いていればvでもaでも、数字だけでも問題ありません。

更新を確認したいだけならCTRLキーとブラウザの更新ボタン

Google chromeブラウザを利用します。chromeに残ったキャッシュの削除方法は「Ctrlキー＋ブラウザの更新ボタン」です。
キーボードの「Ctrl」と書かれたキーを見つけ、それを押しながらブラウザの更新ボタンをクリックしてください。

更新ボタン

スマホ版の確認はPCを利用する

スマホのブラウザのキャッシュの削除はしんどい場合もあるので、PCを使って処理を行うとスムーズです。

PCでmakeshopのスマホサイトを閲覧する

chromeでPC画面を開いたまま、「F12キー」を押すと、画面が上下もしくは左右に分割されて、Elements、Consoleなど書かれたよく分からないものが表示されます。そのよく分からない表示にくじけず四角が2つ表示されたボタンをクリックしていただくと、スマホくらいの大きさの画面になります。

ボタンクリック

ただこのままでは、スマホの画面の大きさでサイトを開いただけで、スマホのサイトを開いてはいません。そこでF5もしくは「Ctrl＋ブラウザの更新ボタンクリック」を行います。
makeshopは、PCとスマホで表示されるURLが異なるアダプティブデザインを採用していますので、この更新作業が必要になります。

URLはchromeだと、次の場所で確認できます。

実際のchromeでの画面は次のように表示されています。

makeshopのPCでのURLの例
PC表示
makeshopのスマホ表示のURL
スマホ表示

これでスマホ画面をPC上で見る事、更新を確認する事ができます。「Ctrl＋ブラウザの更新ボタンクリック」はこのスマホを見るモードでも使えますので、こちらを使ってご確認ください。

また、上記作業でも更新が反映されない場合はサーバの都合もしくはmakeshopの都合なので、その場合はお茶でも飲んで10分後くらいにまた更新を行ってください。